Barebones Components

Appearance

Return to top
On this page

WARNING

While the documentation is fairly complete, it is still in first draft.

Tabs (BonesTabs)

Overview

The Barebones Tabs component is an accessible keyboard compatible tabbing component.

Component parts

Part nameDescription
componentThe components root element.
navigationThe nav element for the tab buttons
navigationListThe ul wrapper that sits inside the navigation element
navigationListItemThe li wrapper for individual tab buttons
navigationButtonActiveThe tab button when is the current active tab
navigationButtonThe tab button when not the current active tab
contentItemsThe element that wraps all of the content items
contentItemThe element that wraps the tabs content slot
Prop nameDescription
tabstabs accepts an array of the type Tab, see types.
renderInactiveTabsrenderInactiveTabs allows you to render inactive tabs in the DOM, by default this is set to true, if you'd like inactive tabs hidden in the DOM you can set this to false.

Slots

Slot nameDescription
Wildcard*The wildcard slot is the content of a tab it's name should match a key in the tabs prop array

Prop Types 

export interface Tab {
  key: string;
  title: string;
}

Component Type 

export interface Tabs {
  parts: Parts;
}

Examples

WARNING

Examples use tailwind/salient theme, to use this theme you may add it using the theme npx command and installing Tailwind JIT in your application. Read more about themes.

Code 

<BonesTabs
  :tabs="[
    {
      key: 'bronx-tale',
      title: 'Bronx Tale',
    },
    {
      key: 'goodfellas',
      title: 'Goodfellas',
    },
  ]"
>
  <template #bronxTale> The Bronx...</template>
  <template #goodfellas>The story of Irish-Italian...</template>
</BonesTabs>

Output