noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add the row layout component

Browse Source 
Plan step 35: <x-row gap align justify wrap stack-below>, children side
by side in a pane and stacked under one another below an M3 breakpoint,
in the inline direction so a right-to-left document mirrors it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 14:50:39 +02:00
co-authored by Claude Opus 5
parent b677e60876
commit 8de053f15c
6 changed files with 247 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/boost/skills/livewire-material-development/SKILL.md
+8
View File
@@ -787,6 +787,14 @@ M3's margin — 16px on a compact window, 24px from `medium` — is drawn once:
Children one under another inside a pane: `<x-stack gap="space200">…</x-stack>`. `align` across it: `stretch` (default), `start`, `center`, `end`.
#### `<x-row>`
Children side by side inside a pane: `<x-row gap="space100" justify="between" stack-below="medium">…</x-row>`.
- `align` across it: `center` (default), `start`, `end`, `stretch`, `baseline`. `justify` along it: `start` (default), `center`, `end`, `between`. `wrap` lets them wrap.
- `stack-below`: `medium`, `expanded`, `large` or `extra-large` — below that breakpoint the row is a column, its children stretched unless `align` was given.
- It runs in the inline direction, so it mirrors in a right-to-left document by itself.
### `<x-app-shell>`
The adaptive app shell, a whole layout's body: one navigation per M3 window size class, the page as `<main id="content" wire:transition.navigate>` behind a skip link, and the snackbar host (do not add another `<x-toast />`). It needs `<x-theme-script />` in `<head>`.