Andreas Reinhold / reiniandClaude Opus 5
ebdcdb82b5
Plan step 38 review: the component sections' code samples, which an application copies, carried 60 data-md-showcase-* hooks that only showcase.css draws (a sized loading indicator, the plain badge's own colours, a bordered bar frame, the navigation demos' frames, a table's scroll wrapper...), so a copied sample did nothing in the application. They now write what an application has: <x-surface outlined corner> for a frame and a line, <x-row> for the FAB menu's corner, and an inline style from the tokens for a size, a scroll box or a colour, as the Containment batch already did. The side sheet demo takes align="stretch", which holds in both of <x-row stack-below>'s modes, instead of a hook that undid align="start" once stacked. The menu icon colours go through icon-class with two unlayered application-like classes, which the sample's comment names, and the fields' and date picker's widths are inline styles now that style reaches their roots. The radio hint said "from sm"; it is medium. showcase.css keeps only the frame and the foundation specimens; its header describes the file instead of the batches that wrote it. The tests reject a showcase hook or a class outside md-* and the named application classes in any example, a showcase.css selector outside its own hooks, and a hook no showcase view renders. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
81 lines
4.8 KiB
PHP
81 lines
4.8 KiB
PHP
@php
|
|
$examples = [
|
|
'Assist chips' => <<<'BLADE'
|
|
<x-row gap="space100" wrap align="center" x-data>
|
|
<x-chip label="Add to calendar" icon="event" x-on:click="materialToast('Added to your calendar')" />
|
|
<x-chip label="Directions" icon="directions" link="#chips" />
|
|
<x-chip label="Share" icon="share" elevated tooltip="Share this file" />
|
|
<x-chip label="Material 3 guidelines" icon-right="open_in_new" link="https://m3.material.io/components/chips" external />
|
|
<x-chip label="Unavailable" icon="block" disabled />
|
|
<x-chip label="Unavailable" icon="block" elevated disabled />
|
|
</x-row>
|
|
BLADE,
|
|
'Filter chips' => <<<'BLADE'
|
|
<x-stack gap="space300" x-data="{ kinds: ['photos'] }">
|
|
<x-chip-set label="File types" hint="Show only these kinds of file">
|
|
<x-chip type="filter" label="Photos" value="photos" x-model="kinds" />
|
|
<x-chip type="filter" label="Documents" value="documents" x-model="kinds" />
|
|
<x-chip type="filter" label="Archives" value="archives" x-model="kinds" />
|
|
<x-chip type="filter" label="Video" value="video" x-model="kinds" disabled />
|
|
</x-chip-set>
|
|
|
|
<x-chip-set label="Elevated, with icons">
|
|
<x-chip type="filter" label="Starred" icon="star" name="starred" :selected="true" elevated />
|
|
<x-chip type="filter" label="Shared with me" icon="group" name="shared" elevated />
|
|
<x-chip type="filter" label="Expiring" name="expiring" icon-right="arrow_drop_down" />
|
|
<x-chip type="filter" label="Archived" name="archived" :selected="true" disabled />
|
|
</x-chip-set>
|
|
</x-stack>
|
|
BLADE,
|
|
'Input chips' => <<<'BLADE'
|
|
<x-stack gap="space300" x-data="{ recipients: ['anna@example.com', 'ben@example.com', 'chiara@example.com'] }">
|
|
<x-chip-set label="Recipients" hint="Backspace or Delete removes the focused chip">
|
|
<template x-for="recipient in recipients" :key="recipient">
|
|
<x-chip type="input" icon="mail" removable remove="recipients = recipients.filter((other) => other !== recipient)"><span x-text="recipient"></span></x-chip>
|
|
</template>
|
|
</x-chip-set>
|
|
|
|
<x-chip-set label="People">
|
|
<x-chip type="input" label="Anna Müller" avatar="AM" removable />
|
|
<x-chip type="input" label="Ben Keller" avatar="BK" :selected="true" removable />
|
|
<x-chip type="input" label="contract.pdf" icon="picture_as_pdf" x-on:click="materialToast('contract.pdf')" />
|
|
<x-chip type="input" label="Chiara Rossi" avatar="CR" removable disabled />
|
|
</x-chip-set>
|
|
</x-stack>
|
|
BLADE,
|
|
'Suggestion chips' => <<<'BLADE'
|
|
<x-chip-set label="Suggested replies">
|
|
<x-chip type="suggestion" label="Sounds good" />
|
|
<x-chip type="suggestion" label="Can we talk tomorrow?" />
|
|
<x-chip type="suggestion" label="Send the files" icon="attach_file" elevated />
|
|
<x-chip type="suggestion" label="Not now" disabled />
|
|
</x-chip-set>
|
|
BLADE,
|
|
'A set that scrolls' => <<<'BLADE'
|
|
{{-- M3 asks an overflowing chip row for a visible affordance: the edge it can still scroll towards fades, and on a mouse a button sits over it. --}}
|
|
<div style="width: 100%; max-width: 384px;">
|
|
<x-chip-set label="Sort and filter" hint="Drag, or use the arrow keys" scroll>
|
|
<x-chip type="filter" label="Newest" name="sort[]" value="newest" :selected="true" />
|
|
<x-chip type="filter" label="Largest" name="sort[]" value="largest" />
|
|
<x-chip type="filter" label="Expiring soon" name="sort[]" value="expiring" />
|
|
<x-chip type="filter" label="Password protected" name="sort[]" value="protected" />
|
|
<x-chip type="filter" label="Downloaded" name="sort[]" value="downloaded" />
|
|
<x-chip type="filter" label="Never opened" name="sort[]" value="unopened" />
|
|
</x-chip-set>
|
|
</div>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="chips" gap="space300">
|
|
<h2 class="md-visually-hidden">Chips</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
<code><x-chip></code> — assist, filter, input and suggestion — and <code><x-chip-set></code>.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</x-livewire-material::stack>
|