svelte-tabs-scrollable
Version:
a simple svelte scrollable tabs with a lot of additional features and with fully supporting of RTL mode
352 lines (314 loc) • 11.5 kB
Markdown
# 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 <a href="https://www.npmjs.com/package/react-tabs-scrollable" target="_blank" rel="noopener"><span>react-tabs-scrollable</span> </a> package!!
[](https://www.npmjs.com/package/svelte-tabs-scrollable) [](https://standardjs.com)
## Install
```bash
npm install --save svelte-tabs-scrollable
yarn add svelte-tabs-scrollable
```
## Demo
### <a href="https://svelte-tabs-scrollable.vercel.app" target="_blank" rel="noopener"><span>Demo</span> </a>
## Features
- This package is the svelte version of <code>react-tabs-scrollable </code> 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
```jsx
<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
```jsx
<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 <a href="https://svelte-tabs-scrollable.vercel.app/demos" target="_blank" rel="noopener"><span>demos</span></a>'s page
## Tabs' API
<table>
<tr>
<td>Name</td>
<td>Default</td>
<td>Type</td>
<td>Description</td>
</tr>
<tr>
<td><code>activeTab*</code> </td>
<td>-</td>
<td>integer</td>
<td>the selected tab value which must be passed to the commponent</td>
</tr>
<tr>
<td><code>onTabClick</code></td>
<td>-</td>
<td>function</td>
<td> <code>function(event, value) => void</code> 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</td>
</tr>
<!-- <tr>
<td><code>action</code></td>
<td>-</td>
<td>ref</td>
<td>react ref fired when the component mounts. It's useful if you want to some functionalities programmatically. It supports 4 function : <br />
<div><code>onLeftBtnClick ,onRightBtnClick, goToStart, goToEnd</code></div>
<br /> <div><code>onLeftBtnClick</code> : to control the left btn click and use your own navigation button. you can call it by so <code>ref.onLeftBtnClick()</code> </div>
<br/>
<div> <code>onRightBtnClick</code> : to control the right btn click and use your own navigation button. you can call it by so <code>ref.onRightBtnClick()</code>
<br/>
</div>
<br/>
<div> <code>goToStart</code> : to control the tabs to go to the start of the tabs container. you can call it by so <code>ref.goToStart()</code> </div> <br />
<div> <code>goToEnd</code> : to control the tabs to go to the end of the tabs container. you can call it by so <code>ref.goToEnd()</code> </div>
<span></span>
</td>
</tr> -->
<tr>
<td><code>tabsContainerClassName</code></td>
<td>-</td>
<td> string</td>
<td> adds a css class for the tabs' container </td>
</tr>
<tr>
<td><code>tabsClassName</code></td>
<td>-</td>
<td> string</td>
<td>adds a css class for the tabs </td>
</tr>
<tr>
<td><code>onLeftBtnClick</code></td>
<td>-</td>
<td> function </td>
<td> <code>onLeftBtnClick</code> : a function that scrolls the tabs to the left. to use it you must bind it with the <Tabs /> component like so <code> bind:onLeftBtnClick </code> </code> </td>
</tr>
<tr>
<td><code>onRightBtnClick</code></td>
<td>-</td>
<td> function </td>
<td> <code>onRightBtnClick</code> : a function that scrolls the tabs to the right. to use it you must bind it with the <Tabs /> component like so <code> bind:onRightBtnClick </code> </code> </td>
</tr>
<tr>
<td><code>goToStart</code></td>
<td>-</td>
<td> function</td>
<td> <code>goToStart</code> : a function that scrolls to the start of the tabs container. to use it you must bind it with the <Tabs /> component like so <code> bind:goToStart </code> </code> </td>
</tr>
</tr>
<tr>
<td><code>goToEnd</code></td>
<td>-</td>
<td> function</td>
<td> <code>goToEnd</code> : a function that scrolls to the end of the tabs container. to use it you must bind it with the <Tabs /> component like so <code> bind:goToEnd</code> </code> </td>
</tr>
<tr>
<tr>
<td><code>isRTL</code></td>
<td>false</td>
<td>boolean</td>
<td> sets if the direction of the tabs is RTL or not</td>
</tr>
</tr>
<tr>
<td><code>didReachEnd</code></td>
<td>-</td>
<td>function</td>
<td> sets if the tabs reached the end point of the container <code>didReachEnd={(val) => console.log(val)}</code> </td>
</tr>
</tr>
</tr>
<tr>
<td><code>didReachStart</code></td>
<td>-</td>
<td>function</td>
<td> sets if the tabs reached the start point of the container <code>didReachStart={(val) => console.log(val)}</code> </td>
</tr>
<tr>
<td><code>tabsScrollAmount</code></td>
<td>3</td>
<td>string | integer</td>
<td> sets how many tabs you want to scroll on every move <code> tabsScrollAmount={3}</code> </td>
</tr>
<tr>
<td><code>animationDuration</code></td>
<td>300s</td>
<td> integer</td>
<td> sets the animation duration of the scroll when you click on the navigation buttons
note : this will overwirte the animationDuration value <code> animationDuration={300}</code> </td>
</tr>
<tr>
<tr>
<td><code>rightBtnIcon</code></td>
<td>feather arrow-right svg icon</td>
<td> Svelte component </td>
<td> sets the right navitgation button icon <code> rightBtnIcon={SvelteComponent}</code> </td>
</tr>
<tr>
<td><code>leftBtnIcon</code></td>
<td>feather arrow-left svg icon</td>
<td> Svelte component </td>
<td> sets the left navitgation button icon <code> leftBtnIcon={SvelteComponent}</code> </td>
</tr>
<tr>
<td><code>hideNavBtns</code></td>
<td>false</td>
<td> boolean</td>
<td> hides the navigantion button <code> hideNavBtns={false}</code> </td>
</tr>
<tr>
<td><code>hideNavBtnsOnMobile</code></td>
<td>true</td>
<td> boolean</td>
<td> hides the navigation buttons on mobile devices </td>
</tr>
<tr>
<td><code>showTabsScroll</code></td>
<td>false</td>
<td> boolean</td>
<td> shows the scroll of the tabsn </td>
</tr>
</tr>
<tr>
<td><code>scrollSelectedToCenterOfView</code></td>
<td>false</td>
<td> boolean</td>
<td> scroll the selected tab to the center of the view.
I will add examples about it in the demos' page
</td>
</tr>
</tr>
<tr>
<td><code>scrollSelectedToEndOfView</code></td>
<td>false</td>
<td> boolean</td>
<td> scroll the selected tab to the end of the view. I will add examples about it in the demos' page </td>
</tr>
</table>
## Tab's API
<table>
<tr>
<td>Name</td>
<td>Default</td>
<td>Type</td>
<td>Description</td>
</tr>
</tr>
<tr>
<td><code>as</code></td>
<td>button</td>
<td> string</td>
<td> You can change the HTML element of the
<code>
Tab
</code> 's component by passing <code>as="a"</code>.
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 <code>asProps</code> prop
</td>
</tr>
</tr>
<tr>
<td><code>asProps</code></td>
<td>-</td>
<td> object</td>
<td> You can pass attributes to the element u passed with <code>as</code> prop.
For example if you want <code>as="a"</code> and u want to pass <code>href</code> as an attribute.
you can use <code>asProps</code> like so <code>asProps={{
href: '/#',
}}</code>.
<br />
<br />
> Note : this prop uses <code><svelte:element {...asProps} /></code> inisde so basically you can pass anything as prop to it!
</td>
</tr>
<tr>
<td><code>tabClassName</code></td>
<td><code>sts___tab sts___btn</code></td>
<td>string</td>
<td>you can pass a custom class to the <code>Tab</code> component</td>
</tr>
</table>
<br />
> 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](https://github.com/Mood-al/react-tabs-scrollable)