Tabs Component

An accessible tabs utility wrapper.

Un utility wrapper per tabs accessibili.

API Reference

Slots

| Name | Description | |:---------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | tablist-heading | Slot for the heading above the tabs navigation. Used for accessibility, remember to put an id on the tag passed inside and to pass his value in the data-tablist-id props as reference for the aria-labelledby. If you don't pass any heading remember to pass the data-aria-label props. | | tablist | Slot for the tabs navigation. If passed remember to put the class tabs on the tablist wrapper if you want a working animation of the tabpanel, follow this as reference for implementation (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/); If not passed a default navigation is rendered using the package https://www.npmjs.com/package/@frankhoodbs/scroll-x-navbar-cmp. | | tabpanel-${tab.id} | Required. Slots for every tab content. |

Props

| Name | Type | Description | |:--------------------------|:------------------|:-------------------------------------------------------------------------------------------------------------------------| | data-id-prefix | string | required Prefix for all the id attributes. | | data-tablist-id | string | The id of the slotted heading tag. If no heading is slot, pass data-tablist-aria-label instead. | | data-tablist-aria-label | string | The aria-label of the tablist. Needed only if no heading is slot. | | data-tabs | Tab[] or string | Required Tabs list | | data-active-tab-id | string | Required Id of the active tab. | | data-tabs-overlap | 'down' or 'up' | If passed indicates that each tab has a z-index greater or lower than the previous one. | | data-transition-name | string | Name of the animation to use, currently only fade is available. You can disable the animation passing an empty string. |

Tab interface

| name | Type | Description | |:-----------------|:----------|:------------| | id | string | Tab id | | label | string | Tab label |

Methods

| name | Params | Description | |:----------------|:----------------------------------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------| | handleKeydown | event: KeyboardEvent, tablist: Tab[], activeTabId: string, $tabRef: HTMLElement[] | You can use this method from outside to achieve the accessibility behavior of moving through the tabs with keyboard arrows. |

CSS variables

| Name | default | Description | |:---------------------------|:--------|:----------------------------------------------------------| | --tabs-heading-spacing-x | 24px | Lateral padding of the heading above the navigation bar | | --tabs-content-spacing-t | 24px | Top padding of the tab panel below the navigation bar | | --tabs-content-spacing-x | 24px | Lateral padding of the tab panel below the navigation bar |

Usage/Examples

<tabs-cmp
  data-id-prefix="TabsCmp-1"
  data-tablist-id="TabsCmp-1-tablist"
  :data-active-tab-id="activeTabId"
  :data-tabs="[
    { id: '1', label: 'Frozen Multi-portion Pasta' },
    { id: '2', label: 'Frozen Short Pasta' },
    { id: '3', label: 'Frozen Filled Pasta' },
    { id: '4', label: 'Frozen Egg Pasta' },
  ]"
  data-tabs-overlap="down"
  @update="activeTabId = $event"
>
  <template #tablist-heading>
    <h3 id="TabsCmp-1-tablist" class="pb-7">Accessible Tablist</h3>
  </template>
  <template #tabpanel-1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci
    architecto beatae cupiditate, dicta error est illo itaque minus natus
    numquam quaerat reprehenderit, repudiandae soluta! Adipisci amet
    aspernatur ducimus, eos expedita inventore ipsam. Ad adipisci amet
    assumenda at corporis dicta eius enim ex facilis fugit incidunt ipsam
    laborum necessitatibus quam, quia quibusdam quidem quis quo recusandae rem
    repellendus reprehenderit repudiandae sed tempore unde veniam vero vitae!
    Ad aliquid, animi asperiores consequatur deleniti ea eligendi harum nam
    pariatur quia quibusdam ratione reprehenderit rerum temporibus veritatis!
    Ab consectetur dolorum, error eveniet, ex facere hic ipsum labore libero
    nihil quaerat quidem quod repellat suscipit.
  </template>
  <template #tabpanel-2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium,
    enim?
  </template>
  <template #tabpanel-3>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta
    dolor enim mollitia quam temporibus ut. Aliquid, architecto asperiores,
    consequatur doloremque eaque magnam minus nam neque numquam odit
    reiciendis sed, voluptas voluptatem. Assumenda consectetur culpa eum iusto
    non reiciendis, rem!
  </template>
  <template #tabpanel-4>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium,
    enim?
  </template>
</tabs-cmp>

const activeTabId = ref<string>('1');

Screenshots