Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
svelte-tabs-scrollable
Advanced tools
Readme
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 install --save svelte-tabs-scrollable
yarn add svelte-tabs-scrollable
the demo isn't ready yet, but you cant see the react version demo of it
Soon
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
MIT © Mohammed Aliwi
FAQs
a simple svelte scrollable tabs with a lot of additional features and with fully supporting of RTL mode
We found that svelte-tabs-scrollable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).