Andreas Reinhold / reiniandClaude Opus 5
675cfc806a
Plan step 19, containment.md C-13, C-23 and the directly actionable card of C-13/C-18. A card had one elevation and never changed it, and its hover replaced the elevated card's shadow with the state layer; it now names its variant in `data-card` and moves a step on hover (elevated 1 to 2, filled and outlined 0 to 1) with the layer over it. The 12 to 16 corner morph on hover is gone: M3 gives a card one shape and lists shape morph for buttons, FABs and list items only. New `actionable` prop for M3's directly actionable card — the card is the one tab stop, with `role="button"` (or `link`), its `title` as the name, and Enter or Space reaching the opener from resources/js/list-rows.js. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
156 lines
8.4 KiB
PHP
156 lines
8.4 KiB
PHP
@php
|
|
$examples = [
|
|
'Cards' => <<<'BLADE'
|
|
<div class="grid w-full gap-4 expanded:grid-cols-3">
|
|
<x-card title="Filled" subtitle="surface-container-highest">
|
|
The default card.
|
|
<x-slot:actions><x-button label="Open" /></x-slot:actions>
|
|
</x-card>
|
|
|
|
<x-card title="Elevated" subtitle="surface-container-low, elevation 1" variant="elevated">
|
|
<x-slot:menu><x-button icon="more_vert" tooltip="More" /></x-slot:menu>
|
|
For content that floats a little.
|
|
</x-card>
|
|
|
|
<x-card title="Outlined" subtitle="an outline-variant edge" variant="outlined" separator>
|
|
Quiet, on the surface itself.
|
|
</x-card>
|
|
</div>
|
|
BLADE,
|
|
'A card that opens from anywhere on it' => <<<'BLADE'
|
|
<x-card variant="outlined" data-list-row class="w-full max-w-sm">
|
|
<a href="#containment" data-list-open class="type-title-md">holiday-photos.zip</a>
|
|
<p class="mt-1 text-on-surface-variant">248 MB · expires in 3 days</p>
|
|
<x-slot:actions>
|
|
<x-button label="Copy link" icon="content_copy" x-on:click="materialToast('Link copied', { type: 'success' })" />
|
|
</x-slot:actions>
|
|
</x-card>
|
|
BLADE,
|
|
'A directly actionable card: the card is the tab stop' => <<<'BLADE'
|
|
<x-card variant="elevated" actionable role="link" title="contract.pdf" class="w-full max-w-sm">
|
|
<a href="#containment" data-list-open tabindex="-1" class="type-title-md">contract.pdf</a>
|
|
<p class="mt-1 text-on-surface-variant">1.2 MB · downloaded twice</p>
|
|
<x-slot:actions>
|
|
<x-button label="Copy link" icon="content_copy" x-on:click="materialToast('Link copied', { type: 'success' })" />
|
|
</x-slot:actions>
|
|
</x-card>
|
|
BLADE,
|
|
'Lists' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 medium:grid-cols-2">
|
|
<x-list dividers label="Files">
|
|
<x-list-item title="holiday-photos.zip" description="248 MB" icon="folder_zip" trailing="3 days" />
|
|
<x-list-item title="contract.pdf" overline="Password protected" description="1.2 MB · downloaded twice" icon="picture_as_pdf" trailing="1 hour" />
|
|
<x-list-item title="Settings" icon="settings" icon-right="chevron_right" link="#containment" />
|
|
</x-list>
|
|
|
|
<x-list segmented label="Recipients">
|
|
<x-list-item title="Anna Müller" description="Downloaded yesterday" avatar="AM" :selected="true" />
|
|
<x-list-item title="Ben Keller" description="Not opened yet" avatar="BK" link="#containment" />
|
|
<x-list-item title="Chiara Rossi" avatar="CR">
|
|
<x-slot:end><x-button icon="more_vert" tooltip="More" /></x-slot:end>
|
|
</x-list-item>
|
|
<x-list-item title="Dan Fischer" description="Invitation withdrawn" avatar="DF" link="#containment" disabled />
|
|
</x-list>
|
|
</div>
|
|
BLADE,
|
|
'A list to choose from' => <<<'BLADE'
|
|
<x-list selectable label="Expiry" class="w-full max-w-sm">
|
|
<x-list-item title="One hour" :selected="false" />
|
|
<x-list-item title="Three days" :selected="true" />
|
|
<x-list-item title="Thirty days" :selected="false" />
|
|
</x-list>
|
|
BLADE,
|
|
'Dividers and collapse' => <<<'BLADE'
|
|
<div class="w-full space-y-4">
|
|
<x-collapse title="How long do links last?" icon="schedule" open>
|
|
Until the expiry you chose, from one hour to thirty days.
|
|
</x-collapse>
|
|
<x-divider />
|
|
<x-collapse title="Can recipients upload files?" variant="filled">
|
|
No. They can only download what you shared.
|
|
</x-collapse>
|
|
<div class="flex h-10 items-center gap-4"><span>Left</span><x-divider vertical /><span>Right</span></div>
|
|
</div>
|
|
BLADE,
|
|
'Collapse bound to a property' => <<<'BLADE'
|
|
<div x-data="{ advanced: false }" class="w-full space-y-4">
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<x-button label="Open" variant="tonal" x-on:click="advanced = true" />
|
|
<x-button label="Close" variant="tonal" x-on:click="advanced = false" />
|
|
<span class="type-body-md text-on-surface-variant">advanced: <span x-text="advanced"></span></span>
|
|
</div>
|
|
<x-collapse title="Advanced settings" icon="tune" variant="filled" x-model="advanced">
|
|
Bound with x-model here. In a Livewire view, wire:model="advanced" binds a boolean property the same way, and the page arrives with it open or closed as the property is.
|
|
</x-collapse>
|
|
</div>
|
|
BLADE,
|
|
'Dialogs' => <<<'BLADE'
|
|
<div x-data="{ open: false }">
|
|
<x-button label="Basic dialog" variant="tonal" x-on:click="open = true" />
|
|
<x-modal title="Delete this share?" subtitle="Recipients lose access at once. This cannot be undone." alert>
|
|
<x-slot:actions>
|
|
<x-button label="Cancel" x-on:click="close()" />
|
|
<x-button label="Delete" danger x-on:click="close()" />
|
|
</x-slot:actions>
|
|
</x-modal>
|
|
</div>
|
|
|
|
<div x-data="{ open: false }">
|
|
<x-button label="With a hero icon" variant="tonal" x-on:click="open = true" />
|
|
<x-modal title="Reset the password?" icon="lock_reset">
|
|
Recipients with the old password will need the new one.
|
|
<x-slot:actions>
|
|
<x-button label="Cancel" x-on:click="close()" />
|
|
<x-button label="Reset" x-on:click="close()" />
|
|
</x-slot:actions>
|
|
</x-modal>
|
|
</div>
|
|
|
|
<div x-data="{ open: false }">
|
|
<x-button label="Full screen on a phone" variant="tonal" x-on:click="open = true" />
|
|
<x-modal title="Share settings" fullscreen>
|
|
A form that needs the room.
|
|
<x-slot:actions><x-button label="Save" variant="filled" x-on:click="close()" /></x-slot:actions>
|
|
</x-modal>
|
|
</div>
|
|
BLADE,
|
|
'Sheets' => <<<'BLADE'
|
|
<div x-data="{ open: false }">
|
|
<x-button label="Side sheet" variant="tonal" x-on:click="open = true" />
|
|
<x-drawer title="Share details" subtitle="holiday-photos.zip" with-close-button separator>
|
|
<x-list>
|
|
<x-list-item title="Size" trailing="248 MB" />
|
|
<x-list-item title="Expires" trailing="in 3 days" />
|
|
<x-list-item title="Downloads" trailing="12" />
|
|
</x-list>
|
|
<x-slot:actions><x-button label="Delete" icon="delete" x-on:click="close()" /></x-slot:actions>
|
|
</x-drawer>
|
|
</div>
|
|
|
|
<div x-data="{ open: false }">
|
|
<x-button label="Bottom sheet" variant="tonal" x-on:click="open = true" />
|
|
<x-bottom-sheet title="Share via">
|
|
<x-list>
|
|
<x-list-item title="Copy link" icon="content_copy" />
|
|
<x-list-item title="Email" icon="mail" />
|
|
<x-list-item title="QR code" icon="qr_code_2" />
|
|
</x-list>
|
|
</x-bottom-sheet>
|
|
</div>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="containment" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Containment</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-card></code>, <code><x-list></code> and <code><x-list-item></code>, <code><x-divider></code>, <code><x-collapse></code>,
|
|
<code><x-modal></code>, <code><x-drawer></code> and <code><x-bottom-sheet></code>.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|