[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
add tabs
+163
+6
apps/docs/src/lib/site-components/components_base.ts
+6
apps/docs/src/lib/site-components/components_base.ts
···
24
24
import type { Component } from 'svelte';
25
25
import CardPopover from '$lib/cards/base/CardPopover.svelte';
26
26
import CardSidebar from '$lib/cards/base/CardSidebar.svelte';
27
+
import CardTabs from '$lib/cards/base/CardTabs.svelte';
27
28
28
29
export type ComponentCard = {
29
30
component: Component;
···
154
155
component: CardSidebar,
155
156
label: 'Sidebar',
156
157
href: 'sidebar'
158
+
},
159
+
{
160
+
component: CardTabs,
161
+
label: 'Tabs',
162
+
href: 'tabs'
157
163
}
158
164
].sort((a, b) => a.label.localeCompare(b.label));
+1
packages/base/src/lib/components/index.ts
+1
packages/base/src/lib/components/index.ts
+14
apps/docs/src/lib/cards/base/CardTabs.svelte
+14
apps/docs/src/lib/cards/base/CardTabs.svelte
+56
packages/base/src/lib/components/tabs/TabItem.svelte
+56
packages/base/src/lib/components/tabs/TabItem.svelte
···
1
+
<script lang="ts">
2
+
import { cn } from '../../utils';
3
+
import { fade } from 'svelte/transition';
4
+
5
+
let {
6
+
href,
7
+
isActive,
8
+
onclick,
9
+
name
10
+
}: {
11
+
name: string;
12
+
href?: string;
13
+
isActive?: boolean;
14
+
onclick?: () => void;
15
+
} = $props();
16
+
</script>
17
+
18
+
{#snippet content()}
19
+
<div
20
+
class={cn(
21
+
'relative block cursor-pointer px-3 py-2.5 transition duration-200',
22
+
isActive
23
+
? 'text-accent-500 dark:text-accent-400'
24
+
: 'hover:text-accent-500 dark:hover:text-accent-400'
25
+
)}
26
+
>
27
+
{name}
28
+
{#if isActive}
29
+
<span
30
+
transition:fade
31
+
class="from-accent-500/0 via-accent-500/40 to-accent-500/0 dark:from-accent-400/0 dark:via-accent-400/40 dark:to-accent-400/0 absolute inset-x-1 bottom-px h-px bg-gradient-to-r"
32
+
></span>
33
+
{/if}
34
+
</div>
35
+
{/snippet}
36
+
37
+
<li>
38
+
{#if href}
39
+
<a {href}>
40
+
{@render content()}
41
+
</a>
42
+
{:else if onclick}
43
+
<button
44
+
type="button"
45
+
onclick={() => {
46
+
onclick?.();
47
+
}}
48
+
>
49
+
{@render content()}
50
+
</button>
51
+
{:else}
52
+
<div>
53
+
{@render content()}
54
+
</div>
55
+
{/if}
56
+
</li>
+29
packages/base/src/lib/components/tabs/Tabs.svelte
+29
packages/base/src/lib/components/tabs/Tabs.svelte
···
1
+
<script lang="ts">
2
+
import { cn } from '../../utils';
3
+
import TabItem from './TabItem.svelte';
4
+
5
+
let {
6
+
items,
7
+
active,
8
+
class: className
9
+
}: {
10
+
items: {
11
+
name: string;
12
+
href?: string;
13
+
onclick?: () => void;
14
+
}[];
15
+
active: string;
16
+
class?: string;
17
+
} = $props();
18
+
</script>
19
+
20
+
<ul class={cn('not-prose text-base-800 dark:text-base-200 flex flex-wrap px-3 text-sm font-medium', className)}>
21
+
{#each items as item}
22
+
<TabItem
23
+
href={item.href}
24
+
isActive={active == item.name}
25
+
name={item.name}
26
+
onclick={item.onclick}
27
+
/>
28
+
{/each}
29
+
</ul>
+2
packages/base/src/lib/components/tabs/index.ts
+2
packages/base/src/lib/components/tabs/index.ts
+8
apps/docs/src/routes/(main)/components/base/tabs/+page.svelte
+8
apps/docs/src/routes/(main)/components/base/tabs/+page.svelte
+14
apps/docs/src/routes/(main)/components/base/tabs/Example.svelte
+14
apps/docs/src/routes/(main)/components/base/tabs/Example.svelte
···
1
+
<script>
2
+
import { Tabs } from '@fuxui/base';
3
+
4
+
let active = $state('Tab 1');
5
+
</script>
6
+
7
+
<Tabs
8
+
items={[
9
+
{ name: 'Tab 1', onclick: () => (active = 'Tab 1') },
10
+
{ name: 'Tab 2', onclick: () => (active = 'Tab 2') },
11
+
{ name: 'Tab 3', onclick: () => (active = 'Tab 3') }
12
+
]}
13
+
active={active}
14
+
/>
+28
apps/docs/src/routes/(main)/components/base/tabs/Tabs.md
+28
apps/docs/src/routes/(main)/components/base/tabs/Tabs.md
···
1
+
<script>
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Tabs
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script>
15
+
import { Tabs } from '@fuxui/base';
16
+
17
+
let active = $state('Tab 1');
18
+
</script>
19
+
20
+
<!-- alternatively you can also supply a href for each tab -->
21
+
<Tabs
22
+
items={[
23
+
{ name: 'Tab 1', onclick: () => (active = 'Tab 1') },
24
+
{ name: 'Tab 2', onclick: () => (active = 'Tab 2') }
25
+
]}
26
+
active={active}
27
+
/>
28
+
```