22 KiB
22 KiB
Tabs
Tabs component for organizing content into separate panels with tab navigation.
Tag
Tabs
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items |
Array<TabItem> | Signal<Array> |
[] |
Array of tab items |
class |
string |
'' |
Additional CSS classes (DaisyUI + Tailwind) |
TabItem Structure
| Property | Type | Description |
|---|---|---|
label |
string | VNode |
Tab button label |
content |
VNode | function |
Content to display when tab is active |
active |
boolean | Signal<boolean> |
Whether this tab is active (only one per group) |
disabled |
boolean |
Whether tab is disabled |
tip |
string |
Tooltip text for the tab |
onclick |
function |
Click handler (optional, overrides default) |
Live Examples
Basic Tabs
Live Demo
const BasicDemo = () => {
const activeTab = $('tab1');
return Tabs({
items: [
{
label: 'Tab 1',
active: () => activeTab() === 'tab1',
onclick: () => activeTab('tab1'),
content: Div({ class: 'p-4' }, 'Content for Tab 1')
},
{
label: 'Tab 2',
active: () => activeTab() === 'tab2',
onclick: () => activeTab('tab2'),
content: Div({ class: 'p-4' }, 'Content for Tab 2')
},
{
label: 'Tab 3',
active: () => activeTab() === 'tab3',
onclick: () => activeTab('tab3'),
content: Div({ class: 'p-4' }, 'Content for Tab 3')
}
]
});
};
Mount(BasicDemo, '#demo-basic');
With Icons
Live Demo
const IconsDemo = () => {
const activeTab = $('home');
return Tabs({
items: [
{
label: Span({ class: 'flex items-center gap-2' }, ['🏠', 'Home']),
active: () => activeTab() === 'home',
onclick: () => activeTab('home'),
content: Div({ class: 'p-4' }, 'Welcome to the Home tab!')
},
{
label: Span({ class: 'flex items-center gap-2' }, ['⭐', 'Favorites']),
active: () => activeTab() === 'favorites',
onclick: () => activeTab('favorites'),
content: Div({ class: 'p-4' }, 'Your favorite items appear here.')
},
{
label: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Settings']),
active: () => activeTab() === 'settings',
onclick: () => activeTab('settings'),
content: Div({ class: 'p-4' }, 'Configure your preferences.')
}
]
});
};
Mount(IconsDemo, '#demo-icons');
With Tooltips
Live Demo
const TooltipsDemo = () => {
const activeTab = $('profile');
return Tabs({
items: [
{
label: 'Profile',
tip: 'View your profile information',
active: () => activeTab() === 'profile',
onclick: () => activeTab('profile'),
content: Div({ class: 'p-4' }, 'Profile information here.')
},
{
label: 'Settings',
tip: 'Adjust your preferences',
active: () => activeTab() === 'settings',
onclick: () => activeTab('settings'),
content: Div({ class: 'p-4' }, 'Settings configuration.')
},
{
label: 'Notifications',
tip: 'Manage notifications',
active: () => activeTab() === 'notifications',
onclick: () => activeTab('notifications'),
content: Div({ class: 'p-4' }, 'Notification settings.')
}
]
});
};
Mount(TooltipsDemo, '#demo-tooltips');
Disabled Tab
Live Demo
const DisabledDemo = () => {
const activeTab = $('basic');
return Tabs({
items: [
{
label: 'Basic',
active: () => activeTab() === 'basic',
onclick: () => activeTab('basic'),
content: Div({ class: 'p-4' }, 'Basic features available.')
},
{
label: 'Premium',
disabled: true,
tip: 'Upgrade to access',
content: Div({ class: 'p-4' }, 'Premium content (locked)')
},
{
label: 'Pro',
disabled: true,
tip: 'Coming soon',
content: Div({ class: 'p-4' }, 'Pro features (coming soon)')
}
]
});
};
Mount(DisabledDemo, '#demo-disabled');
Reactive Content
Live Demo
const ReactiveDemo = () => {
const activeTab = $('counter');
const count = $(0);
return Tabs({
items: [
{
label: 'Counter',
active: () => activeTab() === 'counter',
onclick: () => activeTab('counter'),
content: Div({ class: 'p-4 text-center' }, [
Div({ class: 'text-4xl font-bold mb-4' }, () => count()),
Button({
class: 'btn btn-primary',
onclick: () => count(count() + 1)
}, 'Increment')
])
},
{
label: 'Timer',
active: () => activeTab() === 'timer',
onclick: () => activeTab('timer'),
content: Div({ class: 'p-4' }, () => `Current time: ${new Date().toLocaleTimeString()}`)
},
{
label: 'Status',
active: () => activeTab() === 'status',
onclick: () => activeTab('status'),
content: Div({ class: 'p-4' }, () => `Counter value: ${count()}, Last updated: ${new Date().toLocaleTimeString()}`)
}
]
});
};
Mount(ReactiveDemo, '#demo-reactive');
Form Tabs
Live Demo
const FormTabs = () => {
const activeTab = $('personal');
const formData = $({
name: '',
email: '',
address: '',
city: '',
notifications: true,
newsletter: false
});
const updateField = (field, value) => {
formData({ ...formData(), [field]: value });
};
const handleSubmit = () => {
Toast('Form submitted!', 'alert-success', 2000);
console.log(formData());
};
return Div({ class: 'flex flex-col gap-4' }, [
Tabs({
items: [
{
label: 'Personal Info',
active: () => activeTab() === 'personal',
onclick: () => activeTab('personal'),
content: Div({ class: 'p-4 space-y-4' }, [
Input({
label: 'Name',
value: () => formData().name,
placeholder: 'Enter your name',
oninput: (e) => updateField('name', e.target.value)
}),
Input({
label: 'Email',
type: 'email',
value: () => formData().email,
placeholder: 'email@example.com',
oninput: (e) => updateField('email', e.target.value)
})
])
},
{
label: 'Address',
active: () => activeTab() === 'address',
onclick: () => activeTab('address'),
content: Div({ class: 'p-4 space-y-4' }, [
Input({
label: 'Address',
value: () => formData().address,
placeholder: 'Street address',
oninput: (e) => updateField('address', e.target.value)
}),
Input({
label: 'City',
value: () => formData().city,
placeholder: 'City',
oninput: (e) => updateField('city', e.target.value)
})
])
},
{
label: 'Preferences',
active: () => activeTab() === 'prefs',
onclick: () => activeTab('prefs'),
content: Div({ class: 'p-4 space-y-4' }, [
Checkbox({
label: 'Email notifications',
value: () => formData().notifications,
onclick: () => updateField('notifications', !formData().notifications)
}),
Checkbox({
label: 'Newsletter subscription',
value: () => formData().newsletter,
onclick: () => updateField('newsletter', !formData().newsletter)
})
])
}
]
}),
Div({ class: 'flex justify-end mt-4' }, [
Button({
class: 'btn btn-primary',
onclick: handleSubmit
}, 'Submit')
])
]);
};
Mount(FormTabs, '#demo-form');
All Variants
Live Demo
const VariantsDemo = () => {
const items = [
{ label: 'Tab 1', content: 'Content 1' },
{ label: 'Tab 2', content: 'Content 2' },
{ label: 'Tab 3', content: 'Content 3' }
].map((tab, idx) => ({
...tab,
active: () => idx === 0,
content: Div({ class: 'p-4' }, tab.content)
}));
return Div({ class: 'flex flex-col gap-6' }, [
Div({ class: 'text-sm font-bold' }, 'Default Tabs'),
Tabs({ items }),
Div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'),
Tabs({ items, class: 'tabs-box' }),
Div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'),
Tabs({ items, class: 'tabs-lifted' })
]);
};
Mount(VariantsDemo, '#demo-variants');