Andreas Reinhold / reiniandClaude Opus 5
b677e60876
Plan step 35: <x-stack gap align>, the first of M3's layout components, with what they all share - src/Support/Layout.php reading the props into data-md-* attributes, the spacing-token gap and padding rules, the hide-below/hide-from rules in material.visibility, the stylesheet checks for resources/css/layout, the browser test file and the skill's Layout group. The Workbench puts the material layers above Tailwind's preflight, which would otherwise zero every layout padding and margin. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
34 lines
1.3 KiB
PHP
34 lines
1.3 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`.
|
|
|
|
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 }}>
|