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.