Tabs

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

Use cases:

• creating blocks of contents that can be shown one at a time
• Associating a "tab" item with a title; when clicked, this shows the associated content

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

Example

You can see tabs in action in the example below. This has three tabs; clicking on a tab displays the relevant content.

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 that can be provided before the tablist element
end	Content that can be provided after the tablist element
tab	The slot for tabs (<rapid-tab>)
tabpanel	The slot for tab panels (<rapid-tab-panel>)

Parts

Part	Description
tablist	The element wrapping for the tabs
tab	The tab slot
activeIndicator	The visual indicator
tabpanel	The tab panel 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; the closing tag is 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.