Andreas Reinhold / reiniandClaude Opus 5
b4f1e005de
Plan step 35: <x-pane>, a content region with M3's margins (16px below medium, 24px from it) drawn once however panes and layouts nest, a width cap, and an optional pane app bar - <x-app-bar> as a direct child of the pane with title, subtitle, actions, a back link or action, a leading slot, and the section navigation under it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
122 lines
6.2 KiB
PHP
122 lines
6.2 KiB
PHP
{{-- M3's window size classes, live: the one this window is in, what each one changes, and the
|
||
variants that key on them. The five cards light up through the variants themselves, so the
|
||
page proves the compiled breakpoints rather than describing them. --}}
|
||
|
||
<section id="layout" class="scroll-mt-24 space-y-6">
|
||
<h2 class="type-headline-md">Layout</h2>
|
||
|
||
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
||
Widths are M3's window size classes and nothing else: compact below 600px, then <code>medium:</code> 600,
|
||
<code>expanded:</code> 840, <code>large:</code> 1200 and <code>extra-large:</code> 1600, with
|
||
<code>max-medium:</code> and friends for "below". Tailwind's <code>sm:</code>…<code>2xl:</code> compile to
|
||
nothing. Scripts read the same numbers from <code>resources/js/breakpoints.js</code>.
|
||
</p>
|
||
|
||
<div
|
||
x-data="{ width: window.innerWidth }"
|
||
x-on:resize.window="width = window.innerWidth"
|
||
class="flex flex-wrap items-baseline gap-x-4 gap-y-1 rounded-corner-lg bg-surface-container-low p-6"
|
||
data-test="window-class"
|
||
>
|
||
<span class="type-label-lg text-on-surface-variant">This window</span>
|
||
<span class="type-emphasized-headline-sm tabular-nums" x-text="width + 'px'"></span>
|
||
<span class="type-title-md" x-text="width < 600 ? 'compact' : width < 840 ? 'medium' : width < 1200 ? 'expanded' : width < 1600 ? 'large' : 'extra-large'"></span>
|
||
</div>
|
||
|
||
<div class="grid gap-3 medium:grid-cols-5">
|
||
<div class="rounded-corner-md bg-surface-container p-4 max-medium:bg-primary-container max-medium:text-on-primary-container">
|
||
<p class="type-title-sm">Compact</p>
|
||
<p class="type-body-sm">below 600px</p>
|
||
</div>
|
||
<div class="rounded-corner-md bg-surface-container p-4 medium:max-expanded:bg-primary-container medium:max-expanded:text-on-primary-container">
|
||
<p class="type-title-sm">Medium</p>
|
||
<p class="type-body-sm">600–839px</p>
|
||
</div>
|
||
<div class="rounded-corner-md bg-surface-container p-4 expanded:max-large:bg-primary-container expanded:max-large:text-on-primary-container">
|
||
<p class="type-title-sm">Expanded</p>
|
||
<p class="type-body-sm">840–1199px</p>
|
||
</div>
|
||
<div class="rounded-corner-md bg-surface-container p-4 large:max-extra-large:bg-primary-container large:max-extra-large:text-on-primary-container">
|
||
<p class="type-title-sm">Large</p>
|
||
<p class="type-body-sm">1200–1599px</p>
|
||
</div>
|
||
<div class="rounded-corner-md bg-surface-container p-4 extra-large:bg-primary-container extra-large:text-on-primary-container">
|
||
<p class="type-title-sm">Extra-large</p>
|
||
<p class="type-body-sm">from 1600px</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto rounded-corner-lg border border-structure">
|
||
<table class="w-full type-body-md" data-table>
|
||
<thead>
|
||
<tr>
|
||
<th class="text-start">Class</th>
|
||
<th class="text-start">Navigation</th>
|
||
<th class="text-start">Panes</th>
|
||
<th class="text-start">Dialogs and sheets</th>
|
||
<th class="text-start">Margin</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Compact</td>
|
||
<td>Navigation bar; the rail opens as a modal</td>
|
||
<td>One</td>
|
||
<td>Full-screen dialogs, bottom sheets for choices, date pickers as dialogs</td>
|
||
<td>16px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Medium</td>
|
||
<td>Collapsed navigation rail</td>
|
||
<td>One</td>
|
||
<td>Basic dialogs, docked search and pickers</td>
|
||
<td>24px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Expanded</td>
|
||
<td>Navigation rail, collapsible; starts collapsed</td>
|
||
<td>Two: list-detail (<code><x-drawer pane></code>) or a 360px supporting pane</td>
|
||
<td>Basic dialogs, side sheets</td>
|
||
<td>24px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Large</td>
|
||
<td>Navigation rail, expanded by default</td>
|
||
<td>Two; a fixed pane is 412px</td>
|
||
<td>Basic dialogs, side sheets</td>
|
||
<td>24px</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Extra-large</td>
|
||
<td>Navigation rail, expanded</td>
|
||
<td>Two, a third as a side sheet</td>
|
||
<td>Basic dialogs, side sheets</td>
|
||
<td>24px</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
||
<code><x-app-shell></code> does all of this: resize this showcase and watch the bar, the rail and the
|
||
content margin (<code>--material-margin</code>) change at 600, 840 and 1200px. A visitor who has chosen a rail
|
||
width keeps it; until then the rail follows the class.
|
||
</p>
|
||
|
||
<x-livewire-material::stack gap="space200" data-test="layout-components">
|
||
<h3 class="md-type-title-lg">The layout components</h3>
|
||
|
||
<p class="md-type-body-md md-ink-variant">
|
||
M3 describes a layout as a scaffold of bars and rails around panes, and names three canonical layouts. These are
|
||
those words as components, each taking <code>as</code>, <code>hide-below</code> and <code>hide-from</code>, and
|
||
only the spacing tokens for a gap or padding:
|
||
</p>
|
||
|
||
<x-livewire-material::stack as="ul" gap="space100" class="md-type-body-md">
|
||
<li><code><x-pane></code> — a content region with M3's margins and its own app bar.</li>
|
||
<li><code><x-surface></code> — a tonal region: a surface role, padding, a corner and an outline.</li>
|
||
<li><code><x-stack></code>, <code><x-row></code> and <code><x-grid></code> — arrangement inside a pane.</li>
|
||
</x-livewire-material::stack>
|
||
</x-livewire-material::stack>
|
||
</section>
|