Andreas Reinhold / reiniandClaude Opus 5
092100c6ae
Plan step 25, item 7 (navigation Missing: "App bar, trailing-action overflow at small widths"). `<x-app-bar :actions="[...]">` takes the trailing actions as a list whose entries take <x-menu-item>'s props plus any action attribute. M3 allows up to two trailing icon buttons, and up to four on larger screens, and lets trailing actions collapse into an overflow menu at smaller breakpoints: below medium the bar keeps at most two icon buttons, from medium four, the "More options" button counted among them, the rest in its menu. Both forms render and media queries pick one, so there is no script and no flash; each width has its own menu so the arrow keys never reach a hidden row. The actions slot still takes markup and never overflows. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
168 lines
9.2 KiB
PHP
168 lines
9.2 KiB
PHP
@php
|
|
$examples = [
|
|
'Top app bars' => <<<'BLADE'
|
|
<div class="grid w-full gap-4 [&>*]:overflow-hidden [&>*]:rounded-corner-lg [&>*]:border [&>*]:border-outline-variant">
|
|
<div>
|
|
<x-app-bar title="Shares" :sticky="false">
|
|
<x-slot:navigation><x-button icon="menu" tooltip="Open navigation" /></x-slot:navigation>
|
|
<x-slot:actions>
|
|
<x-button icon="search" tooltip="Search" />
|
|
<x-button icon="filter_list" tooltip="Filter" />
|
|
</x-slot:actions>
|
|
</x-app-bar>
|
|
</div>
|
|
|
|
{{-- Resize the window: two icon buttons below 600px, four from there, the rest in "More options". --}}
|
|
<div>
|
|
<x-app-bar title="holiday-photos" :sticky="false" :actions="[
|
|
['label' => 'Share', 'icon' => 'share'],
|
|
['label' => 'Download', 'icon' => 'download'],
|
|
['label' => 'Star', 'icon' => 'star'],
|
|
['label' => 'Rename', 'icon' => 'edit'],
|
|
['label' => 'Details', 'icon' => 'info', 'link' => '#bars', 'no-wire-navigate' => true],
|
|
]">
|
|
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
|
</x-app-bar>
|
|
</div>
|
|
|
|
<div>
|
|
<x-app-bar variant="center" title="holiday-photos.zip" subtitle="248 MB · expires in 3 days" :sticky="false">
|
|
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
|
<x-slot:actions><x-button icon="share" tooltip="Share" /></x-slot:actions>
|
|
</x-app-bar>
|
|
</div>
|
|
|
|
<div>
|
|
<x-app-bar variant="medium" title="Recipients" subtitle="3 people" :sticky="false">
|
|
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
|
<x-slot:actions><x-button icon="person_add" tooltip="Add recipient" /></x-slot:actions>
|
|
</x-app-bar>
|
|
</div>
|
|
|
|
<div>
|
|
<x-app-bar variant="large" title="Settings" :sticky="false">
|
|
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
|
</x-app-bar>
|
|
</div>
|
|
|
|
<div class="!overflow-visible">
|
|
<x-app-bar variant="search" :sticky="false" class="rounded-corner-lg">
|
|
<x-slot:navigation><x-button icon="menu" tooltip="Open navigation" /></x-slot:navigation>
|
|
<x-search placeholder="Search shares" docked />
|
|
<x-slot:actions>
|
|
<span class="mx-2 grid size-8 place-items-center rounded-corner-full bg-primary-container type-label-lg text-on-primary-container">AR</span>
|
|
</x-slot:actions>
|
|
</x-app-bar>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Toolbars' => <<<'BLADE'
|
|
<div class="flex w-full flex-wrap items-center gap-6">
|
|
<x-toolbar label="Formatting">
|
|
<x-button icon="format_bold" tooltip="Bold" :selected="true" />
|
|
<x-button icon="format_italic" tooltip="Italic" :selected="false" />
|
|
<x-button icon="format_underlined" tooltip="Underline" :selected="false" />
|
|
<x-button icon="link" tooltip="Link" />
|
|
</x-toolbar>
|
|
|
|
<x-toolbar label="Share actions" vibrant>
|
|
<x-button icon="content_copy" tooltip="Copy link" />
|
|
<x-button icon="qr_code_2" tooltip="QR code" />
|
|
<x-button icon="mail" tooltip="Email" />
|
|
<x-slot:fab><x-fab icon="add" tooltip="New share" color="secondary" /></x-slot:fab>
|
|
</x-toolbar>
|
|
|
|
<x-toolbar label="View" vertical>
|
|
<x-button icon="grid_view" tooltip-right="Grid" :selected="true" />
|
|
<x-button icon="view_list" tooltip-right="List" :selected="false" />
|
|
<x-button icon="zoom_in" tooltip-right="Zoom in" />
|
|
</x-toolbar>
|
|
|
|
<div class="w-full overflow-hidden rounded-corner-lg border border-outline-variant">
|
|
<x-toolbar variant="docked" label="Selection">
|
|
<x-button icon="download" tooltip="Download" />
|
|
<x-button icon="share" tooltip="Share" />
|
|
<x-button icon="drive_file_move" tooltip="Move" />
|
|
<x-button icon="delete" tooltip="Delete" />
|
|
</x-toolbar>
|
|
</div>
|
|
|
|
<div class="w-full overflow-hidden rounded-corner-lg border border-outline-variant">
|
|
<x-toolbar variant="docked" label="Editing">
|
|
<x-button icon="check_box" tooltip="Select" />
|
|
<x-button icon="brush" tooltip="Draw" />
|
|
<x-button icon="mic" tooltip="Record" />
|
|
<x-button icon="image" tooltip="Add image" />
|
|
<x-slot:fab><x-fab icon="add" tooltip="New note" color="secondary" /></x-slot:fab>
|
|
</x-toolbar>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Primary tabs' => <<<'BLADE'
|
|
<div class="w-full space-y-8">
|
|
<x-tabs :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'recipients', 'label' => 'Recipients', 'badge' => 3], ['name' => 'activity', 'label' => 'Activity'], ['name' => 'settings', 'label' => 'Settings', 'disabled' => true]]">
|
|
<x-tab name="files">Three files, 248 MB.</x-tab>
|
|
<x-tab name="recipients">Anna, Ben and Chiara.</x-tab>
|
|
<x-tab name="activity">Downloaded twice today.</x-tab>
|
|
</x-tabs>
|
|
|
|
<x-tabs stacked selected="photos" :tabs="[['name' => 'all', 'label' => 'All', 'icon' => 'folder'], ['name' => 'photos', 'label' => 'Photos', 'icon' => 'photo'], ['name' => 'videos', 'label' => 'Videos', 'icon' => 'movie']]">
|
|
<x-tab name="all">Everything shared with you.</x-tab>
|
|
<x-tab name="photos">Only photos.</x-tab>
|
|
<x-tab name="videos">Only videos.</x-tab>
|
|
</x-tabs>
|
|
</div>
|
|
BLADE,
|
|
'Secondary and scrollable tabs' => <<<'BLADE'
|
|
<div class="w-full space-y-8">
|
|
<x-tabs variant="secondary" :tabs="[['name' => 'overview', 'label' => 'Overview'], ['name' => 'security', 'label' => 'Security', 'icon' => 'lock'], ['name' => 'billing', 'label' => 'Billing']]">
|
|
<x-tab name="overview">An overview of the account.</x-tab>
|
|
<x-tab name="security">Passwords and two-factor sign-in.</x-tab>
|
|
<x-tab name="billing">Plan and invoices.</x-tab>
|
|
</x-tabs>
|
|
|
|
<div class="max-w-sm">
|
|
<x-tabs scrollable :tabs="collect(['January', 'February', 'March', 'April', 'May', 'June', 'July'])->map(fn ($month) => ['name' => strtolower($month), 'label' => $month])->all()">
|
|
<x-tab name="january">January's shares.</x-tab>
|
|
</x-tabs>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Section navigation, account menu and theme toggles' => <<<'BLADE'
|
|
<div class="w-full space-y-8">
|
|
<x-section-nav :items="[
|
|
['title' => 'Profile', 'icon' => 'person', 'url' => '#bars', 'active' => true],
|
|
['title' => 'Security', 'icon' => 'lock', 'url' => '#bars'],
|
|
['title' => 'Notifications', 'icon' => 'notifications', 'url' => '#bars', 'badge' => 2],
|
|
['title' => 'Billing', 'icon' => 'credit_card', 'url' => '#bars'],
|
|
]" no-wire-navigate />
|
|
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<x-account-menu name="Andreas Reinhold" email="andreas@example.com">
|
|
<x-menu-item label="Settings" icon="settings" link="#bars" no-wire-navigate />
|
|
<x-slot:footer>
|
|
<x-menu-item label="Sign out" icon="logout" />
|
|
</x-slot:footer>
|
|
</x-account-menu>
|
|
|
|
<x-theme-toggle />
|
|
<x-theme-toggle mode="cycle" />
|
|
<x-theme-toggle mode="picker" />
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="bars" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">App bars, toolbars and tabs</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-app-bar></code>, <code><x-toolbar></code>, <code><x-tabs></code>, <code><x-tab></code>, <code><x-section-nav></code>, <code><x-account-menu></code> and <code><x-theme-toggle></code>.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|