Svelte Tabs Scrollable

a svelte scrollable tabs component with many additional features

Need a Svelte website built?

Hire a professional Svelte developer today.

svelte-tabs-scrollable

A simple svelte scrollable tabs with a lot of additional features and with fully supporting of RTL mode This package is the Svelte version of react-tabs-scrollable package!!

Install

npm install --save svelte-tabs-scrollable
yarn add svelte-tabs-scrollable

Demo

Features

This package is the svelte version of react-tabs-scrollable package!!
Easy to start with it takes you less than minute to start it up!
It has many features and so easy to customize
Fully support for RTL (actually the reason why I built this component is because RTL)
You can control in literally everything inside it
Great to use in navigation , menus and lists or any proper use for tabs
And much more ..

Usage


<script>


import Tabs from 'svelte-tabs-scrollable/Tabs.svelte';
import Tab from 'svelte-tabs-scrollable/Tab.svelte';

// define the initail state of the active tab to start with
let activeTab = 10;

</script>
<Tabs {activeTab} >
    {#each [...Array(33).keys()] as item}
        <Tab>
            tab {item}
        </Tab>
    {/each}
</Tabs>

Advanced example


<script>
    // @ts-nocheck

    import Tabs from 'svelte-tabs-scrollable/Tabs.svelte';
    import Tab from 'svelte-tabs-scrollable/Tab.svelte';

    let isRTL = false;
    const onClick = () => {
        isRTL = !isRTL;
    };
    let activeTab = 13;
    const onTabClick = (e, index) => {
        console.log(index);
    };
    $: {
        if (typeof window !== 'undefined') {
            const body = window.document.body;
            isRTL ? (body.dir = 'rtl') : (body.dir = 'ltr');
        }
    }
    let goToEnd;
    let goToStart;
    let showTabsScroll = false;
    let hideNavBtns = false;
    const didReachEnd = (val) => {
        // sets if the tabs reached the end point of the tab's container
    };
    const didReachStart = (val) => {
        // sets if the tabs reached the start point of the tab's container
    };
</script>

<!-- I couldn't add comments between the <Tabs/>'s props -_- -->
<Tabs
    {activeTab}
    {onTabClick}
    bind:goToEnd
    bind:goToStart
    {isRTL}
    {didReachStart}
    {didReachEnd}
    scrollSelectedToCenterOfView={false}
    scrollSelectedToEndOfView={false}
    animationDuration={300}
    hideNavBtnsOnMobile={true}
    {showTabsScroll}
    {hideNavBtns}
    tabsClassName="ss"
    tabsContainerClassName="ss"
>
    {#each [...Array(33).keys()] as item}
          <Tab
            as="a"
            asProps={{
                href: '/#',
                ['data-item']: item
            }}
            tabClassName="custom-class">
            tab {item}
         </Tab>
    {/each}
</Tabs>

<button on:click={() => goToEnd()}>go to end</button>
<button on:click={() => goToStart()}>go to start</button>
<button on:click={onClick}>{isRTL ? 'RTL' : 'LTR'}</button>
<div style="border : 1px solid #000; display: inline-block">
    <input bind:checked={showTabsScroll} type="checkbox" id="showTabsScroll" />
    <label for="showTabsScroll"> showTabsScroll : {showTabsScroll} </label>
</div>
<div style="border : 1px solid #000; display: inline-block">
    <input bind:checked={hideNavBtns} type="checkbox" id="hideNavBtns" />
    <label for="hideNavBtns"> hideNavBtns : {hideNavBtns}</label>
</div>

You can see the full examples in the demos's page

Tabs' API

Name	Default	Type	Description
`activeTab*`	-	integer	the selected tab value which must be passed to the commponent
`onTabClick`	-	function	`function(event, value) => void` callback function fires on tab click. It has two props, the first on is the event object the second on is the selected tab value
`tabsContainerClassName`	-	string	adds a css class for the tabs' container
`tabsClassName`	-	string	adds a css class for the tabs
`onLeftBtnClick`	-	function	`onLeftBtnClick` : a function that scrolls the tabs to the left. to use it you must bind it with the component like so `bind:onLeftBtnClick`
`onRightBtnClick`	-	function	`onRightBtnClick` : a function that scrolls the tabs to the right. to use it you must bind it with the component like so `bind:onRightBtnClick`
`goToStart`	-	function	`goToStart` : a function that scrolls to the start of the tabs container. to use it you must bind it with the component like so `bind:goToStart`
`goToEnd`	-	function	`goToEnd` : a function that scrolls to the end of the tabs container. to use it you must bind it with the component like so `bind:goToEnd`
`isRTL`	false	boolean	sets if the direction of the tabs is RTL or not
`didReachEnd`	-	function	sets if the tabs reached the end point of the container `didReachEnd={(val) => console.log(val)}`
`didReachStart`	-	function	sets if the tabs reached the start point of the container `didReachStart={(val) => console.log(val)}`
`tabsScrollAmount`	3	string \| integer	sets how many tabs you want to scroll on every move `tabsScrollAmount={3}`
`animationDuration`	300s	integer	sets the animation duration of the scroll when you click on the navigation buttons note : this will overwirte the animationDuration value `animationDuration={300}`
`rightBtnIcon`	feather arrow-right svg icon	Svelte component	sets the right navitgation button icon `rightBtnIcon={SvelteComponent}`
`leftBtnIcon`	feather arrow-left svg icon	Svelte component	sets the left navitgation button icon `leftBtnIcon={SvelteComponent}`
`hideNavBtns`	false	boolean	hides the navigantion button `hideNavBtns={false}`
`hideNavBtnsOnMobile`	true	boolean	hides the navigation buttons on mobile devices
`showTabsScroll`	false	boolean	shows the scroll of the tabsn
`scrollSelectedToCenterOfView`	false	boolean	scroll the selected tab to the center of the view. I will add examples about it in the demos' page
`scrollSelectedToEndOfView`	false	boolean	scroll the selected tab to the end of the view. I will add examples about it in the demos' page

Tab's API

Name	Default	Type	Description
`as`	button	string	You can change the HTML element of the `Tab` 's component by passing `as="a"`. this becomes handy if u wanted to use anchor with href or any custom element. Note : if u want to pass props or attribute to the html element u must use `asProps` prop
`asProps`	-	object	You can pass attributes to the element u passed with `as` prop. For example if you want `as="a"` and u want to pass `href` as an attribute. you can use `asProps` like so `asProps={{ href: '/#', }}`. Note : this prop uses inisde so basically you can pass anything as prop to it!
`tabClassName`	`sts___tab sts___btn`	string	you can pass a custom class to the `Tab` component

Please let me see your reviews and if there're any features you want me to add them to the project!

Dont forget to star the project on GITHUB 0_0

License

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing

Need a Svelte website built?

Hire a professional Svelte developer today.