@digital-realty/ix-tabs

<ix-tabs>

This webcomponent follows the open-wc recommendation.

Installation

npm i @digital-realty/ix-tabs

Usage

<script type="module">
  import '@digital-realty/ix-tabs/ix-tabs.js';
  import '@digital-realty/ix-tabs/ix-primary-tab.js';
  import '@digital-realty/ix-tabs/ix-secondary-tab.js';
</script>

<ix-tabs>
  <ix-primary-tab>Tab 1</ix-primary-tab>
  <ix-primary-tab>Tab 2</ix-primary-tab>
  <ix-primary-tab>Tab 3</ix-primary-tab>
  <ix-primary-tab>Tab 4</ix-primary-tab>
</ix-tabs>

or

<ix-tabs id="secondary">
  <ix-secondary-tab>Tab 1</ix-secondary-tab>
  <ix-secondary-tab>Tab 2</ix-secondary-tab>
  <ix-secondary-tab>Tab 3</ix-secondary-tab>
</ix-tabs>

or 

scrollButton property can be set on ix-tabs to enable
left and right scroll buttons for overflowing tab sets

active property can be set on individual tabs to set initial active state

<ix-tabs scrollButtons>
  <ix-primary-tab>Tab 1</ix-primary-tab>
  <ix-primary-tab active>Tab 2</ix-primary-tab>
  <ix-primary-tab>Tab 3</ix-primary-tab>
  <ix-primary-tab>Tab 4</ix-primary-tab>
</ix-tabs>

In React

<script type="module">
  import { IxTabs } from '@digital-realty/ix-tabs/IxTabs'
  import { IxPrimaryTab } from '@digital-realty/ix-tabs/IxPrimaryTab'
  import { IxSecondaryTab } from '@digital-realty/ix-tabs/IxSecondaryTab'
</script>

Demo and Documentation

Full documentation and demo are available at DLR Component Gallery.