Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mood-al/svelte-tabs-scrollable

a svelte scrollable tabs component with many additional features
https://github.com/mood-al/svelte-tabs-scrollable

scrollable-tabs svelete tab tabs

Last synced: about 1 month ago
JSON representation

a svelte scrollable tabs component with many additional features

Awesome Lists containing this project

README 

        
# 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!!



[![NPM](https://img.shields.io/npm/v/svelte-tabs-scrollable.svg)](https://www.npmjs.com/package/svelte-tabs-scrollable) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)



## Install



```bash

npm install --save svelte-tabs-scrollable

yarn add svelte-tabs-scrollable

```



## Demo



### 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



```jsx



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;



	{#each [...Array(33).keys()] as item}

		

			tab {item}

		

	{/each}



```



## Advanced example



```jsx



	// @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

	};



	{#each [...Array(33).keys()] as item}

          

            tab {item}

         

	{/each}



 goToEnd()}>go to end

 goToStart()}>go to start

{isRTL ? 'RTL' : 'LTR'}



	

	 showTabsScroll : {showTabsScroll} 





	

	 hideNavBtns : {hideNavBtns}



```



> 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



MIT © [Mohammed Aliwi](https://github.com/Mood-al/react-tabs-scrollable)