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
925 B
29 lines
925 B
<script lang="ts">
|
|
import * as Collapsible from '$soma/components/collapsible';
|
|
|
|
let open = $state(false);
|
|
</script>
|
|
|
|
<h1>Collapsible</h1>
|
|
<p>Trigger reveals content. Three providers (root + Trigger + Content) sharing one runtime.</p>
|
|
|
|
<section class="demo-section">
|
|
<Collapsible.Provider bind:open>
|
|
<Collapsible.Trigger>{open ? 'Hide' : 'Show'} details</Collapsible.Trigger>
|
|
<Collapsible.Content>
|
|
<p style="padding: 0.75rem; background: #f5f5f5; border-radius: 6px; margin-top: 0.5rem;">
|
|
This block is mounted while <code>open=true</code> and removed via the
|
|
<code>hidden</code> attr otherwise.
|
|
</p>
|
|
</Collapsible.Content>
|
|
</Collapsible.Provider>
|
|
</section>
|
|
|
|
<section class="demo-section">
|
|
<h2>Disabled</h2>
|
|
<Collapsible.Provider disabled>
|
|
<Collapsible.Trigger>Locked trigger</Collapsible.Trigger>
|
|
<Collapsible.Content>Never reachable.</Collapsible.Content>
|
|
</Collapsible.Provider>
|
|
</section>
|