Andreas Reinhold / reiniandClaude Opus 5
acd6ba21ae
Plan step 35: <x-feed min-item gap>, following the reference's feed rules - one column below medium, then as many equal columns of at least the minimum item width as the feed has room for, 24px apart from medium, items in their source order. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
50 lines
2.3 KiB
PHP
50 lines
2.3 KiB
PHP
{{-- M3's feed canonical layout: cards or items to browse, in columns that multiply as the room
|
||
grows — news, photos, posts.
|
||
|
||
<x-feed min-item="280px">
|
||
@foreach ($posts as $post)
|
||
<x-card wire:key="post-{{ $post->id }}" :title="$post->title">…</x-card>
|
||
@endforeach
|
||
</x-feed>
|
||
|
||
M3's feed rules, row by row (docs/reference/m3/foundations-supplement.md § Canonical layouts →
|
||
Feed): a compact window (below 600px) stacks one card per row at the full width of the pane;
|
||
medium (600–839) splits into equal-width columns; expanded, large and extra-large have more
|
||
columns than medium, each usually wider. So below 600px it is one column, and from 600px it
|
||
fits as many equal columns of at least `min-item` as the feed has room for — more on a wider
|
||
window, and wider until another fits. M3 publishes no minimum or count for the web, so
|
||
`min-item` (`240px` by default; `280px`, `18rem`, `20ch` or a number of px) is yours to set
|
||
by the content. It follows the feed's own width, so a feed inside a pane beside another
|
||
stays sensible.
|
||
|
||
The items keep their order, which M3 makes the reading order ("item order is determined by
|
||
position"). The space between them is M3's spacer, 16px on a compact window and 24px from
|
||
medium, unless `gap` names a spacing token (`space25` … `space900`; an unknown name is no
|
||
gap). A card that should span two columns can say so in its own `style`.
|
||
|
||
It takes `as` (`div` by default; `ul` for a list of items, with `li` children), `hide-below`
|
||
and `hide-from` like every layout component, and the caller's `class` and `style` land on it
|
||
untouched. Drawn by resources/css/layout/feed.css. --}}
|
||
|
||
@props([
|
||
'as' => null,
|
||
'minItem' => null,
|
||
'gap' => null,
|
||
'hideBelow' => null,
|
||
'hideFrom' => null,
|
||
])
|
||
|
||
@php
|
||
$layout = \NoNameWeb\LivewireMaterial\Support\Layout::class;
|
||
$element = $layout::element($as);
|
||
$minItem = $layout::length($minItem) ?? '240px';
|
||
|
||
$attributes = $attributes->merge(array_filter([
|
||
'data-md-feed' => true,
|
||
'data-md-gap' => $layout::spacing($gap),
|
||
'style' => "--md-min-item: {$minItem};",
|
||
] + $layout::visibility($hideBelow, $hideFrom), fn ($value): bool => $value !== null));
|
||
@endphp
|
||
|
||
<{{ $element }} {{ $attributes }}>{{ $slot }}</{{ $element }}>
|