<a-tab-group>

A custom element to create a group of tabs and tab panels.

Source code & documentation

Demo

Tab 1 This is the tab panel for Tab 1.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates corporis amet numquam accusamus veniam ut voluptatum eligendi, sit quasi quod repellat? Rerum laboriosam temporibus vitae quod quibusdam veniam voluptates at. Tab 2 This is the tab panel for Tab 2.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, eos? Commodi quis molestiae sequi assumenda porro optio similique fuga reiciendis exercitationem corporis sint laborum, veniam modi molestias! Enim, minima sapiente. Tab 3 This is the tab panel for Tab 3.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi optio, enim eligendi sunt, neque consectetur quo totam at eum, nemo repellat! Totam illum culpa ea blanditiis sequi numquam. Rerum, error? Disabled 1 This is the tab panel for "Disabled 1".
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam eaque necessitatibus veniam ducimus quisquam ex. Optio, voluptates corporis. Architecto incidunt consequatur minima atque enim assumenda sint voluptatem vel amet alias. Closable 1 This is the tab panel for Closable 1.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias similique et enim at labore eius, qui suscipit. Hic cupiditate consequuntur impedit officiis! Officiis eos nisi libero culpa vero rerum sunt. Disabled 2 This is the tab panel for Disabled 2.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, cupiditate dolores aut consectetur quod debitis sapiente laboriosam totam aliquid necessitatibus est in reprehenderit ea, recusandae quisquam dicta ipsum beatae. Sit? Closable 2 This is the tab panel for Closable 2.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni dolorem eos atque. Ullam, consequuntur illum, optio vitae rem eveniet voluptatum molestiae sapiente libero temporibus hic autem id delectus atque voluptatibus! Closable & disabled This is the tab panel for Closable & disabled.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, eius expedita exercitationem quam aut repellat? Ipsum enim ut, mollitia sapiente expedita sunt molestias atque nobis harum, minima, dolores cumque voluptatibus? Tab 4 This is the tab panel for Tab 4.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam voluptas sunt magnam vero? Assumenda, eius? Accusantium inventore, eveniet quae corporis aut, deserunt quibusdam delectus, provident impedit saepe ipsum porro fugiat! Tab 5 This is the tab panel for Tab 5.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae saepe ducimus nesciunt vel quam quo voluptatibus dolorum asperiores minima maxime eaque cumque voluptatum cum, doloremque eligendi sapiente excepturi harum error.

Navigate tabs with Tab and Shift + Tab keys or using Arrow keys.

Events

Here you can see the custom events fired by the component.

Customize tab group
Attributes
Directionality:


Source code

HTML

<a-tab-group>
  <a-tab role="heading">Tab 1</a-tab>
  <a-tab-panel>This is the tab panel for Tab 1.</a-tab-panel>

  <a-tab role="heading">Tab 2</a-tab>
  <a-tab-panel>This is the tab panel for Tab 2.</a-tab-panel>

  <a-tab role="heading">Tab 3</a-tab>
  <a-tab-panel>This is the tab panel for Tab 3.</a-tab-panel>

  <a-tab role="heading" disabled>Disabled 1</a-tab>
  <a-tab-panel>This is the tab panel for "Disabled 1".</a-tab-panel>

  <a-tab role="heading" closable>Closable 1</a-tab>
  <a-tab-panel>This is the tab panel for Closable 1.</a-tab-panel>

  <a-tab role="heading" disabled>Disabled 2</a-tab>
  <a-tab-panel>This is the tab panel for Disabled 2.</a-tab-panel>

  <a-tab role="heading" closable>Closable 2</a-tab>
  <a-tab-panel>This is the tab panel for Closable 2.</a-tab-panel>

  <a-tab role="heading" disabled closable>Closable & disabled</a-tab>
  <a-tab-panel>This is the tab panel for Closable & disabled.</a-tab-panel>

  <a-tab role="heading">Tab 4</a-tab>
  <a-tab-panel>This is the tab panel for Tab 4.</a-tab-panel>

  <a-tab role="heading">Tab 5</a-tab>
  <a-tab-panel>This is the tab panel for Tab 5.</a-tab-panel>
</a-tab-group>

CSS

This is some custom styling applied to the components when you check the Custom styling checkbox from the form above.

a-tab-group {
  --selected-tab-color: var(--background-body);
  --selected-tab-bg-color: #005fcc;
  --tab-group-border-color: var(--border);
  --tab-group-bg-color: #ffffff;
  --scroll-button-inline-offset: 0.25rem;

  border: 1px solid var(--tab-group-border-color);
  border-radius: 0.25rem;
  background-color: var(--tab-group-bg-color);
  overflow: hidden;
}

a-tab-group::part(scroll-button) {
  border-radius: 0.25rem;
}

a-tab-group::part(tabs) {
  padding: 0.5rem;
}

a-tab-group::part(panels) {
  padding: 1rem;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--tab-group-border-color);
}

a-tab-group[placement="bottom"]::part(panels) {
  border-width: 0 0 1px 0;
}

a-tab-group[placement="start"]::part(panels) {
  border-width: 0 0 0 1px;
}

a-tab-group[placement="end"]::part(panels) {
  border-width: 0 1px 0 0;
}

a-tab-group a-tab::part(base) {
  border-radius: 0.25rem;
}

a-tab-group[placement="top"] a-tab,
a-tab-group[placement="bottom"] a-tab {
  margin: 0 0.25rem;
}

a-tab-group[placement="start"] a-tab,
a-tab-group[placement="end"] a-tab {
  margin: 0.25rem 0;
}

a-tab-group a-tab[selected]::part(close-tab) {
  color: var(--selected-tab-color);
}

@media (prefers-color-scheme: dark) {
  a-tab-group {
    --selected-tab-bg-color: #99c8ff;
    --tab-group-bg-color: #202125;
    --tab-group-border-color: #494c50;
  }
}

License

Licensed under the The MIT License (MIT)