Andreas Reinhold / reiniandClaude Opus 5
2a4dcead3d
Plan step 36. <x-split-button> renders data-md-split-button and data-md-size on the pair and data-md-split on its halves. split-button.css draws SplitButton*Tokens' shape — full outer corners, inner corners that grow under the finger, the trailing half round while its menu is open — the narrower leading padding and 48px trailing half at xs and sm, and the chevron's own size, nudge and turn on the standard scheme. groups.css is empty and leaves tailwind.css. The actions browser test follows data-md-split and data-md-button-group, and gains the owed tests for a connected segment's 48px edge and a button group's single-required and multi selection. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
69 lines
2.8 KiB
PHP
69 lines
2.8 KiB
PHP
{{-- An M3 Expressive split button: an action, and a menu of its alternatives.
|
|
|
|
<x-split-button label="Download all" icon="download" wire:click="downloadZip" menu-label="Download options">
|
|
<x-menu-item label="Download as ZIP" wire:click="downloadZip" />
|
|
<x-menu-item label="Download files one by one" wire:click="downloadEach" />
|
|
</x-split-button>
|
|
|
|
Attributes (wire:click, spinner…) go to the leading button, a `class` to the pair; the slot is
|
|
the menu. `variant` is `filled` (the default), `tonal`, `outlined` or `elevated` — a text split
|
|
button does not exist in M3 — with `color` and `size` as on `<x-button>`. The halves sit 2px
|
|
apart; the trailing one rounds fully and turns its chevron over while the menu is open.
|
|
`menu-label` names the trailing button and the menu for screen readers.
|
|
|
|
Padding from SplitButton*Tokens (androidx Compose Material 3, Apache-2.0): the leading button
|
|
keeps less room on its inner side at the two smallest sizes, and the trailing button is 48px
|
|
wide there. resources/css/components/split-button.css carries the rest of the spec, which is
|
|
all geometry: the inner corners (4/4/4/8/12px, growing under the finger, not shrinking as a
|
|
connected group's do), the trailing icon's own size (22/22/26/38/50px, which the icon-button
|
|
table has no entry for), the 1/1/2/3/6px nudge that sits the chevron towards the leading half,
|
|
and the standard motion scheme M3 asks for while it turns over. --}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'icon' => null,
|
|
'variant' => 'filled',
|
|
'color' => 'primary',
|
|
'size' => 'sm',
|
|
'disabled' => false,
|
|
'spinner' => null,
|
|
'menuLabel' => null,
|
|
'position' => 'bottom-end',
|
|
])
|
|
|
|
@php
|
|
$variant = in_array($variant, ['filled', 'tonal', 'outlined', 'elevated'], true) ? $variant : 'filled';
|
|
$size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
|
|
$menuLabel ??= __('More options');
|
|
@endphp
|
|
|
|
<div data-md-split-button data-md-size="{{ $size }}" {{ $attributes->only('class') }}>
|
|
<x-livewire-material::button
|
|
{{ $attributes->except('class') }}
|
|
:label="$label"
|
|
:icon="$icon"
|
|
:variant="$variant"
|
|
:color="$color"
|
|
:size="$size"
|
|
:disabled="$disabled"
|
|
:spinner="$spinner"
|
|
data-md-split="leading"
|
|
/>
|
|
|
|
<x-livewire-material::menu :position="$position" :label="$menuLabel">
|
|
<x-slot:trigger>
|
|
<x-livewire-material::button
|
|
icon="keyboard_arrow_down"
|
|
:aria-label="$menuLabel"
|
|
:variant="$variant"
|
|
:color="$color"
|
|
:size="$size"
|
|
:disabled="$disabled"
|
|
data-md-split="trailing"
|
|
/>
|
|
</x-slot:trigger>
|
|
|
|
{{ $slot }}
|
|
</x-livewire-material::menu>
|
|
</div>
|