@netology-group/wc-ui
v0.2.2
Published
UI components
Downloads
5
Keywords
Readme
Usage
Define module
ES
<script type="module">
import { TabList, TabItem } from './es/index.js';
window.customElements.define('tab-list', TabList);
window.customElements.define('tab-item', TabItem);
</script>
UMD
<script src="path/to/dist/index.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
window.customElements.define('tab-list', window.WCUI.TabList);
window.customElements.define('tab-item', window.WCUI.TabItem);
})
</script>
In HTML
Tabs
Tabs with generated bars
<tab-list selected="Tab 1">
<tab-item title="Tab 1">Tab 1 content</tab-item>
<tab-item title="Tab 2">Tab 2 content</tab-item>
</tab-list>
Headless tabs
<tab-list selected="Tab 2" headless>
<tab-item title="Tab 1">Tab 1 content</tab-item>
<tab-item title="Tab 2">Tab 2 content</tab-item>
</tab-list>