noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give a docked toolbar M3's rounded large-screen form

Browse Source 
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:
Andreas Reinhold / reini
2026-09-14 11:02:43 +02:00
co-authored by Claude Opus 5
parent 092100c6ae
commit f33fb8be64
5 changed files with 127 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/boost/skills/livewire-material-development/SKILL.md
+12
View File
@@ -877,6 +877,18 @@ M3 Expressive toolbar, `role="toolbar"` (arrow keys move between controls). `var
A docked toolbar and a navigation bar occupy the same screen region and must never be on screen together: show the bar on a primary page and the toolbar on a secondary or contextual one. A `place="bottom"` toolbar clears `--material-bottom-bar` if a bar is there anyway, so nothing is buried.
Large screens: `rounded` gives a *docked* toolbar M3's web/large-screen form — from `expanded` (840px) fully rounded and spanning its container (at `place="bottom"` it lifts 16px off the window's edges); below `expanded` it stays the square full-width bar M3 requires. Divide groups of controls with `<x-divider vertical />` (`<x-divider />` in a vertical toolbar); inside a toolbar it stands as tall as the icon buttons. A floating toolbar is fully rounded already and has no large-screen form: M3 lets it show more controls there, or splits the actions into two toolbars at opposite edges.
```blade
<x-toolbar variant="docked" rounded label="Text formatting">
<x-button icon="undo" tooltip="Undo" wire:click="undo" />
<x-button icon="redo" tooltip="Redo" wire:click="redo" />
<x-divider vertical />
<x-button icon="format_bold" tooltip="Bold" :selected="$bold" wire:click="toggleBold" />
<x-button icon="format_italic" tooltip="Italic" :selected="$italic" wire:click="toggleItalic" />
</x-toolbar>
```
### `<x-tabs>`, `<x-tab>`
M3 tabs with a server-rendered tablist (arrow keys, Home/End, disabled tabs skipped, the indicator moves in a view transition). `tabs`: `['name', 'label', 'icon', 'badge', 'disabled']`; panels are `<x-tab name>` in the slot. Bind with `wire:model` (entangled), or `selected` / `x-model` without Livewire. `variant` `primary` (default) or `secondary`; `stacked` (icon over label), `scrollable`. Give two identical tab sets on one page distinct `id`s.