Give a docked toolbar M3's rounded large-screen form
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
This commit is contained in:
co-authored by
Claude Opus 5
parent
092100c6ae
commit
f33fb8be64
@@ -96,6 +96,19 @@
|
||||
<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'
|
||||
|
||||
Reference in New Issue
Block a user