zenSele Tabs
Svelte
tab bar component.
Demo
Check out this repl
Install
npm install --save zensele-tabs
Usage
-
Arrays
<script> import { Tabs } from "zensele-tabs"; let tabs = ["One", "Two", "Three"]; </script> <div> <Tabs {tabs}/> </div>
-
Object Arrays - when passing object arrays then we need to specify which property of the object to be used as label
<script> import { Tabs } from "zensele-tabs"; let tabs = [ { name: "One 1", blah: 123 }, { name: "Two 2", blah: 123 }, { name: "Three 3", blah: 123 }, ]; </script> <div> <Tabs {tabs} property={'name'}/> </div>
Properties
-
tabs
- array (or objects array) with the values that should be displayed as labels -
color
- what color to be the active tab text and bottom border -
property
- when object array is passed, astabs
, specify which object property to be used as label -
showNavigation
- (defaulttrue
) When its set tofalse
the navigation arrows will be shown only when there is no enough space for all the tabs to be shown at the same time -
enableDelete
- (defaulttrue
) show/hide delete icon -
enableAdd
- (defaulttrue
) show/hide add icon -
maxWidth
- (defaultnull
, optional) control the max width, inpx
, of the tabs. Example:maxWidh="{300}"
Events
-
tabIndexChange
- when tab index is changed then this event will be dispatched. The data in the event will return the index and the data of the selected tab.Having the code below:
<script> import { Tabs } from "zensele-tabs"; let tabs = [ { name: "One 1", blah: 123 }, { name: "Two 2", blah: 123 }, { name: "Three 3", blah: 123 }, ]; </script> <div> <Tabs {tabs} property={'name'} on:tabIndexChange={(event) => console.log(event.detail)/> </div>
And if we select the second element (
{ name: "Two 2", blah: 123 }
) will output the following data in the console:{ index: 1, data: { name: "Two 2" blah: 123 } }
-
addTab
- when add tab button is pressed. Apart from the event iteself no other details are passed -
removeTab
- each tab have a remove button when the tab is active). The event returns the index of the tab that triggered it
-
Setting active tab
The component expose selectedTabIndex
function which is used to set the active tab. Just pass the required tab index that need to be "activated"
<script>
import { Tabs } from "zensele-tabs";
let tabBar;
function changedType(type) {
tabBar.selectedTabIndex(0)
}
let tabs = [
{ name: "One 1", blah: 123 },
{ name: "Two 2", blah: 123 },
{ name: "Three 3", blah: 123 },
];
</script>
<div>
<Tabs {tabs} bind:this="{tabBar}"/>
</div>