Andreas Reinhold / reiniandClaude Opus 5
f33fb8be64
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
80 lines
3.9 KiB
PHP
80 lines
3.9 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.
|
|
|
|
`rounded` gives a docked toolbar the form M3 lets it take 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" (docs/reference/m3/components-navigation-selection-inputs.md
|
|
§ Toolbars → Behaviour and guidelines; toolbars/guidelines § Adaptive design → Resizing). From `expanded`
|
|
(840px) it is a fully rounded bar that spans what it is written in, and at `place="bottom"` it
|
|
lifts clear of the window's edges; below `expanded` it is the square, full-width docked toolbar,
|
|
as M3 requires there. Separate groups of controls with `<x-divider vertical />` between them (in
|
|
a vertical toolbar, `<x-divider />`): inside a toolbar it stands as tall as an icon button rather
|
|
than across the whole bar. The floating toolbar has no such form — it is fully rounded already,
|
|
and M3's large-screen advice for it is to show more controls, or two toolbars at opposite edges.
|
|
|
|
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,
|
|
'rounded' => false,
|
|
])
|
|
|
|
@php
|
|
$variant = $variant === 'docked' ? 'docked' : 'floating';
|
|
$vertical = $vertical && $variant === 'floating';
|
|
$place = in_array($place, ['bottom', 'end'], true) ? $place : null;
|
|
$rounded = $rounded && $variant === 'docked';
|
|
$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 ($rounded) data-rounded @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
|