Andreas Reinhold / reiniandClaude Opus 5
1e580c573e
Package views now write <x-livewire-material::button>, so a configured prefix (which Blade spells <x-m::button>) and an application component of the same name can no longer break or shadow them. The showcase rewrites its examples to the configured prefix. Adds the README, and waits for the adaptive rail to hear a resize before the navigation tests press its menu button. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
72 lines
2.8 KiB
PHP
72 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; 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. The corners are resources/css/components/groups.css. --}}
|
|
|
|
@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');
|
|
|
|
$leadingPadding = ['xs' => 'pe-2.5', 'sm' => 'pe-3', 'md' => '', 'lg' => '', 'xl' => ''][$size];
|
|
$trailingWidth = ['xs' => 'w-12', 'sm' => 'w-12', 'md' => '', 'lg' => '', 'xl' => ''][$size];
|
|
@endphp
|
|
|
|
<div data-button-group="split" data-size="{{ $size }}" {{ $attributes->only('class')->class('inline-flex items-center gap-0.5') }}>
|
|
<x-livewire-material::button
|
|
{{ $attributes->except('class') }}
|
|
:label="$label"
|
|
:icon="$icon"
|
|
:variant="$variant"
|
|
:color="$color"
|
|
:size="$size"
|
|
:disabled="$disabled"
|
|
:spinner="$spinner"
|
|
corners=""
|
|
data-split="leading"
|
|
:class="$leadingPadding"
|
|
/>
|
|
|
|
<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"
|
|
corners=""
|
|
data-split="trailing"
|
|
:class="$trailingWidth"
|
|
/>
|
|
</x-slot:trigger>
|
|
|
|
{{ $slot }}
|
|
</x-livewire-material::menu>
|
|
</div>
|