Andreas Reinhold / reiniandClaude Sonnet 5
7b7e7279f5
Plan step 38 (last batch): the app-bar/toolbar row becomes <x-stack>/ <x-row>, each bordered demo box a data-md-showcase-bar-frame hook (`visible` for the search bar, whose docked suggestions must not clip; `rounded` for the large-screen docked toolbar, which only gains its edge and padding from `expanded`, 840px), and the search bar's own avatar reuses the existing data-md-showcase-avatar hook. The scrollable-tabs demo's forced-narrow box is data-md-showcase-tabs-narrow, and the "Open the scaffold" link uses the shared md-link/md-ink-primary classes in place of the old Tailwind-era link/text-primary utilities. Every #bars id and visible label/tooltip the Chromium BarsTest (against its own probes) and the search index rely on is unchanged. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
181 lines
10 KiB
PHP
181 lines
10 KiB
PHP
@php
|
|
$examples = [
|
|
'Top app bars' => <<<'BLADE'
|
|
<x-stack gap="space200" style="width: 100%;">
|
|
<div data-md-showcase-bar-frame>
|
|
<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 data-md-showcase-bar-frame>
|
|
<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 data-md-showcase-bar-frame>
|
|
<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 data-md-showcase-bar-frame>
|
|
<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 data-md-showcase-bar-frame>
|
|
<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 data-md-showcase-bar-frame="visible">
|
|
<x-app-bar variant="search" :sticky="false" style="border-radius: var(--md-sys-shape-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 data-md-showcase-avatar class="md-type-label-lg">AR</span>
|
|
</x-slot:actions>
|
|
</x-app-bar>
|
|
</div>
|
|
</x-stack>
|
|
BLADE,
|
|
'Toolbars' => <<<'BLADE'
|
|
<x-row gap="space300" wrap align="center" style="width: 100%;">
|
|
<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 data-md-showcase-bar-frame>
|
|
<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 data-md-showcase-bar-frame>
|
|
<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>
|
|
|
|
{{-- M3's docked toolbar on a large screen: rounded from 840px, its groups of controls divided. Narrower, it is the square docked bar. --}}
|
|
<div data-md-showcase-bar-frame="rounded">
|
|
<x-toolbar variant="docked" rounded label="Text formatting">
|
|
<x-button icon="undo" tooltip="Undo" />
|
|
<x-button icon="redo" tooltip="Redo" />
|
|
<x-divider vertical />
|
|
<x-button icon="format_bold" tooltip="Bold" :selected="false" />
|
|
<x-button icon="format_italic" tooltip="Italic" :selected="false" />
|
|
<x-divider vertical />
|
|
<x-button icon="link" tooltip="Insert link" />
|
|
</x-toolbar>
|
|
</div>
|
|
</x-row>
|
|
BLADE,
|
|
'Primary tabs' => <<<'BLADE'
|
|
<x-stack gap="space400" style="width: 100%;">
|
|
<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>
|
|
</x-stack>
|
|
BLADE,
|
|
'Secondary and scrollable tabs' => <<<'BLADE'
|
|
<x-stack gap="space400" style="width: 100%;">
|
|
<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 data-md-showcase-tabs-narrow>
|
|
<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>
|
|
</x-stack>
|
|
BLADE,
|
|
'Section navigation, account menu and theme toggles' => <<<'BLADE'
|
|
<x-stack gap="space400" style="width: 100%;">
|
|
<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 />
|
|
|
|
<x-row wrap align="center" gap="space200">
|
|
<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" />
|
|
</x-row>
|
|
</x-stack>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="bars" gap="space300">
|
|
<h2 class="md-type-headline-md">App bars, toolbars and tabs</h2>
|
|
|
|
<p class="md-type-body-md md-ink-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
|
|
</x-livewire-material::stack>
|