Andreas Reinhold / reiniandClaude Opus 5
92d3d761f3
<x-stack> stretches its children across by default and <x-form> is a one-track grid, so a button written directly in either drew as a full-width pill. M3 keeps a button's width "dynamic to fit label" and says not to "stretch buttons into long flat shapes on large windows". A button there now sits at the start edge at its own width; a stack aligned start, centre or end is untouched, and an application's own width still wins (a cap on the button itself was rejected for exactly that: it would have limited an app's inline-size, which CascadeTest guards). Chromium test in both directions, failing without the rules. Decided with the user (plan step 46). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
35 lines
1.4 KiB
PHP
35 lines
1.4 KiB
PHP
{{-- Children one under another, inside a pane.
|
|
|
|
<x-stack gap="space200">…</x-stack>
|
|
|
|
`gap` is a spacing token's name, `space25` … `space900` (docs/reference/m3/styles-supplement.md
|
|
§ Spacing), and none when left out or unknown. `align` places the children across the stack:
|
|
`stretch` (the default), `start`, `center` or `end`. A button keeps its label's width even
|
|
when the rest stretch, as M3 asks.
|
|
|
|
M3's layout has no arrangement component inside a pane — its "column" is a grid column — so
|
|
this is the package's neutral one, beside `<x-row>` and `<x-grid>`. It takes `as`,
|
|
`hide-below` and `hide-from` like every layout component, and the caller's `class` and
|
|
`style` land on it untouched. Drawn by resources/css/layout/stack.css. --}}
|
|
|
|
@props([
|
|
'as' => null,
|
|
'gap' => null,
|
|
'align' => null,
|
|
'hideBelow' => null,
|
|
'hideFrom' => null,
|
|
])
|
|
|
|
@php
|
|
$layout = \NoNameWeb\LivewireMaterial\Support\Layout::class;
|
|
$element = $layout::element($as);
|
|
|
|
$attributes = $attributes->merge(array_filter([
|
|
'data-md-stack' => true,
|
|
'data-md-gap' => $layout::spacing($gap),
|
|
'data-md-align' => $layout::choice($align, ['stretch', 'start', 'center', 'end']),
|
|
] + $layout::visibility($hideBelow, $hideFrom), fn ($value): bool => $value !== null));
|
|
@endphp
|
|
|
|
<{{ $element }} {{ $attributes }}>{{ $slot }}</{{ $element }}>
|