You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
1.0 KiB
29 lines
1.0 KiB
<script lang="ts">
|
|
const demos = [
|
|
{ slug: 'toggle', label: 'Toggle', desc: 'Single button toggle' },
|
|
{ slug: 'switch', label: 'Switch', desc: 'On/off control with thumb' },
|
|
{ slug: 'collapsible', label: 'Collapsible', desc: 'Trigger reveals content' },
|
|
{ slug: 'avatar', label: 'Avatar', desc: 'Image with fallback' },
|
|
{ slug: 'dialog', label: 'Dialog', desc: 'Modal overlay with focus trap' },
|
|
{ slug: 'drawer', label: 'Drawer', desc: 'Side panel with snap points' },
|
|
{ slug: 'popover', label: 'Popover', desc: 'Floating panel anchored to trigger' },
|
|
{ slug: 'toast', label: 'Toast', desc: 'Auto-dismissing notification' }
|
|
];
|
|
</script>
|
|
|
|
<h1>UIX Demos</h1>
|
|
<p>
|
|
Demos of the soma components migrated to <code>runtime-direct</code>
|
|
(no <code>Provider<T></code> inheritance). Each one is wired through
|
|
the morfo runtime and styled by eidos.
|
|
</p>
|
|
|
|
<div class="demo-grid">
|
|
{#each demos as demo}
|
|
<a href="/{demo.slug}">
|
|
<strong>{demo.label}</strong>
|
|
<small>{demo.desc}</small>
|
|
</a>
|
|
{/each}
|
|
</div>
|