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
140 lines
7.5 KiB
PHP
140 lines
7.5 KiB
PHP
@php
|
|
$examples = [
|
|
'Variants' => <<<'BLADE'
|
|
<x-button label="Filled" variant="filled" />
|
|
<x-button label="Tonal" variant="tonal" />
|
|
<x-button label="Outlined" variant="outlined" />
|
|
<x-button label="Elevated" variant="elevated" />
|
|
<x-button label="Text" />
|
|
BLADE,
|
|
'Sizes, with an icon' => <<<'BLADE'
|
|
<x-button label="Extra small" icon="upload" variant="filled" size="xs" />
|
|
<x-button label="Small" icon="upload" variant="filled" />
|
|
<x-button label="Medium" icon="upload" variant="filled" size="md" />
|
|
<x-button label="Large" icon="upload" variant="filled" size="lg" />
|
|
<x-button label="Extra large" icon="upload" variant="filled" size="xl" />
|
|
BLADE,
|
|
'Square, and pressed (hold the pointer down)' => <<<'BLADE'
|
|
<x-button label="Round" variant="tonal" size="md" />
|
|
<x-button label="Square" variant="tonal" size="md" shape="square" />
|
|
BLADE,
|
|
'Colours' => <<<'BLADE'
|
|
<x-button label="Primary" primary />
|
|
<x-button label="Secondary" variant="filled" color="secondary" />
|
|
<x-button label="Tertiary" variant="filled" color="tertiary" />
|
|
<x-button label="Delete" icon="delete" danger />
|
|
<x-button label="Take down" caution />
|
|
<x-button label="Success" variant="tonal" color="success" />
|
|
<x-button label="Info" variant="outlined" color="info" />
|
|
BLADE,
|
|
'Toggle buttons' => <<<'BLADE'
|
|
<x-button label="Filled" variant="filled" :selected="false" />
|
|
<x-button label="Selected" variant="filled" :selected="true" />
|
|
<x-button label="Tonal" variant="tonal" :selected="false" />
|
|
<x-button label="Selected" variant="tonal" :selected="true" />
|
|
<x-button label="Outlined" variant="outlined" :selected="false" />
|
|
<x-button label="Selected" variant="outlined" :selected="true" />
|
|
BLADE,
|
|
'Icon buttons, and their tooltips' => <<<'BLADE'
|
|
<x-button icon="favorite" tooltip="Standard" />
|
|
<x-button icon="favorite" tooltip="Filled" variant="filled" />
|
|
<x-button icon="favorite" tooltip="Tonal" variant="tonal" />
|
|
<x-button icon="favorite" tooltip="Outlined" variant="outlined" />
|
|
<x-button icon="favorite" tooltip="Selected" variant="filled" :selected="true" />
|
|
<x-button icon="favorite" tooltip="Selected, square" variant="tonal" shape="square" :selected="true" />
|
|
BLADE,
|
|
'Icon button sizes and widths' => <<<'BLADE'
|
|
<x-button icon="share" tooltip="XS narrow" variant="tonal" size="xs" width="narrow" />
|
|
<x-button icon="share" tooltip="S" variant="tonal" />
|
|
<x-button icon="share" tooltip="M wide" variant="tonal" size="md" width="wide" />
|
|
<x-button icon="share" tooltip="L" variant="tonal" size="lg" />
|
|
<x-button icon="share" tooltip="XL wide" variant="tonal" size="xl" width="wide" />
|
|
BLADE,
|
|
'Links and disabled' => <<<'BLADE'
|
|
<x-button label="Opens a page" link="#buttons" variant="outlined" />
|
|
<x-button label="Leaves the site" link="https://m3.material.io" external icon-right="open_in_new" />
|
|
<x-button label="Disabled" variant="filled" disabled />
|
|
<x-button label="Disabled link" link="#buttons" variant="tonal" disabled />
|
|
<x-button icon="delete" tooltip="Disabled" variant="outlined" disabled />
|
|
BLADE,
|
|
'Loading indicator' => <<<'BLADE'
|
|
<x-loading />
|
|
<x-loading contained />
|
|
<x-loading class="size-24 text-tertiary" label="Uploading" />
|
|
<x-loading contained class="size-8" />
|
|
BLADE,
|
|
'Button groups: standard (press a button) and connected' => <<<'BLADE'
|
|
<x-button-group label="Standard" size="md">
|
|
<x-button label="Day" variant="tonal" size="md" />
|
|
<x-button label="Week" variant="tonal" size="md" />
|
|
<x-button label="Month" variant="tonal" size="md" />
|
|
</x-button-group>
|
|
|
|
<x-button-group label="Formatting" connected>
|
|
<x-button icon="format_bold" aria-label="Bold" variant="tonal" :selected="true" />
|
|
<x-button icon="format_italic" aria-label="Italic" variant="tonal" :selected="false" />
|
|
<x-button icon="format_underlined" aria-label="Underline" variant="tonal" :selected="false" />
|
|
</x-button-group>
|
|
BLADE,
|
|
'A choice as a connected group' => <<<'BLADE'
|
|
<div x-data="{ theme: 'system', days: ['mon'] }" class="grid w-full gap-6 md:grid-cols-2">
|
|
<x-group label="Theme" name="showcase-theme" x-model="theme" :options="[
|
|
['id' => 'light', 'name' => 'Light', 'icon' => 'light_mode'],
|
|
['id' => 'dark', 'name' => 'Dark', 'icon' => 'dark_mode'],
|
|
['id' => 'system', 'name' => 'System', 'icon' => 'computer'],
|
|
]" />
|
|
|
|
<x-group label="Days" name="showcase-days" x-model="days" multiple variant="outlined" hint="Choose any" :options="[
|
|
['id' => 'mon', 'name' => 'Mon'],
|
|
['id' => 'tue', 'name' => 'Tue'],
|
|
['id' => 'wed', 'name' => 'Wed'],
|
|
['id' => 'thu', 'name' => 'Thu', 'disabled' => true],
|
|
]" />
|
|
</div>
|
|
BLADE,
|
|
'Split buttons' => <<<'BLADE'
|
|
<x-split-button label="Download all" icon="download" menu-label="Download options">
|
|
<x-menu-item label="As a ZIP" icon="folder_zip" />
|
|
<x-menu-item label="One by one" icon="download" />
|
|
</x-split-button>
|
|
|
|
<x-split-button label="Share" variant="tonal" size="md" menu-label="Share options">
|
|
<x-menu-item label="Copy link" icon="content_copy" />
|
|
<x-menu-item label="Email" icon="mail" />
|
|
</x-split-button>
|
|
|
|
<x-split-button label="Save" variant="outlined" size="xs" menu-label="Save options">
|
|
<x-menu-item label="Save as draft" />
|
|
</x-split-button>
|
|
BLADE,
|
|
'FABs and extended FABs' => <<<'BLADE'
|
|
<x-fab icon="add" tooltip="New share" />
|
|
<x-fab icon="edit" size="md" color="secondary" tooltip="Edit" />
|
|
<x-fab icon="upload" size="lg" color="tertiary" tooltip="Upload" />
|
|
<x-fab icon="add" label="New share" />
|
|
<x-fab icon="upload" label="Upload" size="md" variant="filled" />
|
|
BLADE,
|
|
'FAB menu' => <<<'BLADE'
|
|
<div class="flex h-72 w-full items-end justify-end">
|
|
<x-fab-menu label="New">
|
|
<x-fab-menu-item label="Upload files" icon="upload_file" />
|
|
<x-fab-menu-item label="Upload a folder" icon="drive_folder_upload" />
|
|
<x-fab-menu-item label="Paste text" icon="content_paste" />
|
|
</x-fab-menu>
|
|
</div>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="buttons" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Buttons</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-button></code>: label buttons, icon buttons and toggles in M3 Expressive's five sizes.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|