Merge branch 'worktree-agent-aed4618fbd0b6aeac'
This commit is contained in:
Andreas Reinhold / reini
@@ -73,6 +73,16 @@
|
||||
<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'
|
||||
|
||||
@@ -29,9 +29,36 @@
|
||||
</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 and expanded rails' => <<<'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>
|
||||
@@ -53,6 +80,22 @@
|
||||
</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>
|
||||
@@ -95,6 +138,24 @@
|
||||
</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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user