@reuzun/tabpanel-webcomponent
v4.2.1
Published
A native tab-panel web component.
Downloads
36
Readme
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.