Overview

#

Displays tabs:

This component is the most straightforward way to implement tabs. Its usage is recommended whenever possible.

Basic usage

#

Tab panels' content is passed via slots named by corresponding tabs' IDs from objects of the tabs array.

Each tabbed interface needs to have ariaLabel or ariaLabelledBy and also an identifier, tabsID, that is unique in regard to a page where tabs are rendered.

      <KTabs
        tabsId="coachReportsTabs"
        ariaLabel="Coach reports"
        :tabs="tabs"
      >
        <template #tabLessons>
          Lessons tab content
        </template>
        <template #tabLearners>
          Learners tab content
        </template>
        <template #tabGroups>
          Groups tab content
        </template>
      </KTabs>
    

      data() {
        return {
          tabs: [
            { id: 'tabLessons', label: 'Lessons' },
            { id: 'tabLearners', label: 'Learners' },
            { id: 'tabGroups', label: 'Groups' },
          ],
        };
      },
    

With router

#

When implementing tabs with the router, it's the router view rather than KTabs that is responsible for displaying the active tab content.

In such a case, define to property with a router link object as its value in objects of the tabs array:

      data() {
        return {
          tabs: [
            { id: 'tabLessons', label: 'Lessons', to: { path: '/lessons' } },
            { id: 'tabLearners', label: 'Learners', to: { path: '/learners' } },
            { id: 'tabGroups', label: 'Groups', to: { path: '/groups' } },
          ],
        };
      },
    

Then, tabs will be rendered as router links and you can use the router view to display the active tab content:

      <KTabs
        tabsId="coachReportsTabs"
        ariaLabel="Coach reports"
        :tabs="tabs"
      >
        <router-view />
      </KTabs>
    

Note that here, tabs content is not passed to KTabs via named slots, for it's the router view that's responsible for rendering it.

However, it is still required to wrap the active tab content in KTabs. Otherwise, even though tabs may seem to function correctly at first glance, accessibility would be broken.

          <KTabs
            tabsId="coachReportsTabs"
            ariaLabel="Coach reports"
            :tabs="tabs"
          >
            <!-- the active tab content is displayed in this router view -->
            <router-view />
          </KTabs>
        

          <KTabs
            tabsId="coachReportsTabs"
            ariaLabel="Coach reports"  
            :tabs="tabs"
          />
          <!-- the active tab content is displayed in this router view -->
          <router-view />
        

More tabs on a page

#

When there are two or more tabbed interfaces on one page, it is important to identify each one of them with an ID unique in regard to the page. Otherwise, some a11y features may break.

This is achieved by providing a unique value to tabsId property:

      <KTabs tabsId="firstTabs" />
      <KTabs tabsId="secondTabs" />
    

Appearance

#

There are several ways to adjust tabs styling. You can refer to the props and slots overview below and also to KTabsList: Appearance to see examples as KTabsList accepts exactly the same styling props and slots.

Related

#

• Tabs page has an overview and usage guidance for all tab-related components
• KTabsList and KTabsPanel present an alternative way to implement tabs
• KTabsList: Appearance contains examples of tabs styling that apply to KTabsas well

Props

#

Slots

#