Andreas Reinhold / reiniandClaude Opus 5
e6f4357a2a
A status label came tonal (the colour's container) or outlined; a label that has to stand out in the colour itself fell back to the filled count, which is 16px and hidden from screen readers. solid draws the label shape in the colour's filled pair and is spoken like the others. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
101 lines
6.5 KiB
PHP
101 lines
6.5 KiB
PHP
@php
|
|
$examples = [
|
|
'Badges' => <<<'BLADE'
|
|
<span class="relative inline-flex"><x-icon name="notifications" /><x-badge floating /></span>
|
|
<span class="relative inline-flex"><x-icon name="mail" /><x-badge value="4" floating /></span>
|
|
<span class="relative inline-flex"><x-icon name="inbox" /><x-badge value="1204" max="999" floating /></span>
|
|
<x-badge value="Expired" tonal />
|
|
<x-badge value="Active" color="success" tonal />
|
|
<x-badge value="Password" color="info" tonal />
|
|
<x-badge value="Built in" color="primary" solid />
|
|
<x-badge value="Pro" outline />
|
|
<x-badge value="Draft" color="neutral" tonal />
|
|
<x-badge value="Archived" color="neutral" outline />
|
|
<span class="relative inline-flex"><x-icon name="chat" /><x-badge value="2" color="neutral" floating /></span>
|
|
<x-badge tonal color="tertiary"><x-icon name="bolt" filled class="size-3" /> Pro</x-badge>
|
|
<x-badge value="Beta" tonal color="plain" class="bg-primary-fixed text-on-primary-fixed" />
|
|
BLADE,
|
|
'Snackbars' => <<<'BLADE'
|
|
<div x-data class="flex flex-wrap items-center gap-4">
|
|
<x-button label="Saved" variant="tonal" x-on:click="materialToast('Settings saved', { type: 'success' })" />
|
|
<x-button label="With a description" variant="tonal" x-on:click="materialToast('Upload failed', { type: 'error', description: 'The file is larger than 4 GB.' })" />
|
|
<x-button label="With an action" variant="tonal" x-on:click="materialToast('Share deleted', { action: { label: 'Undo', handler: () => materialToast('Share restored', { type: 'info' }) } })" />
|
|
<x-button label="Until dismissed" variant="tonal" x-on:click="materialToast('Your storage is almost full', { type: 'warning', timeout: 0 })" />
|
|
<x-button label="Sticky, with an event" variant="tonal" x-on:click="materialToast('A new version is ready', { type: 'info', sticky: true, action: { label: 'Reload', event: 'showcase:reload' } })" x-on:showcase:reload.window="materialToast('Reloading…')" />
|
|
</div>
|
|
BLADE,
|
|
'Plain tooltips' => <<<'BLADE'
|
|
<x-button icon="content_copy" tooltip="Copy link" />
|
|
<x-button icon="qr_code_2" tooltip-bottom="Show QR code" />
|
|
<x-tooltip text="Expires in 3 days" side="right">
|
|
<span tabindex="0" class="focus-ring rounded-corner-xs type-body-md text-on-surface-variant">holiday-photos.zip</span>
|
|
</x-tooltip>
|
|
BLADE,
|
|
'Rich tooltips' => <<<'BLADE'
|
|
<x-rich-tooltip title="Expiry" text="Recipients lose access after this time. Admins can change the longest time allowed.">
|
|
<x-button icon="help" aria-label="About expiry" />
|
|
</x-rich-tooltip>
|
|
|
|
<x-rich-tooltip title="Password protection" text="Recipients need the password before they can see the files." persistent>
|
|
<x-button label="Press for details" icon="lock" variant="outlined" />
|
|
<x-slot:actions>
|
|
<x-button label="Learn more" />
|
|
</x-slot:actions>
|
|
</x-rich-tooltip>
|
|
BLADE,
|
|
'Alerts' => <<<'BLADE'
|
|
<x-alert title="Storage almost full" description="3.8 GB of 4 GB used. Old shares are deleted when they expire." color="warning" class="w-full" />
|
|
<x-alert description="Links are shown only once. Copy yours before you leave the page." class="w-full" dismissible />
|
|
<x-alert title="Upload failed" color="error" class="w-full">
|
|
The connection dropped at 64%.
|
|
<x-slot:actions><x-button label="Try again" /></x-slot:actions>
|
|
</x-alert>
|
|
<x-alert description="Settings saved." color="success" class="w-full" />
|
|
BLADE,
|
|
'Stats' => <<<'BLADE'
|
|
<div class="grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<x-stat title="Shares" value="1,204" icon="link" description="12 this week" />
|
|
<x-stat title="Files" value="8,317" icon="description" />
|
|
<x-stat title="Stored" value="3.2 GB" icon="hard_drive" description="of 4 GB" />
|
|
<x-stat title="Downloads" value="42,019" icon="download" />
|
|
</div>
|
|
BLADE,
|
|
'Empty state' => <<<'BLADE'
|
|
<x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here, with their links and when they expire." class="w-full">
|
|
<x-slot:actions>
|
|
<x-button label="Upload files" icon="upload" variant="filled" />
|
|
</x-slot:actions>
|
|
</x-empty-state>
|
|
BLADE,
|
|
'Empty state with an illustration' => <<<'BLADE'
|
|
<x-empty-state title="No routes yet" description="Draw a route on the map, or import one from a GPX file." class="w-full">
|
|
<x-slot:illustration class="text-primary">
|
|
<svg class="size-32" viewBox="0 0 120 120" fill="none" aria-hidden="true">
|
|
<circle cx="60" cy="60" r="56" class="fill-primary-container" />
|
|
<path d="M28 86C40 62 56 92 68 64S86 42 90 46" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-dasharray="1 10" />
|
|
<circle cx="28" cy="86" r="7" fill="currentColor" />
|
|
<path d="M90 18a12 12 0 0 1 12 12c0 10-12 22-12 22S78 40 78 30a12 12 0 0 1 12-12Z" class="fill-tertiary" />
|
|
<circle cx="90" cy="30" r="4" class="fill-on-tertiary" />
|
|
</svg>
|
|
</x-slot:illustration>
|
|
<x-slot:actions>
|
|
<x-button label="Draw a route" icon="route" variant="filled" />
|
|
</x-slot:actions>
|
|
</x-empty-state>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="communication" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Communication</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-badge></code>, <code><x-toast></code> (the snackbar host, fed by the <code>Toasts</code> concern or <code>materialToast()</code>),
|
|
<code><x-tooltip></code>, <code><x-rich-tooltip></code>, <code><x-alert></code>, <code><x-stat></code> and <code><x-empty-state></code>.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|