Andreas Reinhold / reiniandClaude Opus 5
0013e0154d
Plan step 35: <x-app-shell> becomes <x-scaffold>, M3's and Compose's name for the structure of bars, rails and panes, with no alias; every package view, the showcase, the tests, the skills, README and UPGRADE follow. Its markup and Tailwind classes stay for the navigation rewrite. The new fab slot places the FAB as Compose's Scaffold does - bottom-end, 16px from the edges below medium and 24px from it, clear of the navigation bar and of a snackbar on screen (resources/css/layout/scaffold.css) - and the content region tells a pane inside that the margin is already drawn. 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-scaffold>`'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
|