Andreas Reinhold / reiniandClaude Fable 5.1
b1642aed1c
Plan step 15. Every `sm:`/`md:`/`lg:`/`xl:` in the components, the showcase (sections, layout, shell) and the pagination and error views becomes the M3 window size class the audits' breakpoint maps prescribe: the full-screen dialog, the FAB, the snackbar's width, `radio inline`, the section picker and the page numbers move from 640px to `medium` (600px, M3's compact boundary, N-07 / C-07 / IN-28); `button responsive` moves from 1024px to `expanded` (840px); `section-nav`'s grid-to-row switch from 1280px to `large` (1200px, N-07); and `drawer pane` from 1280px to `expanded`, where M3 shows two panes for list-detail (C-07). The pane's default width is now 360dp, M3's fixed supporting pane at expanded. Showcase example grids take two columns from `medium` and three or more from `expanded`; the showcase's own theme picker swaps at `expanded`, the nearest class boundary to the 768px it used (no M3 rule applies to it). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
45 lines
2.2 KiB
PHP
45 lines
2.2 KiB
PHP
@php
|
|
$examples = [
|
|
'12 and 24 hours, outlined and filled' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 medium:grid-cols-2">
|
|
<div class="grid content-start gap-4">
|
|
<x-timepicker label="Meeting starts" value="09:30" hint="The locale's clock" />
|
|
<x-timepicker label="Pick-up" value="17:15" format="12" icon="local_shipping" clearable />
|
|
<x-timepicker label="Disabled" value="12:00" disabled />
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4">
|
|
<x-timepicker variant="filled" label="Alarm" value="06:45" format="24" icon="alarm" />
|
|
<x-timepicker variant="filled" label="Reminder" format="24" hint="Opens at the current time" />
|
|
<x-timepicker variant="filled" label="Required" format="24" required />
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
'Steps and limits' => <<<'BLADE'
|
|
<div class="grid w-full gap-6 medium:grid-cols-2">
|
|
<div class="grid content-start gap-4">
|
|
<x-timepicker label="Appointment" value="10:00" format="24" step="15" min="08:00" max="17:30" hint="Quarter hours from 08:00 to 17:30" />
|
|
<x-timepicker label="Night shift starts" value="23:00" format="24" min="22:00" max="06:00" hint="From 22:00, across midnight, to 06:00" />
|
|
</div>
|
|
|
|
<div class="grid content-start gap-4" x-data="{ time: '14:05' }">
|
|
<x-timepicker label="Bound with x-model" x-model="time" format="12" step="5" />
|
|
<p class="type-body-md text-on-surface-variant">Stored as <code x-text="time ?? 'null'"></code></p>
|
|
</div>
|
|
</div>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="timepickers" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Time pickers</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-timepicker></code> — M3's dial and input time picker in a modal dialog, opened from a text field.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|