Andreas Reinhold / reiniandClaude Sonnet 5
067626c52e
Plan step 38 (last batch): only two of the previous batch's three call sites actually need a plain unlayered class for their demo width — <x-input> forwards `style` to the raw <input>, not the field wrapper that is sized, and <x-datepicker> forwards neither, only `class`, `wire:key` and `x-model` — so .showcase-w-sm and .showcase-w-xs stay. <x-slider> does forward `style` to its root, so its vertical demo's shared height is one now instead of the .showcase-slider-vertical class. .showcase-w-narrow stays a class on purpose rather than an inline style: fields.blade.php's "Narrower" input demonstrates an application's own unlayered rule beating the package's layered default, and an inline style would win regardless of layers, proving nothing. The header explains all three. StylesheetsTest gains showcase.css's own shape check — the same rule every package stylesheet passes (header, layer statement, plain imports, no Tailwind directive, breakpoints only at M3's four) — with its three documented unlayered exceptions as the one allowed gap. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
68 lines
4.3 KiB
PHP
68 lines
4.3 KiB
PHP
@php
|
|
$examples = [
|
|
'Standard, discrete and disabled' => <<<'BLADE'
|
|
<x-livewire-material::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>
|
|
BLADE,
|
|
'Sizes, with an inset icon from md' => <<<'BLADE'
|
|
<x-livewire-material::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>
|
|
BLADE,
|
|
'Range and centred' => <<<'BLADE'
|
|
<x-livewire-material::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>
|
|
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-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>
|
|
BLADE,
|
|
'Colours and value labels' => <<<'BLADE'
|
|
<x-livewire-material::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>
|
|
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-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-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>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<x-livewire-material::stack as="section" id="sliders" gap="space300">
|
|
<h2 class="md-type-headline-md">Sliders</h2>
|
|
|
|
<p class="md-type-body-md md-ink-variant">
|
|
<code><x-slider></code>: M3 Expressive's slider on native range inputs — standard, range and centred, horizontal or vertical, five sizes, ticks, value labels and an inset icon.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code :stack="true" />
|
|
@endforeach
|
|
</x-livewire-material::stack>
|