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
61 lines
3.0 KiB
PHP
61 lines
3.0 KiB
PHP
@php
|
|
$examples = [
|
|
'Linear: determinate and indeterminate' => <<<'BLADE'
|
|
<x-progress value="40" label="Linear" />
|
|
<x-progress label="Linear, indeterminate" />
|
|
BLADE,
|
|
'Linear wavy' => <<<'BLADE'
|
|
<x-progress value="60" wavy label="Wavy" />
|
|
<x-progress wavy label="Wavy, indeterminate" />
|
|
BLADE,
|
|
'Thick' => <<<'BLADE'
|
|
<x-progress value="70" thick label="Thick" />
|
|
<x-progress value="55" wavy thick label="Thick wavy" />
|
|
<x-progress wavy thick label="Thick wavy, indeterminate" />
|
|
BLADE,
|
|
'Circular' => <<<'BLADE'
|
|
<x-progress value="65" circular label="Circular" />
|
|
<x-progress circular label="Circular, indeterminate" />
|
|
<x-progress value="65" circular wavy label="Circular wavy" />
|
|
<x-progress circular wavy label="Circular wavy, indeterminate" />
|
|
<x-progress value="65" circular thick label="Circular thick" />
|
|
<x-progress value="65" circular wavy thick label="Circular wavy thick" />
|
|
<x-progress circular wavy label="Circular wavy, 96px" style="width: 96px; height: 96px;" />
|
|
BLADE,
|
|
'Colours' => <<<'BLADE'
|
|
<x-progress value="35" color="secondary" label="Secondary" />
|
|
<x-progress value="50" wavy color="tertiary" label="Tertiary" />
|
|
<x-progress value="65" color="error" label="Error" />
|
|
<x-progress value="80" wavy color="success" label="Success" />
|
|
<x-progress value="45" color="warning" label="Warning" />
|
|
<x-progress value="55" wavy color="info" label="Info" />
|
|
BLADE,
|
|
'Following a value in the browser (bind)' => <<<'BLADE'
|
|
<x-stack gap="space300" x-data="{ progress: 30 }">
|
|
<x-button label="Set a random value" variant="tonal" x-on:click="progress = Math.round(Math.random() * 100)" />
|
|
<x-progress bind="progress" label="Bound" />
|
|
<x-progress bind="progress" wavy label="Bound wavy" />
|
|
<x-row gap="space300">
|
|
<x-progress bind="progress" circular label="Bound circular" />
|
|
<x-progress bind="progress" circular wavy label="Bound circular wavy" />
|
|
</x-row>
|
|
</x-stack>
|
|
BLADE,
|
|
];
|
|
|
|
// Every example stacks except Circular, which lays several indicators side by side in a row.
|
|
$rows = ['Circular'];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="progress" gap="space300">
|
|
<h2 class="md-visually-hidden">Progress</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
<code><x-progress></code>: M3 Expressive's linear and circular progress indicators, flat or wavy, determinate or indeterminate.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code :stack="! in_array($title, $rows, true)" />
|
|
@endforeach
|
|
</x-livewire-material::stack>
|