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!!
![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)
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
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