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
106 lines
7.6 KiB
PHP
106 lines
7.6 KiB
PHP
@php
|
|
$examples = [
|
|
'Multi-browse' => <<<'BLADE'
|
|
<x-carousel label="Shapes" item-width="220">
|
|
@foreach ([
|
|
['Cookie', 'cookie-9', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
|
|
['Clover', 'clover-4', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
|
|
['Burst', 'soft-burst', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
|
|
['Flower', 'flower', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
|
|
['Gem', 'gem', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
|
|
['Puffy', 'puffy', 'background-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary);'],
|
|
['Sunny', 'sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
|
|
['Heart', 'heart', 'background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary);'],
|
|
] as [$name, $shape, $colours])
|
|
<x-carousel-item :label="$name">
|
|
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
|
|
<x-shape :name="$shape" size="144" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Hero, centred' => <<<'BLADE'
|
|
<x-carousel layout="hero" centered label="Featured" height="280">
|
|
@foreach ([
|
|
['Arch', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
|
|
['Pentagon', 'pentagon', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
|
|
['Boom', 'soft-boom', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
|
|
['Bun', 'bun', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-secondary);'],
|
|
['Ghost', 'ghostish', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
|
|
] as [$name, $shape, $colours])
|
|
<x-carousel-item :label="$name">
|
|
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
|
|
<x-shape :name="$shape" size="192" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Uncontained' => <<<'BLADE'
|
|
<x-carousel layout="uncontained" label="Albums" item-width="180" height="180">
|
|
@foreach ([
|
|
['cookie-6', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
|
|
['diamond', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
|
|
['clover-8', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
|
|
['pixel-circle', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-tertiary);'],
|
|
['burst', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
|
|
['oval', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
|
|
] as [$shape, $colours])
|
|
<x-carousel-item>
|
|
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
|
|
<x-shape :name="$shape" size="96" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Uncontained, multi-aspect ratio: every item keeps its own shape' => <<<'BLADE'
|
|
<x-carousel layout="multi-aspect" label="Clips" height="200">
|
|
@foreach ([
|
|
['16/9', 'pill', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
|
|
['1/1', 'cookie-12', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
|
|
['9/16', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
|
|
['4/3', 'slanted', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
|
|
['3/4', 'bun', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
|
|
['16/9', 'very-sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
|
|
] as [$aspect, $shape, $colours])
|
|
<x-carousel-item :aspect="$aspect" :label="$aspect">
|
|
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
|
|
<x-shape :name="$shape" size="80" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Full-screen: one item at a time, scrolled down' => <<<'BLADE'
|
|
<x-carousel layout="full-screen" label="Wallpapers" height="320" :controls="true">
|
|
@foreach ([
|
|
['Morning', 'very-sunny', 'background: linear-gradient(to bottom right, var(--md-sys-color-primary-container), var(--md-sys-color-tertiary-container)); color: var(--md-sys-color-on-primary-container);'],
|
|
['Noon', 'clam-shell', 'background: linear-gradient(to bottom right, var(--md-sys-color-secondary-container), var(--md-sys-color-primary-container)); color: var(--md-sys-color-on-secondary-container);'],
|
|
['Night', 'puffy-diamond', 'background: linear-gradient(to bottom right, var(--md-sys-color-inverse-surface), var(--md-sys-color-primary)); color: var(--md-sys-color-inverse-primary);'],
|
|
] as [$name, $shape, $colours])
|
|
<x-carousel-item :label="$name">
|
|
<div style="display: grid; place-items: center; width: 100%; height: 100%; {{ $colours }}">
|
|
<x-shape :name="$shape" size="160" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="carousel" gap="space300">
|
|
<h2 class="md-visually-hidden">Carousel</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
<code><x-carousel></code> and <code><x-carousel-item></code>: items that change size between M3's keylines as they scroll.
|
|
Swipe, scroll with Shift and the wheel, or tab to an item and use the arrow keys.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code stack />
|
|
@endforeach
|
|
</x-livewire-material::stack>
|