Add app bars, toolbars, tabs and the account and theme controls
tests / browser (chrome, chromium) (push) Successful in 3m34s
tests / browser (safari, webkit) (push) Successful in 6m2s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m6s
tests / feature (8.5) (push) Successful in 1m9s
tests / browser (firefox, firefox) (push) Successful in 4m20s
tests / browser (chrome, chromium) (push) Successful in 3m34s
tests / browser (safari, webkit) (push) Successful in 6m2s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m6s
tests / feature (8.5) (push) Successful in 1m9s
tests / browser (firefox, firefox) (push) Successful in 4m20s
M3 Expressive top app bars (small, centered, medium and large flexible, search) that collapse with CSS sticky, docked and floating toolbars, primary and secondary tabs with a view-transition indicator, section navigation, the account menu and theme toggles. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
bf00e4c40a
commit
f90695cedd
@@ -0,0 +1,144 @@
|
||||
@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="more_vert" tooltip="More" />
|
||||
</x-slot:actions>
|
||||
</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>
|
||||
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>
|
||||
Reference in New Issue
Block a user