Kongponents

# Tabs

KTabs - A mindblowing tabs component

Tab 1 content

<KTabs :tabs="tabs">
  <template v-slot:tab1>
    <p>Tab 1 content</p>
  </template>
  <template v-slot:tab2>
    <p>Tab 2 content</p>
  </template>
</KTabs>

<script>
export default {
  data () {
    return {
      tabs: [
        {
          hash: '#tab1',
          title: 'Tab 1'
        },
        {
          hash: '#tab2',
          title: 'Tab 2'
        }
      ]
    }
  }
}
</script>

# Props

# tabs

KTabs takes one required prop which is an array of tab objects.

  • tabs
  • @change - Emitted when a tab is changed
<template>
  <KTabs :tabs="tabs" />
</template>
<script>
export default {
  data () {
    return {
      tabs: [
        { hash: '#pictures', title: 'Pictures' },
        { hash: '#movies', title: 'Movies' },
        { hash: '#books', title: 'Books' },
      ]
    }
  }
}
</script>

# v-model

By default the tabs will set the first tab in the array as active. You can override this by passing in the hash of any other tab to be used with v-model.

Tab 2 content

<KTabs
  v-model="#tab2"
  :tabs="tabs">
  <template v-slot:tab1>Tab 1 content</template>
  <template v-slot:tab2>Tab 2 content</template>
</KTabs>

# Slots

In order to actually see your tabbed content you must slot it using the tab hash property without the hash mark.

Wow look Pictures!

<template>
  <KTabs :tabs="tabs">
    <template v-slot:pictures>Wow look Pictures!</template>
    <template v-slot:movies>Wow look Movies!</template>
    <template v-slot:books>Wow look Books!</template>
  </KTabs>
</template>
<script>
export default {
  data ) {
    return {
      tabs: [
        { hash: '#pictures', title: 'Pictures' },
        { hash: '#movies', title: 'Movies' },
        { hash: '#books', title: 'Books' },
      ]
    }
  }
}
</script>

# Usage

# Router Hash

KTabs emits a changed event with the new tab hash when clicked. You can use this to set the router or window hash and in turn use that with v-model.

<template>
  <KTabs
    :tabs="tabs"
    v-model="$route.hash"
    @changed="hash => $router.replace({hash})">
    <template v-slot:pictures>Wow look Pictures!</template>
    <template v-slot:movies>Wow look Movies!</template>
    <template v-slot:books>Wow look Books!</template>
  </KTabs>
</template>
<script>
export default {
  data () {
    return {
      tabs: [
        { hash: '#pictures', title: 'Pictures' },
        { hash: '#movies', title: 'Movies' },
        { hash: '#books', title: 'Books' },
      ]
    }
  }
}
</script>

# Theming

Variable Purpose
--KTabsBottomBorder Border between the tabs items and the tab content
--KTabsActiveColor Active color of tab and underline
--KTabsColor Default text color of the tab items


An Example of changing the primary KButton variant to green instead of blue might look like.

Note: We are scoping the overrides to a wrapper in this example

Tab 1 content

<template>
  <div class="KTabs-wrapper">
    <KTabs :tabs="tabs">
      <template v-slot:tab1>
        <p>Tab 1 content</p>
      </template>
      <template v-slot:tab2>
        <p>Tab 2 content</p>
      </template>
    </KTabs>
  </div>
</template>

<style>
.KTabs-wrapper {
  --KTabsActiveColor: green;
}
</style>

← TextArea →