Tabs

Tabs are a set of layered sections of content that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel.

Use cases:

• Create sections of contents that can be shown one at a time
• Associate a "tab" item with a title, when clicked will show the associated content

You will use rapid-tabs, rapid-tab, rapid-tab-item to create your tabs.

Example

AppetizersEntreesDesserts

1. Stuffed artichokes
2. Bruschetta

1. Tomato Bread Soup with Steamed Mussels
2. Grilled Fish with Artichoke Caponata

1. Tiramisu
2. limoncello and Ice Cream with Biscotti

Genesis

Declaration

<rapid-tabs>
  <rapid-tab></rapid-tab>
  <rapid-tab-panel>
    <!-- content -->
  </rapid-tab-panel>
</rapid-tabs>

Usage

@customElement({
  name: 'my-element',
  template: html<MyElement>`
    <rapid-tabs activeid="entrees">
      <rapid-tab id="apps">Appetizers</rapid-tab>
      <rapid-tab id="entrees">Entrees</rapid-tab>
      <rapid-tab id="desserts">Desserts</rapid-tab>
      <rapid-tab-panel id="appsPanel">
        <ol>
          <li>Stuffed artichokes</li>
          <li>Bruschetta</li>
        </ol>
      </rapid-tab-panel>
      <rapid-tab-panel id="entreesPanel">
        <ol>
          <li>Tomato Bread Soup with Steamed Mussels</li>
          <li>Grilled Fish with Artichoke Caponata</li>
        </ol>
      </rapid-tab-panel>
      <rapid-tab-panel id="dessertsPanel">
        <ol>
          <li>Tiramisu</li>
          <li>limoncello and Ice Cream with Biscotti</li>
        </ol>
      </rapid-tab-panel>
    </rapid-tabs>
  `,
})
export class MyElement extends GenesisElement { }

React

Declaration

<rapid-tabs>
  <rapid-tab></rapid-tab>
  <rapid-tab-panel>
    <!-- content -->
  </rapid-tab-panel>
</rapid-tabs>

Usage

export function MyComponent() {
  return (
    <rapid-tabs activeid="entrees">
      <rapid-tab id="apps">Appetizers</rapid-tab>
      <rapid-tab id="entrees">Entrees</rapid-tab>
      <rapid-tab id="desserts">Desserts</rapid-tab>
      <rapid-tab-panel id="appsPanel">
        <ol>
          <li>Stuffed artichokes</li>
          <li>Bruschetta</li>
        </ol>
      </rapid-tab-panel>
      <rapid-tab-panel id="entreesPanel">
        <ol>
          <li>Tomato Bread Soup with Steamed Mussels</li>
          <li>Grilled Fish with Artichoke Caponata</li>
        </ol>
      </rapid-tab-panel>
      <rapid-tab-panel id="dessertsPanel">
        <ol>
          <li>Tiramisu</li>
          <li>limoncello and Ice Cream with Biscotti</li>
        </ol>
      </rapid-tab-panel>
    </rapid-tabs>)
}

Angular

Declaration

<rapid-tabs>
  <rapid-tab></rapid-tab>
  <rapid-tab-panel>
    <!-- content -->
  </rapid-tab-panel>
</rapid-tabs>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-component',
  template: `
    <rapid-tabs activeid="entrees">
      <rapid-tab id="apps">Appetizers</rapid-tab>
      <rapid-tab id="entrees">Entrees</rapid-tab>
      <rapid-tab id="desserts">Desserts</rapid-tab>
      <rapid-tab-panel id="appsPanel">
        <ol>
          <li>Stuffed artichokes</li>
          <li>Bruschetta</li>
        </ol>
      </rapid-tab-panel>
      <rapid-tab-panel id="entreesPanel">
        <ol>
          <li>Tomato Bread Soup with Steamed Mussels</li>
          <li>Grilled Fish with Artichoke Caponata</li>
        </ol>
      </rapid-tab-panel>
      <rapid-tab-panel id="dessertsPanel">
        <ol>
          <li>Tiramisu</li>
          <li>limoncello and Ice Cream with Biscotti</li>
        </ol>
      </rapid-tab-panel>
    </rapid-tabs>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyComponent { }

Tabs API

API examples shown with Genesis component syntax, and closing tag omitted.

Attributes

Attribute	Type	Description	Example
orientation	"horizontal" | "vertical"	The orientation of the tabs menu. Default: "horizontal".	<rapid-tabs orientation="vertical">
activeid	string	The id of the active tab. Setting this allows you to configure the default opened tab, else the first tab is shown.	<rapid-tabs activeid="apps">
activeindicator	boolean	Whether or not to show the active indicator on the active tab. Default: true	<rapid-tabs ?activeindicator=${() => false}>

Properties

Property	Type	Description	Example
activetab	HTMLElement	The active tab element. You should only read this value, and not set it on the HTML.	const value = tabRef.activetab;

Slots

Slot	Description
start	Content which can be provided before the tablist element
end	Content which can be provided after the tablist element
tab	The slot for tabs (<rapid-tab>)
tabpanel	The slot for tabpanels (<rapid-tab-panel>)

Parts

Part	Description
tablist	The element wrapping for the tabs
tab	The tab slot
activeIndicator	The visual indicator
tabpanel	The tabpanel slot

Events fired

Event	Type	Description	Example
change	HTMLElement	Fired when a tab is selected, or during keyboard navigation. The event data is active tab.	<rapid-tabs @change=${(x,ctx) => x.handleTabChange(ctx.event)}>

Events listened to

This component doesn't listen to any events.

Tab API

API examples shown with Genesis component syntax, and closing tag omitted.

Attributes

Attribute	Type	Description	Example
disabled	boolean	Disable the tab, if disabled it will not respond to user interaction.	<rapid-tab disabled>

Properties

This component doesn't have any properties that are not also controlled via attributes.

Slots

Slot	Description
Default	The default slot for the tab content.

Parts

This component doesn't have any parts.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.

Tab panel API

API examples shown with Genesis component syntax, and closing tag omitted.

Attributes

This component doesn't have any attributes.

Properties

This component doesn't have any properties.

Slots

Slot	Description
Default	The default slot for the main tab content. Only shown when the associated tab is active.

Parts

This component doesn't have any parts.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.