Tabs

A simple and flexible way to organize content into multiple panels. It helps in structuring related information efficiently within a compact space.

About

The Tabs component takes the tab buttons in a tabs snippet and the panels as its children. A Tab and a TabPanel are paired by a matching value, not by the order they appear in.

Tab Values

Every Tab and every TabPanel takes a required value. A tab opens the panel that carries the same value, so the pairs are what link the two lists together. Use any string you like, as long as each pair is unique within one Tabs.

Example

Below is an example of how to implement the Tabs component in your Svelte project. Each tab is linked to a specific content panel, and when you click a tab, the respective content is displayed.

Svelte 
<script>
  import { Tabs, Tab, TabPanel } from "theui-svelte";
</script>

<Tabs>
  {#snippet tabs()}
    <Tab value="tab1">Tab 1</Tab>
    <Tab value="tab2">Tab 2</Tab>
    <Tab value="tab3">Tab 3</Tab>
  {/snippet}
  <TabPanel value="tab1">TabPanel 1</TabPanel>
  <TabPanel value="tab2">TabPanel 2</TabPanel>
  <TabPanel value="tab3">TabPanel 3</TabPanel>
</Tabs>
  • The Tabs component wraps both the Tab and TabPanel components.
  • Each Tab and TabPanel requires a value prop. A tab is linked to the panel with the same value, and clicking on a tab will show the associated content.
  • The first tab is selected by default.

Variant

The variant prop allows you to customize the style of the tabs. It accepts two values: "tabs" and "pills".

  • "tabs": Displays the tabs in a traditional horizontal layout with square or rectangular edges.
  • "pills": Displays the tabs with rounded edges, giving them a pill-like appearance.

By default, the variant is set to "pills", giving the tabs a rounded pill-like design. You can change this to "tabs" if you prefer a more classic tab design with square edges.

Svelte 
<Tabs variant="tabs"> ... </Tabs>

Animation Speed

The animationSpeed prop controls the transition speed of the tabs when their style changes, like on hover or when a tab becomes active. Available values are "none", "slower", "slow", "normal" (default), "fast" and "faster". A panel fades in when it is shown; set animationSpeed to "none" to switch panels without the fade.

Svelte 
<Tabs animationSpeed="none"> ... </Tabs>

Customization

The Tabs component is highly customizable, allowing you to tailor its appearance and behavior to fit your design needs. You can adjust various parts of the component using the following props:

Border Customization

The "border" prop controls the border of the tabs. By default, it is set to true, which applies the default border style. You can pass a custom class or a boolean value to either enable or disable the border.

  • true (default): Applies the default border.
  • false: Disables the border.
  • string: You can pass a custom class for border styling.
Svelte 
<!-- Custom border classes -->
<Tabs border="border-b-4 border-brand-300"> ... </Tabs>

Customize the Tab Container

The "tabContainerClasses" prop allows you to customize the tab list container. You can pass any valid Tailwind or custom class to modify the appearance of the tab list.

Svelte 
<Tabs tabContainerClasses="flex justify-center"> ... </Tabs>

Tab Customization

To customize the tabs, use "tabClasses" ans "tabActiveClasses" props. The "tabClasses" prop applies to all tabs, while the "tabActiveClasses" prop is applied only to the active tab, overriding the styles from "tabClasses".

Svelte 
<Tabs
  tabClasses="text-gray-500 hover:text-blue-500"
  tabActiveClasses="bg-blue-800 text-blue-50 hover:text-blue-200"
>
  ...
</Tabs>

Panel Customization

You can use the "tabPanelClasses" prop to customize the style of the tab panels. You can pass custom classes for margin, padding, background color, or any other styling.

Svelte 
<Tabs tabPanelClasses="p-4 bg-gray-100"> ... </Tabs>

Customize Individual Component

If you want to customize a specific Tab or TabPanel or event the Tabs component, you can use the native class attribute with that component.

Svelte 
<Tabs class="border-2 border-yellow-500 py-2 px-4 rounded-lg">
  {#snippet tabs()}
    <Tab value="tab1">Tab 1</Tab>
    <Tab value="tab2" class="font-bold text-2xl">Tab 2</Tab>
    <Tab value="tab3">Tab 3</Tab>
  {/snippet}
  <TabPanel value="tab1">TabPanel 1</TabPanel>
  <TabPanel value="tab2" class="bg-yellow-100 p-4">TabPanel 2</TabPanel>
  <TabPanel value="tab3">TabPanel 3</TabPanel>
</Tabs>

In the example above, the native class attribute is applied to the Tabs component, the second Tab, and the second Tabpanel.

Accessibility

The Tabs component follows the WAI-ARIA Tabs Pattern.

  1. Built-in Accessibility Features: The component includes essential ARIA attributes and roles:
    • role="tablist" for the container that holds all tabs.
    • role="tab" for each tab with aria-selected="true" on the active one, and aria-controls pointing to its panel.
    • role="tabpanel" for each content section with aria-labelledby linking it to its respective tab.
    These attributes are what a screen reader reads to move through the tabs.
  2. Keyboard Navigation: Users can move to the tabs using Tab key, and activate a tab with Enter or Space. Inside the tab list, Arrow Right and Arrow Left move to the next or previous tab (wrapping around at the ends), and Home and End move to the first or last tab. The focused tab is activated right away.
  3. Customization Considerations: When applying custom styles, ensure focus indicators remain visible, contrast is sufficient, and animations do not disrupt usability, particularly for users with motion sensitivity.

By following these best practices, the Tabs component provides an inclusive and accessible experience.

Configuration