Andreas Reinhold / reiniandClaude Opus 5
02d908c526
Plan step 19, containment.md C-06, C-17 and C-20. The whole box scrolled, so a long dialog scrolled its headline and its buttons away; the header, the body and the action row are now separate rows of the flex column, each carrying the 24dp padding the box used to hold, and only the body scrolls. `separator` draws the divider under the header and above the actions, where it now stays put. The full-screen header is M3's 56dp (was 64) and its action bar 56 (was ~72). New `alert` prop for M3's "on web, basic dialogs should have the alert dialog role", and a `subtitle` is always the dialog's `aria-describedby`. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
147 lines
7.8 KiB
PHP
147 lines
7.8 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,
|
|
'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>
|