Andreas Reinhold / reiniandClaude Opus 5
cd64f4f371
tests / browser (firefox, firefox) (push) Successful in 1m54s
tests / browser (safari, webkit) (push) Successful in 2m17s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m7s
tests / feature (8.5) (push) Successful in 1m0s
tests / browser (chrome, chromium) (push) Successful in 1m49s
<x-button> (label buttons, icon buttons and toggles in five sizes, with filled, tonal, outlined, elevated and text variants in any colour role), <x-tooltip>, <x-menu> with items, groups and separators, <x-button-group>, <x-group> as a connected button group, <x-split-button>, <x-fab>, <x-fab-menu> and <x-loading>. Sizes, colours and shapes come from androidx Compose Material 3's tokens; the loading indicator ports its Morph into SVG + SMIL. Menus follow WAI-ARIA's menu button pattern on popovers placed by CSS anchor positioning. Browser tests run in Chromium, Firefox and WebKit. The showcase fetches the icon names on demand: inlined, they tripped Pest's test server into HTTP 431s under Firefox. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
43 lines
1.6 KiB
PHP
43 lines
1.6 KiB
PHP
{{-- An M3 Expressive button group: related `<x-button>`s in a row.
|
|
|
|
<x-button-group size="md" label="Text formatting">
|
|
<x-button icon="format_bold" aria-label="Bold" variant="tonal" :selected="$bold" wire:click="toggleBold" />
|
|
…
|
|
</x-button-group>
|
|
|
|
Standard (the default): the buttons stand apart, and pressing a label button widens it while
|
|
its neighbours give way. `connected`: 2px apart with small inner corners, the shape that
|
|
replaced M3's segmented button; a selected (aria-pressed) button rounds fully. Give `size`
|
|
the size of the buttons inside, so the spacing and corners match. For a choice bound to a
|
|
property, `<x-group>` draws a connected group of radios.
|
|
|
|
Spacing from the M3 Expressive spec (ButtonGroupSmallTokens: 12px at the small size). The
|
|
shapes are resources/css/components/groups.css. --}}
|
|
|
|
@props([
|
|
'connected' => false,
|
|
'size' => 'sm',
|
|
'label' => null,
|
|
])
|
|
|
|
@php
|
|
$size = in_array($size, ['xs', 'sm', 'md', 'lg', 'xl'], true) ? $size : 'sm';
|
|
@endphp
|
|
|
|
<div
|
|
role="group"
|
|
@if ($label) aria-label="{{ $label }}" @endif
|
|
data-button-group="{{ $connected ? 'connected' : 'standard' }}"
|
|
data-size="{{ $size }}"
|
|
{{ $attributes->class([
|
|
'inline-flex items-center',
|
|
'gap-0.5' => $connected,
|
|
'flex-wrap' => ! $connected,
|
|
'gap-[18px]' => ! $connected && $size === 'xs',
|
|
'gap-3' => ! $connected && $size === 'sm',
|
|
'gap-2' => ! $connected && in_array($size, ['md', 'lg', 'xl'], true),
|
|
]) }}
|
|
>
|
|
{{ $slot }}
|
|
</div>
|