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
57 lines
2.7 KiB
PHP
57 lines
2.7 KiB
PHP
@php
|
|
$examples = [
|
|
'Data table' => <<<'BLADE'
|
|
<div style="width: 100%; overflow-x: auto;">
|
|
<x-table>
|
|
<thead>
|
|
<tr>
|
|
<x-sort-header column="name" :sort-by="['column' => 'name', 'direction' => 'asc']">Name</x-sort-header>
|
|
<x-sort-header column="size" :sort-by="['column' => 'name', 'direction' => 'asc']" class="md-text-end">Size</x-sort-header>
|
|
<th>Expires</th>
|
|
<th><span class="md-visually-hidden">Actions</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr data-md-list-row>
|
|
<td><a href="#data" data-md-list-open>contract.pdf</a></td>
|
|
<td class="md-text-end md-tabular">1.2 MB</td>
|
|
<td>in 1 hour</td>
|
|
<td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
|
|
</tr>
|
|
<tr data-md-list-row aria-selected="true">
|
|
<td><a href="#data" data-md-list-open>design-review.mp4</a></td>
|
|
<td class="md-text-end md-tabular">3.4 GB</td>
|
|
<td>in 7 days</td>
|
|
<td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
|
|
</tr>
|
|
<tr data-md-list-row>
|
|
<td><a href="#data" data-md-list-open>holiday-photos.zip</a></td>
|
|
<td class="md-text-end md-tabular">248 MB</td>
|
|
<td>in 3 days</td>
|
|
<td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
|
|
</tr>
|
|
</tbody>
|
|
</x-table>
|
|
</div>
|
|
BLADE,
|
|
'Pagination' => <<<'BLADE'
|
|
<x-stack gap="space300">
|
|
{{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '#data']))->links() }}
|
|
{{ (new \Illuminate\Pagination\Paginator(range(1, 11), 10, 2, ['path' => '#data']))->links() }}
|
|
</x-stack>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="data" gap="space300">
|
|
<h2 class="md-visually-hidden">Data</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
<code><x-table></code>, <code><x-sort-header></code>, and Laravel's and Livewire's paginators.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</x-livewire-material::stack>
|