0.0.17 • Published 4 years ago
zensele-tabs v0.0.17
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 labelscolor
- what color to be the active tab text and bottom borderproperty
- when object array is passed, astabs
, specify which object property to be used as labelshowNavigation
- (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 timeenableDelete
- (defaulttrue
) show/hide delete iconenableAdd
- (defaulttrue
) show/hide add iconmaxWidth
- (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 passedremoveTab
- 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>