Basic Example
Interactive tabs with content
panels
await import('/components/navigation/tabs.js');
const { signal, tags, $ } = Lightview;
const { div, Tabs } = tags;
const activeTab = signal(0);
const tabLabels = ['Profile', 'Settings', 'Messages'];
const demo = div({ style: 'display: flex; flex-direction: column; gap: 1rem;' },
Tabs({ variant: 'bordered' },
...tabLabels.map((label, i) =>
Tabs.Tab({
active: () => activeTab.value === i,
onclick: () => { activeTab.value = i; }
}, label)
)
),
div({ style: 'padding: 1.5rem; border: 1px solid oklch(var(--b3)); border-radius: var(--rounded-box, 1rem); background-color: oklch(var(--b1));' },
() => `Content for: ${tabLabels[activeTab.value]}`
)
);
$('#example').content(demo);
await import('/components/navigation/tabs.js');
const { signal, $, tags } = Lightview;
const { Tabs, div } = tags;
const activeTab = signal(0);
const tabLabels = ['Profile', 'Settings', 'Messages'];
const demo = {
tag: div,
attributes: { style: 'display: flex; flex-direction: column; gap: 1rem;' },
children: [
{
tag: Tabs,
attributes: { variant: 'bordered' },
children: tabLabels.map((label, i) => ({
tag: Tabs.Tab,
attributes: {
active: () => activeTab.value === i,
onclick: () => { activeTab.value = i; }
},
children: [label]
}))
},
{
tag: div,
attributes: { style: 'padding: 1.5rem; border: 1px solid oklch(var(--b3)); border-radius: var(--rounded-box, 1rem); background-color: oklch(var(--b1));' },
children: [() => `Content for: ${tabLabels[activeTab.value]}`]
}
]
};
$('#example').content(demo);
await import('/components/navigation/tabs.js');
const { signal, $ } = Lightview;
const activeTab = signal(0);
const tabLabels = ['Profile', 'Settings', 'Messages'];
const demo = {
div: {
style: 'display: flex; flex-direction: column; gap: 1rem;',
children: [
{
Tabs: {
variant: 'bordered',
children: tabLabels.map((label, i) => ({
'Tabs.Tab': {
active: () => activeTab.value === i,
onclick: () => { activeTab.value = i; },
children: [label]
}
}))
}
},
{
div: {
style: 'padding: 1.5rem; border: 1px solid oklch(var(--b3)); border-radius: var(--rounded-box, 1rem); background-color: oklch(var(--b1));',
children: [() => `Content for: ${tabLabels[activeTab.value]}`]
}
}
]
}
};
$('#example').content(demo);
<!-- Import the component (registers lv-tabs, lv-tab) -->
<script type="module" src="/components/navigation/tabs.js"></script>
<script>
globalThis.activeTab = Lightview.signal(0);
</script>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<lv-tabs variant="bordered">
<lv-tab active="${activeTab.value === 0}" onclick="activeTab.value = 0">Profile</lv-tab>
<lv-tab active="${activeTab.value === 1}" onclick="activeTab.value = 1">Settings</lv-tab>
<lv-tab active="${activeTab.value === 2}" onclick="activeTab.value = 2">Messages</lv-tab>
</lv-tabs>
<div style="padding: 1.5rem; border: 1px solid oklch(var(--b3)); border-radius: var(--rounded-box, 1rem); background-color: oklch(var(--b1));">
Content for: ${['Profile', 'Settings', 'Messages'][activeTab.value]}
</div>
</div>