Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
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
react-tabs-scrollable
package!!
<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>
<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
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 |
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.
|
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: '/#',
}} .
|
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
MIT © Mohammed Aliwi
FAQs
a simple svelte scrollable tabs with a lot of additional features and with fully supporting of RTL mode
The npm package svelte-tabs-scrollable receives a total of 16 weekly downloads. As such, svelte-tabs-scrollable popularity was classified as not popular.
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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.