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 Tab component allows you to create navigable tabbed interfaces effortlessly. It dynamically manages tab switching while keeping the content structured and accessible. Highly customizable, it supports different layouts, active states, and styling options, making it ideal for presenting information in a clean and user-friendly manner.

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>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
  {/snippet}
  <TabPanel>TabPanel 1</TabPanel>
  <TabPanel>TabPanel 2</TabPanel>
  <TabPanel>TabPanel 3</TabPanel>
</Tabs>
  • The Tabs component wraps both the Tab and TabPanel components.
  • Each Tab corresponds to a specific TabPanel, and clicking on a tab will show the associated content.

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>

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-primary-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>Tab 1</Tab>
    <Tab class="font-bold text-2xl">Tab 2</Tab>
    <Tab>Tab 3</Tab>
  {/snippet}
  <TabPanel>TabPanel 1</TabPanel>
  <TabPanel class="bg-yellow-100 p-4">TabPanel 2</TabPanel>
  <TabPanel>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 to ensure a seamless experience for all users, including those using assistive technologies.

  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.
    • role="tabpanel" for each content section with aria-labelledby linking it to its respective tab.
    These attributes allow screen readers to interpret and navigate the component correctly.
  2. Keyboard Navigation: Users can navigate between tabs using Tab key, and activate a tab with Enter or Space. The active tab remains focusable, ensuring smooth interaction without extra actions.
  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