Created
December 20, 2022 00:57
-
-
Save Mood-al/e05a12769b3cb92092eea51f07ac71e9 to your computer and use it in GitHub Desktop.
svelte-tabs-scrollable usage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
// @ts-nocheck | |
import Tabs from '$lib/Tabs.svelte'; | |
import Tab from '$lib/Tab.svelte'; | |
let isRTL = false; | |
const onClick = () => { | |
isRTL = !isRTL; | |
}; | |
let activeTab = 13; | |
const onTabClick = (e, index) => { | |
console.log(e, index); | |
}; | |
$: { | |
if (typeof window !== 'undefined') { | |
const body = window.document.body; | |
isRTL ? (body.dir = 'rtl') : (body.dir = 'ltr'); | |
} | |
} | |
let goToEnd; | |
let goToStart; | |
</script> | |
<Tabs {activeTab} {onTabClick} bind:goToEnd bind:goToStart {isRTL}> | |
{#each [...Array(33).keys()] as item} | |
<Tab> | |
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> | |
<h3> | |
I'm working now on the demo and on adding the API to the component. if you want to see demos on | |
react-tabs-scrollable please visit this <a nopo href="https://react-tabs-scrollable.vercel.app/" | |
><h2>Website</h2></a | |
> until i can finish the svelte one, they both have the same features and functionality. | |
</h3> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment