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.
134 lines
3.5 KiB
134 lines
3.5 KiB
<script lang="ts">
|
|
import { Box } from '$uix/eidos/components/box';
|
|
</script>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<header>
|
|
<div data-uix-eyebrow>Layout · Box</div>
|
|
<h1 data-uix-page-title>Box</h1>
|
|
<p data-uix-page-lede>
|
|
Universal box-model utility. Every prop maps to a CSS custom property; unset
|
|
props fall through to the normal cascade.
|
|
</p>
|
|
</header>
|
|
|
|
<section>
|
|
<h2>Live example</h2>
|
|
<Box
|
|
padding={4}
|
|
maxWidth={480}
|
|
display="flex"
|
|
gap={3}
|
|
style="background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 8px"
|
|
>
|
|
<Box padding={2} style="background: var(--color-surface-2); border-radius: 4px">
|
|
Cell A
|
|
</Box>
|
|
<Box padding={2} style="background: var(--color-surface-2); border-radius: 4px">
|
|
Cell B
|
|
</Box>
|
|
<Box padding={2} style="background: var(--color-surface-2); border-radius: 4px">
|
|
Cell C
|
|
</Box>
|
|
</Box>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Props</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Prop</th>
|
|
<th>Type</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>display</code></td>
|
|
<td>LayoutDisplay</td>
|
|
<td>block · inline · flex · grid · …</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>width</code> / <code>minWidth</code> / <code>maxWidth</code></td>
|
|
<td>number | string</td>
|
|
<td>number → px, string passes through</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>height</code> / <code>minHeight</code> / <code>maxHeight</code></td>
|
|
<td>number | string</td>
|
|
<td>same as above</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>padding</code> / <code>paddingX</code> / <code>paddingY</code></td>
|
|
<td>number | string</td>
|
|
<td>number → <code>var(--space-N)</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>paddingTop</code> / <code>paddingRight</code> /
|
|
<code>paddingBottom</code> / <code>paddingLeft</code>
|
|
</td>
|
|
<td>number | string</td>
|
|
<td>per-side overrides</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>margin</code> / <code>marginX</code> / <code>marginY</code> / sides</td>
|
|
<td>number | string</td>
|
|
<td>same mapping as padding</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>gap</code></td>
|
|
<td>number | string</td>
|
|
<td>for flex/grid containers</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>position</code> / <code>top</code> / <code>right</code> /
|
|
<code>bottom</code> / <code>left</code>
|
|
</td>
|
|
<td>various</td>
|
|
<td>position + insets</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>inset</code> / <code>insetX</code> / <code>insetY</code></td>
|
|
<td>number | string</td>
|
|
<td>shorthand insets</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>overflow</code> / <code>overflowX</code> / <code>overflowY</code></td>
|
|
<td>LayoutOverflow</td>
|
|
<td>visible · hidden · clip · scroll · auto</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<code>flex</code> / <code>grow</code> / <code>shrink</code> / <code>basis</code> /
|
|
<code>order</code> / <code>alignSelf</code> / <code>justifySelf</code>
|
|
</td>
|
|
<td>various</td>
|
|
<td>item-side flex/grid props</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>style</code></td>
|
|
<td>string</td>
|
|
<td>extra inline style; merged after Box vars</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Reference</h2>
|
|
<ul>
|
|
<li>
|
|
<strong>radix-themes Box</strong> — same idea: token-driven shorthand for the
|
|
box model; we mirror the responsive prop shape.
|
|
</li>
|
|
<li>
|
|
<strong>chakra-ui Box</strong> — origin of the per-side / shorthand prop split
|
|
(<code>paddingX</code>, <code>paddingY</code>, …).
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|