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.
93 lines
2.2 KiB
93 lines
2.2 KiB
<script lang="ts">
|
|
import { Stack } from '$uix/eidos/components/stack';
|
|
import { Box } from '$uix/eidos/components/box';
|
|
|
|
const cellStyle = 'background: var(--color-surface-2); border-radius: 4px; padding: 8px 12px';
|
|
</script>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<header>
|
|
<div data-uix-eyebrow>Layout · Stack</div>
|
|
<h1 data-uix-page-title>Stack</h1>
|
|
<p data-uix-page-lede>
|
|
Vertical (default) or horizontal stack. Thin alias over Flex with
|
|
<code>direction='column'</code>.
|
|
</p>
|
|
</header>
|
|
|
|
<section>
|
|
<h2>Vertical (default)</h2>
|
|
<Stack
|
|
gap={2}
|
|
padding={4}
|
|
style="background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 8px"
|
|
>
|
|
<Box style={cellStyle}>Row 1</Box>
|
|
<Box style={cellStyle}>Row 2</Box>
|
|
<Box style={cellStyle}>Row 3</Box>
|
|
</Stack>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Horizontal</h2>
|
|
<Stack
|
|
direction="row"
|
|
gap={2}
|
|
padding={4}
|
|
align="center"
|
|
style="background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 8px"
|
|
>
|
|
<Box style={cellStyle}>A</Box>
|
|
<Box style={cellStyle}>B</Box>
|
|
<Box style={cellStyle}>C</Box>
|
|
</Stack>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Props</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Prop</th>
|
|
<th>Default</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>direction</code></td>
|
|
<td>'column'</td>
|
|
<td>row · row-reverse · column · column-reverse</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>gap</code></td>
|
|
<td>—</td>
|
|
<td>maps to <code>var(--space-N)</code> when numeric</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>align</code> / <code>justify</code></td>
|
|
<td>—</td>
|
|
<td>inherited from Flex</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3"><em>… plus FlexProps minus <code>wrap</code>, <code>inline</code>, <code>rowGap</code>, <code>columnGap</code></em></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Reference</h2>
|
|
<ul>
|
|
<li>
|
|
<strong>chakra-ui Stack / VStack / HStack</strong> — same intent; we collapse
|
|
the three into one component with a <code>direction</code> prop.
|
|
</li>
|
|
<li>
|
|
<strong>radix-themes Flex direction='column'</strong> — equivalent shape; Stack
|
|
is the named shortcut.
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|