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
79 lines
3.8 KiB
PHP
79 lines
3.8 KiB
PHP
{{-- An M3 Expressive floating action button: the screen's primary action.
|
|
|
|
With only an `icon` it is a FAB — `size` `sm` 56px (the default; M3's deprecated small FAB is
|
|
gone, so this is the baseline FAB), `md` 80px, `lg` 96px. With a `label` it is an extended
|
|
FAB at the same three heights. `color` is `primary` (the default), `secondary` or `tertiary`,
|
|
drawn in its container, or in the colour itself with `variant="filled"`.
|
|
|
|
It does not place itself: put it where the layout wants it, e.g.
|
|
`<div class="fixed end-4 bottom-4"><x-fab icon="add" tooltip="New share" /></div>`. For a
|
|
create action that is a FAB on a phone and a header button above, use `<x-button fab>`.
|
|
|
|
Sizes, corners and elevation from FabBaseline/Medium/LargeTokens and ExtendedFab*Tokens
|
|
(androidx Compose Material 3, Apache-2.0). --}}
|
|
|
|
@props([
|
|
'icon' => null,
|
|
'label' => null,
|
|
'size' => 'sm',
|
|
'color' => 'primary',
|
|
'variant' => 'container',
|
|
'link' => null,
|
|
'external' => false,
|
|
'tooltip' => null,
|
|
'disabled' => false,
|
|
'type' => 'button',
|
|
])
|
|
|
|
@php
|
|
$size = in_array($size, ['sm', 'md', 'lg'], true) ? $size : 'sm';
|
|
$color = in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary';
|
|
$extended = filled($label) || $slot->isNotEmpty();
|
|
$isLink = filled($link);
|
|
|
|
$colours = $variant === 'filled'
|
|
? ['primary' => 'bg-primary text-on-primary', 'secondary' => 'bg-secondary text-on-secondary', 'tertiary' => 'bg-tertiary text-on-tertiary'][$color]
|
|
: ['primary' => 'bg-primary-container text-on-primary-container', 'secondary' => 'bg-secondary-container text-on-secondary-container', 'tertiary' => 'bg-tertiary-container text-on-tertiary-container'][$color];
|
|
|
|
$dimensions = $extended
|
|
? ['sm' => 'h-14 min-w-14 gap-2 px-4 rounded-corner-lg type-title-md', 'md' => 'h-20 min-w-20 gap-3 px-[26px] rounded-corner-lg-increased type-title-lg', 'lg' => 'h-24 min-w-24 gap-4 px-7 rounded-corner-xl type-headline-sm'][$size]
|
|
: ['sm' => 'size-14 rounded-corner-lg', 'md' => 'size-20 rounded-corner-lg-increased', 'lg' => 'size-24 rounded-corner-xl'][$size];
|
|
|
|
$iconSize = ['sm' => 'size-6', 'md' => 'size-7', 'lg' => 'size-8'][$size];
|
|
$anchor = $tooltip !== null ? '--material-fab-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10)) : null;
|
|
$tag = $isLink ? 'a' : 'button';
|
|
|
|
$attributes = $attributes
|
|
->class([
|
|
'state-layer focus-ring inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap',
|
|
'shadow-elevation-3 hover:shadow-elevation-4 transition-[box-shadow,background-color,color] duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast',
|
|
$dimensions,
|
|
$colours,
|
|
'disabled:cursor-not-allowed disabled:bg-on-surface/10 disabled:text-on-surface/38 disabled:shadow-none',
|
|
])
|
|
->merge(array_filter([
|
|
'href' => $isLink ? $link : null,
|
|
'target' => $isLink && $external ? '_blank' : null,
|
|
'rel' => $isLink && $external ? 'noopener' : null,
|
|
'wire:navigate' => $isLink && ! $external && ! $attributes->has('wire:navigate') ? true : null,
|
|
'type' => $isLink ? null : $type,
|
|
'disabled' => ! $isLink && $disabled ? true : null,
|
|
'aria-label' => ! $extended && ! $attributes->has('aria-label') ? $tooltip : null,
|
|
'style' => $anchor ? "anchor-name: {$anchor}" : null,
|
|
], fn ($value): bool => $value !== null));
|
|
@endphp
|
|
|
|
<{{ $tag }} {{ $attributes }}>
|
|
@if ($icon)
|
|
<x-livewire-material::icon :name="$icon" :class="$iconSize" />
|
|
@endif
|
|
|
|
@if ($extended)
|
|
<span>{{ $label ?? $slot }}</span>
|
|
@endif
|
|
|
|
@if ($tooltip !== null)
|
|
<x-livewire-material::tooltip :text="$tooltip" :anchor="$anchor" />
|
|
@endif
|
|
</{{ $tag }}>
|