Andreas Reinhold / reiniandClaude Opus 5
13b975358f
Plan step 38 review: the Colour section dropped its "Ink and lines" group with the retired Tailwind ink names and put nothing in its place, so no page showed the md-ink-* classes that replaced them or how to draw a line. A new "Ink and lines" example writes md-ink, md-ink-variant and md-ink-quiet with their roles, the state inks, and a line as <x-divider> and an edge as <x-surface outlined>. Doc comments teach too: the Icons intro showed optical="20" alone for a 20px icon, where <x-icon size="20"> picks the cut itself; icon's header still spoke of a caller's size-5 class, the navigation rail's usage wrapped it in flex/min-w-0 utilities, and the menu item's icon-class example named a Tailwind-style text- class. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
56 lines
2.9 KiB
PHP
56 lines
2.9 KiB
PHP
<x-livewire-material::stack
|
|
as="section"
|
|
id="icons"
|
|
gap="space300"
|
|
x-data="{
|
|
names: [],
|
|
query: '',
|
|
filled: false,
|
|
optical20: false,
|
|
async load() {
|
|
this.names = await (await fetch('{{ route('livewire-material.symbols', [], false) }}')).json();
|
|
},
|
|
get matches() {
|
|
const query = this.query.trim().toLowerCase().replaceAll(' ', '_');
|
|
|
|
return (query === '' ? this.names : this.names.filter((name) => name.includes(query))).slice(0, 120);
|
|
},
|
|
}"
|
|
x-intersect.once="load()"
|
|
>
|
|
<h2 class="md-visually-hidden">Icons</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
Every Material Symbol (Rounded, 400, grade 0) as <code><x-icon name="…" /></code>, outlined or <code>filled</code>,
|
|
drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin —
|
|
the 20 cut, which <code>size</code> picks on its own: <code><x-icon name="…" size="20" /></code>.
|
|
</p>
|
|
|
|
<p class="md-type-body-md md-ink-variant" data-test="when-to-use">
|
|
<code>filled</code> means active or selected; <code>size</code> for any size but 24 (20 or less draws the 20 cut, and <code>optical</code> chooses a cut by hand); one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden.
|
|
</p>
|
|
|
|
<x-livewire-material::row gap="space200" wrap align="center">
|
|
<x-livewire-material::input icon="search" type="search" x-model.debounce.150ms="query" placeholder="Search {{ number_format(count(\NoNameWeb\LivewireMaterial\Support\SvgFile::symbolNames())) }} symbols" full />
|
|
<x-livewire-material::checkbox label="Filled" x-model="filled" />
|
|
<x-livewire-material::checkbox label="Optical size 20" x-model="optical20" />
|
|
</x-livewire-material::row>
|
|
|
|
<x-livewire-material::grid as="ul" min-item="120px" gap="space100">
|
|
<template x-for="name in matches" x-bind:key="name">
|
|
<x-livewire-material::surface as="li" level="surface-container" corner="md" padding="space100">
|
|
<x-livewire-material::stack gap="space100" align="center">
|
|
<span
|
|
data-md-showcase-icon-mask
|
|
x-bind:data-md-showcase-icon-size="optical20 ? '20' : null"
|
|
x-bind:style="{
|
|
mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg${optical20 ? '?optical=20' : ''}') center / contain no-repeat`,
|
|
}"
|
|
></span>
|
|
<code class="md-type-label-sm md-ink-variant md-text-center" x-text="name"></code>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::surface>
|
|
</template>
|
|
</x-livewire-material::grid>
|
|
</x-livewire-material::stack>
|