@frankhoodbs/tabs-cmp NPM

Tabs Component

An accessible tabs utility wrapper.

Un utility wrapper per tabs accessibili.

Version License

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');