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.
95 lines
2.3 KiB
95 lines
2.3 KiB
<script lang="ts">
|
|
import { Group } from '$uix/eidos/components/group';
|
|
|
|
const btnStyle =
|
|
'background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 6px; padding: 6px 12px; font: inherit';
|
|
</script>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<header>
|
|
<div data-uix-eyebrow>Layout · Group</div>
|
|
<h1 data-uix-page-title>Group</h1>
|
|
<p data-uix-page-lede>
|
|
Inline cluster of children. Supports <code>grow</code> (equal-width children)
|
|
and <code>attached</code> (edge-merged children).
|
|
</p>
|
|
</header>
|
|
|
|
<section>
|
|
<h2>Default</h2>
|
|
<Group gap={2}>
|
|
<button type="button" style={btnStyle}>One</button>
|
|
<button type="button" style={btnStyle}>Two</button>
|
|
<button type="button" style={btnStyle}>Three</button>
|
|
</Group>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Attached (segmented control)</h2>
|
|
<Group attached>
|
|
<button type="button" style={btnStyle}>Day</button>
|
|
<button type="button" style={btnStyle}>Week</button>
|
|
<button type="button" style={btnStyle}>Month</button>
|
|
</Group>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Grow (equal widths)</h2>
|
|
<Group grow gap={2} style="width: 320px">
|
|
<button type="button" style={btnStyle}>Cancel</button>
|
|
<button type="button" style={btnStyle}>Save</button>
|
|
</Group>
|
|
</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>'row'</td>
|
|
<td>row · column</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>grow</code></td>
|
|
<td>false</td>
|
|
<td>children get <code>flex: 1 1 0</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>attached</code></td>
|
|
<td>false</td>
|
|
<td>collapses inner radii + overlaps 1px to merge borders</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>gap</code></td>
|
|
<td>0 if <code>attached</code></td>
|
|
<td>defaults to <code>0</code> when <code>attached</code> is on</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3"><em>… plus FlexProps minus <code>wrap</code></em></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Reference</h2>
|
|
<ul>
|
|
<li>
|
|
<strong>mantine Group</strong> — same name and intent.
|
|
</li>
|
|
<li>
|
|
<strong>chakra-ui ButtonGroup</strong> — origin of the
|
|
<code>attached</code> behavior, generalized here.
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|