@outbook/webcomponents-tabs

This package provides a web component for creating a tabbed interface, allowing users to switch between different content panels.

Installation

npm install @outbook/webcomponents-tabs

Usage

As a Lit Element

import {html} from 'lit';
import {Tabs} from '@outbook/webcomponents-tabs';

function render() {
  return html`
    ${Tabs({
    items: [
      {title: 'Tab 1', content: () => html`<p>Content for Tab 1</p>`},
      {title: 'Tab 2', content: () => html`<p>Content for Tab 2</p>`}
    ],
    currentTabIndex: 0
  })}
  `;
}

Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined. When using direct HTML, you will need to manually manage the slot attributes for content.

import '@outbook/webcomponents-tabs';

<outbook-tabs>
  <div slot="slot-0">
    <p>Content for Tab 1</p>
  </div>
  <div slot="slot-1">
    <p>Content for Tab 2</p>
  </div>
</outbook-tabs>

Component: outbook-tabs

This is the underlying web component. It can be used directly in HTML or in any framework.

Properties (via Tabs function)

The Tabs function accepts an object with the following properties:

| Property | Type | Default | Description | |--------------------|-----------|-------------|---------------------------------------------------------------------------------| | items | Array | [] | An array of objects, each representing a tab. Each object should have a title (String) and content (Function returning HTML). Optional id (String) and ariaLabel (String) can also be provided. | | currentTabIndex | Number | 0 | The 0-based index of the tab that should be initially selected. | | isInDialog | Boolean | false | If true, applies specific styling for when the tabs are within a modal dialog. | | extraClasses | String | undefined | Additional CSS classes to apply to the host element. |

Slots

The content for each tab is rendered into a named slot. The name of the slot follows the pattern slot="slot-${item.id || index}", where item.id is the optional id provided in the items array, or the tab's index if no id is specified.

Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

Custom Properties

Can be used with css light-dark function.

| Custom Property | Description | |------------------------------------|-----------------------------| | --outbook-tabs--color-background | The background color of tabs. | | --outbook-tabs--color-border | The border color of tabs. | | --outbook-tabs--color-text | The text color of tabs. |

License

This component is licensed under the Apache-2.0 License.