Andreas Reinhold / reiniandClaude Opus 5
f33fb8be64
Plan step 25, item 8 (navigation Missing: "Toolbar, large-screen treatments"). M3's toolbar guidelines (Adaptive design, Resizing) say it of the docked toolbar: "On web and large screens, the docked toolbar can be rounded. Dividers can be used to organize large amounts of items", and it can be placed in different parts of the page. `rounded` does that from expanded (840px): fully rounded, spanning its container, lifted 16px off the window's edges at place="bottom"; below expanded it stays the square full-width bar. An <x-divider vertical /> between groups of controls stands as tall as the icon buttons inside any toolbar. The floating toolbar is already fully rounded and gets no new form. Co-Authored-By: Claude Opus 5 (1M context) <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'
|
|
<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>
|
|
|
|
{{-- M3's docked toolbar on a large screen: rounded from 840px, its groups of controls divided. Narrower, it is the square docked bar. --}}
|
|
<div class="w-full overflow-hidden rounded-corner-lg bg-surface expanded:p-4">
|
|
<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>
|
|
</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>
|