TabPanel - Web Component
A light-weight tab panel component with allowing limitless panels without any content restriction.
Size - 1.92KiB
How to install?
npm install @reuzun/tabpanel-webcomponent
How to use?
Nth button changes content to Nth content.
<script src="./node_modules/@reuzun/tabpanel-webcomponent/dist/tab-panel.js"></script>
<tab-panel width="75%" height="250px">
<anything slot="button"></anything>
<anything slot="content"></anything>
<anything slot="button"></anything>
<anything slot="content"></anything>
</tab-panel>
<tab-panel width="300px" height="700px" direction="rtl">
<anything slot="content"></anything>
<anything slot="content"></anything>
<anything slot="button"></anything>
<anything slot="button"></anything>
</tab-panel>Properties
| Command | Description | Default | Allowed Values |
|---|---|---|---|
width |
Width of the tab-panel | 400px | Same with css. |
height |
Width of the tab-panel | 400px | Same with css. |
direction |
Direction of buttons to Content | 'ttb' | 'ltr', 'rtl', 'ttb', 'btt' |
| ltr | rtl | ttb | btt |
|---|---|---|---|
 |
 |
 |
 |
How to run demo?
cd demo
npm install
- open demo.html
LICENSE
Licensed under MIT License.