Andreas Reinhold / reiniandClaude Opus 5
7d14f2bd03
M3 asks the rail to animate its FAB into an extended FAB as it expands; the documented pattern was two FABs swapped by `display`, so the collapsed one appeared at once while the rail's width was still springing. The header now takes one <x-fab label icon> whose label springs open and shut on the rail's own spring — and names it at both widths, where the collapsed FAB had needed a tooltip to have a name at all. M3 also lists two container treatments as optional that the library had neither of: `divider` draws the vertical divider on the page's edge, which is its own answer to a page scrolling under a fixed rail, and `fill="false"` drops the container colour. Neither reaches a rail open over a scrim. And a `collapsible` rail, whose width is the visitor's choice rather than the window's, is held to the collapsed 96px below `medium`, where M3 asks for a navigation bar instead. Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-22, N-23, N-24). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
114 lines
7.4 KiB
PHP
114 lines
7.4 KiB
PHP
@php
|
|
$examples = [
|
|
'Navigation bar' => <<<'BLADE'
|
|
<div class="w-full space-y-6">
|
|
<div class="max-w-[25rem] space-y-2">
|
|
<p class="type-label-lg text-on-surface-variant">Compact: icon over label</p>
|
|
<div class="flex h-56 flex-col overflow-hidden rounded-corner-lg border border-outline-variant bg-surface">
|
|
<div class="flex-1 p-4 type-body-md text-on-surface-variant">The page</div>
|
|
<x-navigation-bar>
|
|
<x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
|
|
<x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
|
|
<x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
|
|
<x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate :badge="true" badge-label="Needs attention" />
|
|
</x-navigation-bar>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-[50rem] space-y-2">
|
|
<p class="type-label-lg text-on-surface-variant">From 600px wide: icon beside label, centred</p>
|
|
<div class="overflow-x-auto rounded-corner-lg border border-outline-variant">
|
|
<div class="flex h-56 min-w-[37.5rem] flex-col bg-surface">
|
|
<div class="flex-1 p-4 type-body-md text-on-surface-variant">The page</div>
|
|
<x-navigation-bar>
|
|
<x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
|
|
<x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
|
|
<x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
|
|
<x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate />
|
|
</x-navigation-bar>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Collapsed and expanded rails' => <<<'BLADE'
|
|
<div class="flex w-full flex-wrap items-start gap-6">
|
|
<div class="flex h-[36rem] overflow-hidden rounded-corner-lg border border-outline-variant">
|
|
<x-navigation-rail mode="collapsed" label="Collapsed example" divider>
|
|
<x-slot:header>
|
|
<x-fab label="Compose" icon="edit" />
|
|
</x-slot:header>
|
|
|
|
<x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
|
|
<x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
|
|
<x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
|
|
<x-navigation-rail-section label="Labels">
|
|
<x-navigation-rail-item label="Travel" icon="flight" link="#navigation" no-wire-navigate :badge="true" badge-label="New" />
|
|
<x-navigation-rail-item label="Receipts" icon="receipt_long" link="#navigation" no-wire-navigate />
|
|
</x-navigation-rail-section>
|
|
|
|
<x-slot:footer>
|
|
<x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
|
|
</x-slot:footer>
|
|
</x-navigation-rail>
|
|
</div>
|
|
|
|
<div class="flex h-[36rem] overflow-hidden rounded-corner-lg border border-outline-variant">
|
|
<x-navigation-rail mode="expanded" label="Expanded example">
|
|
<x-slot:header>
|
|
<x-fab label="Compose" icon="edit" />
|
|
</x-slot:header>
|
|
|
|
<x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
|
|
<x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
|
|
<x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
|
|
<x-navigation-rail-section label="Labels">
|
|
<x-navigation-rail-item label="Travel" icon="flight" link="#navigation" no-wire-navigate :badge="true" badge-label="New" />
|
|
<x-navigation-rail-item label="Receipts" icon="receipt_long" link="#navigation" no-wire-navigate />
|
|
</x-navigation-rail-section>
|
|
|
|
<x-slot:footer>
|
|
<x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
|
|
</x-slot:footer>
|
|
</x-navigation-rail>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Collapsible rail' => <<<'BLADE'
|
|
<div class="flex h-[30rem] w-full overflow-hidden rounded-corner-lg border border-outline-variant">
|
|
<x-navigation-rail label="Collapsible example">
|
|
<x-slot:brand>
|
|
<span class="block truncate type-title-lg">Mail</span>
|
|
</x-slot:brand>
|
|
|
|
<x-slot:header>
|
|
<x-fab label="Compose" icon="edit" />
|
|
</x-slot:header>
|
|
|
|
<x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
|
|
<x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
|
|
<x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
|
|
</x-navigation-rail>
|
|
|
|
<div class="min-w-0 flex-1 bg-surface-container-low p-6 type-body-md text-on-surface-variant">
|
|
The menu button collapses and expands the rail, and the FAB morphs into an extended FAB with it. The choice is remembered and applied before the next page paints — every collapsible rail follows it, <code><x-app-shell></code>'s from <code>expanded</code> (840px) too.
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="navigation" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Navigation</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-navigation-bar></code> and <code><x-navigation-bar-item></code>, <code><x-navigation-rail></code>, <code><x-navigation-rail-item></code> and <code><x-navigation-rail-section></code>,
|
|
and <code><x-app-shell></code>, which puts them together on M3's window size classes: a bar below <code>medium</code> (600px), a collapsed rail that opens as a modal through <code>medium</code>, a standard rail from <code>expanded</code> (840px) and an expanded one from <code>large</code> (1200px).
|
|
<a href="{{ route('livewire-material.shell') }}" class="link text-primary">Open the app shell</a> and change the window's width.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|