Andreas Reinhold / reiniandClaude Opus 5
0013e0154d
Plan step 35: <x-app-shell> becomes <x-scaffold>, M3's and Compose's name for the structure of bars, rails and panes, with no alias; every package view, the showcase, the tests, the skills, README and UPGRADE follow. Its markup and Tailwind classes stay for the navigation rewrite. The new fab slot places the FAB as Compose's Scaffold does - bottom-end, 16px from the edges below medium and 24px from it, clear of the navigation bar and of a snackbar on screen (resources/css/layout/scaffold.css) - and the content region tells a pane inside that the margin is already drawn. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
175 lines
12 KiB
PHP
175 lines
12 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 class="max-w-[25rem] space-y-2">
|
|
<p class="type-label-lg text-on-surface-variant">Hide on scroll: scroll the page down, then up</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 bar follows the window's scrolling, not this box's: scroll the showcase down and it leaves, scroll up and it springs back. It stays while a snackbar or a bottom sheet is on screen.</div>
|
|
<x-navigation-bar hide-on-scroll>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-[50rem] space-y-2">
|
|
<p class="type-label-lg text-on-surface-variant">Tall (80px): icon over label whatever the width</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 tall>
|
|
<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, narrow (centred) 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="collapsed" width="narrow" align="center" label="Narrow 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-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-scaffold></code>'s from <code>expanded</code> (840px) too.
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Rail that hides when collapsed' => <<<'BLADE'
|
|
<div class="flex h-[30rem] w-full overflow-hidden rounded-corner-lg border border-outline-variant">
|
|
<x-navigation-rail label="Immersive example" hide-when-collapsed>
|
|
<x-slot:brand>
|
|
<span class="block truncate type-title-lg">Studio</span>
|
|
</x-slot:brand>
|
|
|
|
<x-navigation-rail-item label="Canvas" icon="brush" link="#navigation" no-wire-navigate active />
|
|
<x-navigation-rail-item label="Layers" icon="layers" link="#navigation" no-wire-navigate />
|
|
<x-navigation-rail-item label="Exports" icon="download" link="#navigation" no-wire-navigate />
|
|
</x-navigation-rail>
|
|
|
|
<div class="min-w-0 flex-1 space-y-4 bg-surface-container-low p-6 type-body-md text-on-surface-variant">
|
|
<p>M3's other expanded behaviour: collapsing this rail takes it out of the layout instead of narrowing it to 96px, so an immersive page gets the whole window. The only way back is a menu button of the application's own — its own button then docks it again.</p>
|
|
<x-button icon="menu" label="Open navigation" x-on:click="$store.rail.show()" />
|
|
</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-scaffold></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 scaffold</a> and change the window's width.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|