@digital-realty/ix-tabs
v1.1.4-alpha-228982-t51.0
Published
Webcomponent ix-tabs following open-wc recommendations
Downloads
3,722
Keywords
Readme
<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.