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.
83 lines
2.0 KiB
83 lines
2.0 KiB
<script lang="ts">
|
|
import { Container, type ContainerSize } from '$uix/eidos/components/container';
|
|
|
|
const sizes: ContainerSize[] = ['sm', 'md', 'lg', 'xl', 'xxl', 'full'];
|
|
let size = $state<ContainerSize>('lg');
|
|
</script>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<header>
|
|
<div data-uix-eyebrow>Layout · Container</div>
|
|
<h1 data-uix-page-title>Container</h1>
|
|
<p data-uix-page-lede>
|
|
Max-width content container. Caps content at the
|
|
<code>--container-width-{'{size}'}</code> token and centers it.
|
|
</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>
|
|
<Container
|
|
{size}
|
|
padding={4}
|
|
style="background: var(--color-surface-1); border: 1px dashed var(--color-border); border-radius: 8px"
|
|
>
|
|
<p style="margin: 0">Container content (size: <code>{size}</code>).</p>
|
|
</Container>
|
|
</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>'xl'</td>
|
|
<td>sm · md · lg · xl · xxl · full</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>align</code></td>
|
|
<td>'center'</td>
|
|
<td>left · center · right</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>paddingX</code></td>
|
|
<td><code>var(--container-padding-inline)</code></td>
|
|
<td>override per-instance</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 Container</strong> — same surface; sizes map to fixed
|
|
pixel widths via tokens.
|
|
</li>
|
|
<li>
|
|
<strong>chakra-ui Container</strong> — origin of the centered max-width pattern.
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|