Andreas Reinhold / reiniandClaude Opus 5
5e58dd5449
Plan step 19, containment.md C-11. The full-screen layout was another horizontal row with a 28px corner and a mask, where M3's "shows one edge-to-edge large item at a time and scrolls vertically". It is now a vertical scroll-snap column: items fill the row with no corner and no mask, 16dp apart, no end padding, the previous/next buttons point up and down and the arrow keys are Up and Down. The row is capped at the 840px medium window, which with the portrait rule in the header comment is as far as CSS can hold M3's "compact and medium, portrait only". The ported FullScreenCarouselStrategy keylines go with it: nothing measures them any more. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
88 lines
4.6 KiB
PHP
88 lines
4.6 KiB
PHP
@php
|
|
$examples = [
|
|
'Multi-browse' => <<<'BLADE'
|
|
<x-carousel label="Shapes" item-width="220">
|
|
@foreach ([
|
|
['Cookie', 'cookie-9', 'bg-primary-container text-on-primary-container'],
|
|
['Clover', 'clover-4', 'bg-tertiary-container text-on-tertiary-container'],
|
|
['Burst', 'soft-burst', 'bg-secondary-container text-on-secondary-container'],
|
|
['Flower', 'flower', 'bg-primary text-on-primary'],
|
|
['Gem', 'gem', 'bg-surface-container-highest text-primary'],
|
|
['Puffy', 'puffy', 'bg-tertiary text-on-tertiary'],
|
|
['Sunny', 'sunny', 'bg-secondary text-on-secondary'],
|
|
['Heart', 'heart', 'bg-inverse-surface text-inverse-primary'],
|
|
] as [$name, $shape, $colours])
|
|
<x-carousel-item :label="$name">
|
|
<div class="grid size-full place-items-center {{ $colours }}">
|
|
<x-shape :name="$shape" class="size-36" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Hero, centred' => <<<'BLADE'
|
|
<x-carousel layout="hero" centered label="Featured" height="280">
|
|
@foreach ([
|
|
['Arch', 'arch', 'bg-secondary-container text-on-secondary-container'],
|
|
['Pentagon', 'pentagon', 'bg-primary-container text-on-primary-container'],
|
|
['Boom', 'soft-boom', 'bg-tertiary-container text-on-tertiary-container'],
|
|
['Bun', 'bun', 'bg-surface-container-highest text-secondary'],
|
|
['Ghost', 'ghostish', 'bg-primary text-on-primary'],
|
|
] as [$name, $shape, $colours])
|
|
<x-carousel-item :label="$name">
|
|
<div class="grid size-full place-items-center {{ $colours }}">
|
|
<x-shape :name="$shape" class="size-48" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
'Uncontained' => <<<'BLADE'
|
|
<x-carousel layout="uncontained" label="Albums" item-width="180" height="180">
|
|
@foreach ([
|
|
['cookie-6', 'bg-tertiary-container text-on-tertiary-container'],
|
|
['diamond', 'bg-primary-container text-on-primary-container'],
|
|
['clover-8', 'bg-secondary-container text-on-secondary-container'],
|
|
['pixel-circle', 'bg-surface-container-highest text-tertiary'],
|
|
['burst', 'bg-secondary text-on-secondary'],
|
|
['oval', 'bg-primary text-on-primary'],
|
|
] as [$shape, $colours])
|
|
<x-carousel-item>
|
|
<div class="grid size-full place-items-center {{ $colours }}">
|
|
<x-shape :name="$shape" class="size-24" />
|
|
</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', 'bg-linear-to-br from-primary-container to-tertiary-container text-on-primary-container'],
|
|
['Noon', 'clam-shell', 'bg-linear-to-br from-secondary-container to-primary-container text-on-secondary-container'],
|
|
['Night', 'puffy-diamond', 'bg-linear-to-br from-inverse-surface to-primary text-inverse-primary'],
|
|
] as [$name, $shape, $colours])
|
|
<x-carousel-item :label="$name">
|
|
<div class="grid size-full place-items-center {{ $colours }}">
|
|
<x-shape :name="$shape" class="size-40" />
|
|
</div>
|
|
</x-carousel-item>
|
|
@endforeach
|
|
</x-carousel>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="carousel" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Carousel</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-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
|
|
</section>
|