@frankhoodbs/tabs-cmp

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