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

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 <svelte:element {...asProps} /> 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