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
77 lines
3.0 KiB
PHP
77 lines
3.0 KiB
PHP
{{-- An M3 card: content and actions about one subject.
|
|
|
|
`variant` is M3's three (FilledCardTokens, ElevatedCardTokens, OutlinedCardTokens, androidx
|
|
Compose Material 3, Apache-2.0): `filled` (surface-container-highest, the default),
|
|
`elevated` (surface-container-low at elevation 1) and `outlined` (surface, an outline-variant
|
|
edge); all with a medium corner. maryUI's props keep their meaning: `title`, `subtitle`,
|
|
`separator` (a divider under the header), and the `menu` (top-end, beside the title),
|
|
`figure` (full-bleed media on top) and `actions` (end-aligned, under the content) slots.
|
|
|
|
A card that opens something is a row: give it `data-list-row` and one `data-list-open`
|
|
control inside (the title link or a button), and a press anywhere on it reaches that control
|
|
while its other buttons keep their own (resources/js/list-rows.js). It answers with a state
|
|
layer and its corner opening a step. Never a stretched link, and never a whole-card `<a>`
|
|
around buttons.
|
|
|
|
Do not pass a `bg-*` class to change its fill — it races the card's own in Tailwind's emit
|
|
order; use `variant`, or colour a wrapper inside. --}}
|
|
|
|
@props([
|
|
'title' => null,
|
|
'subtitle' => null,
|
|
'variant' => 'filled',
|
|
'separator' => false,
|
|
])
|
|
|
|
@php
|
|
$variant = in_array($variant, ['filled', 'elevated', 'outlined'], true) ? $variant : 'filled';
|
|
@endphp
|
|
|
|
<div
|
|
data-card
|
|
{{ $attributes->class([
|
|
'relative flex flex-col overflow-hidden rounded-corner-md text-on-surface',
|
|
'bg-surface-container-highest' => $variant === 'filled',
|
|
'bg-surface-container-low shadow-elevation-1' => $variant === 'elevated',
|
|
'border border-outline-variant bg-surface' => $variant === 'outlined',
|
|
]) }}
|
|
>
|
|
@isset($figure)
|
|
<div class="shrink-0 overflow-hidden [&>img]:w-full [&>img]:object-cover">{{ $figure }}</div>
|
|
@endisset
|
|
|
|
<div class="flex flex-1 flex-col gap-4 p-4">
|
|
@if ($title || $subtitle || isset($menu))
|
|
<div>
|
|
<div class="flex items-start gap-2">
|
|
<div class="min-w-0 flex-1">
|
|
@if ($title)
|
|
<h3 class="type-title-md">{{ $title }}</h3>
|
|
@endif
|
|
|
|
@if ($subtitle)
|
|
<p class="mt-0.5 type-body-md text-on-surface-variant">{{ $subtitle }}</p>
|
|
@endif
|
|
</div>
|
|
|
|
@isset($menu)
|
|
<div class="-me-2 -mt-2 flex shrink-0 items-center gap-1">{{ $menu }}</div>
|
|
@endisset
|
|
</div>
|
|
|
|
@if ($separator)
|
|
<x-livewire-material::divider class="mt-4" />
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
@if ($slot->isNotEmpty())
|
|
<div class="flex-1 type-body-md">{{ $slot }}</div>
|
|
@endif
|
|
|
|
@isset($actions)
|
|
<div class="flex flex-wrap items-center justify-end gap-2">{{ $actions }}</div>
|
|
@endisset
|
|
</div>
|
|
</div>
|