Andreas Reinhold / reiniandClaude Opus 5
c975c5c593
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
66 lines
2.8 KiB
PHP
66 lines
2.8 KiB
PHP
{{-- M3 Expressive's toolbar: a set of actions for the current page, in a bar of its own.
|
|
|
|
`variant`: `floating` (the default: a pill at elevation 3; `vibrant` in primary-container,
|
|
`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,
|
|
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
|
|
one. Either way a toolbar placed at `bottom` clears `--material-bottom-bar`, so it is never
|
|
buried under `<x-app-shell>`'s bar.
|
|
|
|
Put `<x-button icon="…" tooltip="…" />` controls in the slot (`:selected` for toggles). It is a
|
|
`role="toolbar"`: the arrow keys move between its controls (resources/js/toolbar.js,
|
|
resources/css/components/toolbar.css). --}}
|
|
|
|
@props([
|
|
'variant' => 'floating',
|
|
'vibrant' => false,
|
|
'vertical' => false,
|
|
'place' => null,
|
|
'label' => null,
|
|
])
|
|
|
|
@php
|
|
$variant = $variant === 'docked' ? 'docked' : 'floating';
|
|
$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)
|
|
<div data-toolbar-group @if ($vertical) data-vertical @endif @if ($place) data-toolbar-place="{{ $place }}" @endif>
|
|
@endif
|
|
|
|
<div
|
|
role="toolbar"
|
|
x-data="materialToolbar({{ $vertical ? 'true' : 'false' }})"
|
|
x-on:keydown="move($event)"
|
|
data-toolbar
|
|
data-variant="{{ $variant }}"
|
|
@if ($vertical) data-vertical aria-orientation="vertical" @endif
|
|
@if ($vibrant && $variant === 'floating') data-vibrant @endif
|
|
@if ($place && ! $grouped) data-toolbar-place="{{ $place }}" @endif
|
|
@if (filled($label)) aria-label="{{ $label }}" @endif
|
|
{{ $attributes }}
|
|
>
|
|
{{ $slot }}
|
|
|
|
@if ($docksFab)
|
|
<div data-toolbar-fab>{{ $fab }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if ($grouped)
|
|
{{ $fab }}
|
|
</div>
|
|
@endif
|