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.
98 lines
2.4 KiB
98 lines
2.4 KiB
<script lang="ts">
|
|
import { Section, type SectionSize } from '$uix/eidos/components/section';
|
|
|
|
const sizes: SectionSize[] = ['sm', 'md', 'lg', 'xl'];
|
|
let size = $state<SectionSize>('lg');
|
|
</script>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<header>
|
|
<div data-uix-eyebrow>Layout · Section</div>
|
|
<h1 data-uix-page-title>Section</h1>
|
|
<p data-uix-page-lede>
|
|
Top-level page section with consistent block-axis padding scaled by
|
|
<code>size</code>.
|
|
</p>
|
|
</header>
|
|
|
|
<section>
|
|
<h2>Live example</h2>
|
|
<div style="display: flex; gap: 8px; margin-bottom: 12px">
|
|
{#each sizes as s (s)}
|
|
<label style="display: inline-flex; gap: 4px; align-items: center">
|
|
<input type="radio" name="size" value={s} bind:group={size} />
|
|
<span><code>{s}</code></span>
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
<Section
|
|
{size}
|
|
style="background: var(--color-surface-1); border: 1px dashed var(--color-border); border-radius: 8px"
|
|
>
|
|
<p style="margin: 0; text-align: center">
|
|
Section content (size: <code>{size}</code>).
|
|
</p>
|
|
</Section>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Padding scale</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Size</th>
|
|
<th>Block padding</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>sm</code></td><td>var(--space-8) = 32px</td></tr>
|
|
<tr><td><code>md</code></td><td>var(--space-12) = 48px</td></tr>
|
|
<tr><td><code>lg</code></td><td>var(--space-16) = 64px</td></tr>
|
|
<tr><td><code>xl</code></td><td>calc(var(--space-16) * 1.5) = 96px</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Props</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Prop</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>size</code></td>
|
|
<td>'lg'</td>
|
|
<td>sm · md · lg · xl</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>paddingY</code></td>
|
|
<td>—</td>
|
|
<td>override the size-keyed default</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3"><em>… plus every <code>BoxProps</code> prop</em></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Reference</h2>
|
|
<ul>
|
|
<li>
|
|
<strong>radix-themes Section</strong> — same intent (size-keyed block padding
|
|
for vertical rhythm).
|
|
</li>
|
|
<li>
|
|
<strong>HTML <code><section></code></strong> — Section is a `<div>`
|
|
in batch 1; wrap with a real <code><section></code> when you need landmark semantics.
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|