noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Write the showcase examples' layout tags as an application does

Browse Source 
Plan step 38 review: nine sections' examples wrapped their components
in <x-livewire-material::stack>, ::row and ::grid (148 tags) beside an
unprefixed <x-button>, while bars, containment and the layout pages
wrote <x-stack>. The code sample is what an application copies, and
the example component rewrites only unprefixed tags to a configured
prefix, so the namespaced ones taught a second form and escaped it.
Every example now writes <x-stack>, <x-row> and <x-grid>; a test
rejects a namespaced tag inside an example heredoc.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 06:11:08 +02:00
co-authored by Claude Opus 5
parent 5fb8fc6b8f
commit 3fb0a404db
10 changed files with 167 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/showcase/sections/sliders.blade.php
+16 -16
View File
@@ -1,55 +1,55 @@
@php
$examples = [
'Standard, discrete and disabled' => <<<'BLADE'
<x-livewire-material::grid :columns="['compact' => 1, 'expanded' => 3]" gap="space400">
<x-grid :columns="['compact' => 1, 'expanded' => 3]" gap="space400">
<x-slider label="Volume" value="40" hint="Drag the handle or use the arrow keys" />
<x-slider label="Quality" value="6" :max="10" ticks />
<x-slider label="Locked" value="70" disabled />
</x-livewire-material::grid>
</x-grid>
BLADE,
'Sizes, with an inset icon from md' => <<<'BLADE'
<x-livewire-material::stack gap="space300">
<x-stack gap="space300">
<x-slider label="Extra small (16px track)" value="30" />
<x-slider label="Small (24px)" value="45" size="sm" />
<x-slider label="Medium (40px)" value="60" size="md" icon="volume_up" />
<x-slider label="Large (56px)" value="12" size="lg" icon="light_mode" />
<x-slider label="Extra large (96px)" value="75" size="xl" icon="brightness_medium" />
</x-livewire-material::stack>
</x-stack>
BLADE,
'Range and centred' => <<<'BLADE'
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space400">
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space400">
<x-slider label="Price" :value="[20, 60]" range ticks :step="10" hint="Handles never cross" />
<x-slider label="Balance" value="15" :min="-50" :max="50" centered />
</x-livewire-material::grid>
</x-grid>
BLADE,
'Vertical' => <<<'BLADE'
{{-- M3 Expressive's second orientation. A vertical slider needs a height: it is on the wrapper, which the label and hint share. --}}
<x-livewire-material::row gap="space500" wrap align="end">
<x-row gap="space500" wrap align="end">
<x-slider label="Volume" orientation="vertical" value="40" style="height: 256px;" hint="Up and Down" />
<x-slider label="Warmth" orientation="vertical" value="6" :max="10" ticks style="height: 256px;" />
<x-slider label="Brightness" orientation="vertical" value="70" size="md" icon="light_mode" style="height: 256px;" />
<x-slider label="Always labelled" orientation="vertical" value="55" value-label="always" color="tertiary" style="height: 256px;" />
<x-slider label="Locked" orientation="vertical" value="25" disabled style="height: 256px;" />
</x-livewire-material::row>
</x-row>
BLADE,
'Colours and value labels' => <<<'BLADE'
<x-livewire-material::grid :columns="['compact' => 1, 'expanded' => 3]" gap="space400">
<x-grid :columns="['compact' => 1, 'expanded' => 3]" gap="space400">
<x-slider label="Always labelled" value="55" color="secondary" value-label="always" size="sm" />
<x-slider label="Tertiary, no label" value="35" color="tertiary" value-label="never" size="sm" />
<x-slider label="Error" :value="[30, 70]" color="error" range size="sm" />
</x-livewire-material::grid>
</x-grid>
BLADE,
'Bound with x-model' => <<<'BLADE'
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2]" gap="space400" x-data="{ volume: 25, price: [100, 300] }">
<x-livewire-material::stack gap="space100">
<x-grid :columns="['compact' => 1, 'medium' => 2]" gap="space400" x-data="{ volume: 25, price: [100, 300] }">
<x-stack gap="space100">
<x-slider label="Bound volume" x-model="volume" />
<p class="md-type-body-md md-ink-variant">volume: <span data-bound="volume" x-text="volume"></span> <x-button label="Set 80" x-on:click="volume = 80" /></p>
</x-livewire-material::stack>
<x-livewire-material::stack gap="space100">
</x-stack>
<x-stack gap="space100">
<x-slider label="Bound price" x-model="price" range :max="500" :step="25" ticks />
<p class="md-type-body-md md-ink-variant">price: <span data-bound="price" x-text="JSON.stringify(price)"></span></p>
</x-livewire-material::stack>
</x-livewire-material::grid>
</x-stack>
</x-grid>
BLADE,
];
@endphp