Svelte
tab bar component.
Check out this repl
npm install --save zensele-tabs
-
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>
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}"
-
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
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>