svelte-tabs-scrollable

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

the demo isn't ready yet, but you cant see the react version demo of it

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
• Easy to style , you have the css file so you can edit it as you would like
• And much more ..

Usage

Soon

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 of the tabs' container
tabsClassName	-	string	adds a css class of the tabs
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
scrollSelectedToEndOfView	false	boolean	scroll the selected tab to the end of the view

you can see all the examples in the Demo

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

Dont forget to star the project on GITHUB 0_0

License

MIT © Mohammed Aliwi