Let a docked toolbar carry a FAB
Plan step 25 (navigation Missing): M3's toolbar configuration table lists "With FAB" for both toolbars, but the `fab` slot was gated to the floating one. A docked toolbar now takes it at its end, inside the toolbar where the arrow keys reach it; its controls gather at the start, and the FAB rests flat on the bar — elevation 0 for a FAB nested in another component, as Compose's bottomAppBarFabElevation is. 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
9c047a8fb1
commit
c975c5c593
@@ -4,8 +4,12 @@
|
||||
`vertical` stands it on end) or `docked` (a full-width bar in surface-container, for the bottom
|
||||
of a screen). `place` puts it over the page: `bottom` (centred above the bottom edge; a docked
|
||||
toolbar spans it) or `end` (centred against the end edge, for a vertical one); without it the
|
||||
toolbar sits where it is written. A `fab` slot sets an `<x-fab>` beside a floating toolbar.
|
||||
`label` names it for screen readers.
|
||||
toolbar sits where it is written. A `fab` slot sets an `<x-fab>` beside a floating toolbar,
|
||||
and at the end of a docked one — M3's "With FAB" configuration for both. On a docked toolbar the
|
||||
controls then gather at the start and the FAB rests on the bar, flat: M3 gives a FAB nested in
|
||||
another component elevation 0 (Compose's bottomAppBarFabElevation is 0 at every state), where
|
||||
one beside a floating toolbar keeps its own. It is one of the toolbar's controls then, so the
|
||||
arrow keys reach it. `label` names it for screen readers.
|
||||
|
||||
A docked toolbar and a navigation bar occupy the same region of the screen and M3 says never to
|
||||
show both at once: the bar belongs on a primary page, the toolbar on a secondary or contextual
|
||||
@@ -29,6 +33,7 @@
|
||||
$vertical = $vertical && $variant === 'floating';
|
||||
$place = in_array($place, ['bottom', 'end'], true) ? $place : null;
|
||||
$grouped = isset($fab) && $variant === 'floating';
|
||||
$docksFab = isset($fab) && $variant === 'docked';
|
||||
@endphp
|
||||
|
||||
@if ($grouped)
|
||||
@@ -48,6 +53,10 @@
|
||||
{{ $attributes }}
|
||||
>
|
||||
{{ $slot }}
|
||||
|
||||
@if ($docksFab)
|
||||
<div data-toolbar-fab>{{ $fab }}</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if ($grouped)
|
||||
|
||||
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user