Merge branch 'worktree-agent-a3082a7e6ef1bee94'
This commit is contained in:
Andreas Reinhold / reini
@@ -55,6 +55,24 @@
|
||||
@endforeach
|
||||
</x-carousel>
|
||||
BLADE,
|
||||
'Uncontained, multi-aspect ratio: every item keeps its own shape' => <<<'BLADE'
|
||||
<x-carousel layout="multi-aspect" label="Clips" height="200">
|
||||
@foreach ([
|
||||
['16/9', 'pill', 'bg-primary-container text-on-primary-container'],
|
||||
['1/1', 'cookie-12', 'bg-tertiary-container text-on-tertiary-container'],
|
||||
['9/16', 'arch', 'bg-secondary-container text-on-secondary-container'],
|
||||
['4/3', 'slanted', 'bg-surface-container-highest text-primary'],
|
||||
['3/4', 'bun', 'bg-primary text-on-primary'],
|
||||
['16/9', 'very-sunny', 'bg-secondary text-on-secondary'],
|
||||
] as [$aspect, $shape, $colours])
|
||||
<x-carousel-item :aspect="$aspect" :label="$aspect">
|
||||
<div class="grid size-full place-items-center {{ $colours }}">
|
||||
<x-shape :name="$shape" class="size-20" />
|
||||
</div>
|
||||
</x-carousel-item>
|
||||
@endforeach
|
||||
</x-carousel>
|
||||
BLADE,
|
||||
'Full-screen: one item at a time, scrolled down' => <<<'BLADE'
|
||||
<x-carousel layout="full-screen" label="Wallpapers" height="320" :controls="true">
|
||||
@foreach ([
|
||||
|
||||
@@ -35,6 +35,14 @@
|
||||
</x-slot:actions>
|
||||
</x-card>
|
||||
BLADE,
|
||||
'A card being dragged' => <<<'BLADE'
|
||||
<div x-data="{ dragged: false }" class="w-full max-w-sm space-y-4">
|
||||
<x-button label="Pick it up or put it down" variant="tonal" x-on:click="dragged = ! dragged" />
|
||||
<x-card variant="elevated" title="holiday-photos.zip" subtitle="248 MB" x-bind:data-dragged="dragged || null">
|
||||
Elevation 4 and the 16% state layer, for as long as the application says the card is being carried.
|
||||
</x-card>
|
||||
</div>
|
||||
BLADE,
|
||||
'Lists' => <<<'BLADE'
|
||||
<div class="grid w-full gap-6 medium:grid-cols-2">
|
||||
<x-list dividers label="Files">
|
||||
@@ -60,6 +68,24 @@
|
||||
<x-list-item title="Thirty days" :selected="false" />
|
||||
</x-list>
|
||||
BLADE,
|
||||
'A list with leading video' => <<<'BLADE'
|
||||
<x-list dividers label="Clips" class="w-full max-w-md">
|
||||
<x-list-item title="Sunrise over the lake" description="2:14 · 48 MB">
|
||||
<x-slot:video>
|
||||
<div class="grid place-items-center bg-linear-to-br from-primary-container to-tertiary-container text-on-primary-container">
|
||||
<x-icon name="play_circle" class="size-6" />
|
||||
</div>
|
||||
</x-slot:video>
|
||||
</x-list-item>
|
||||
<x-list-item overline="Draft" title="Walking the old town" description="Uploaded yesterday · 7:48">
|
||||
<x-slot:video>
|
||||
<div class="grid place-items-center bg-linear-to-br from-secondary-container to-primary-container text-on-secondary-container">
|
||||
<x-icon name="play_circle" class="size-6" />
|
||||
</div>
|
||||
</x-slot:video>
|
||||
</x-list-item>
|
||||
</x-list>
|
||||
BLADE,
|
||||
'Dividers and collapse' => <<<'BLADE'
|
||||
<div class="w-full space-y-4">
|
||||
<x-collapse title="How long do links last?" icon="schedule" open>
|
||||
@@ -72,6 +98,19 @@
|
||||
<div class="flex h-10 items-center gap-4"><span>Left</span><x-divider vertical /><span>Right</span></div>
|
||||
</div>
|
||||
BLADE,
|
||||
'A divider with a subheader' => <<<'BLADE'
|
||||
<div class="w-full max-w-md">
|
||||
<x-divider text="Today" />
|
||||
<x-list label="Today">
|
||||
<x-list-item title="holiday-photos.zip" description="Shared with 3 people" icon="folder_zip" />
|
||||
<x-list-item title="contract.pdf" description="Downloaded twice" icon="picture_as_pdf" />
|
||||
</x-list>
|
||||
<x-divider text="Earlier this week" class="mt-2" />
|
||||
<x-list label="Earlier this week">
|
||||
<x-list-item title="minutes.docx" description="Expired" icon="description" />
|
||||
</x-list>
|
||||
</div>
|
||||
BLADE,
|
||||
'Collapse bound to a property' => <<<'BLADE'
|
||||
<div x-data="{ advanced: false }" class="w-full space-y-4">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
@@ -114,6 +153,27 @@
|
||||
</x-modal>
|
||||
</div>
|
||||
BLADE,
|
||||
'A standard side sheet: co-planar from expanded, modal below' => <<<'BLADE'
|
||||
<div x-data="{ open: true }" class="w-full">
|
||||
<div class="expanded:flex expanded:items-start expanded:gap-6">
|
||||
<div class="min-w-0 flex-1 space-y-4">
|
||||
<x-button label="Show or hide the filters" variant="tonal" x-on:click="open = ! open" />
|
||||
<p class="type-body-md text-on-surface-variant">
|
||||
From <code>expanded</code> (840px) the sheet beside this text is co-planar: no scrim, no focus trap, flat on the surface, divided from this column by a rule. Narrow the window and the same sheet becomes the modal one.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<x-drawer standard title="Filters" subtitle="Narrow the list down">
|
||||
<x-list selectable label="Expiry">
|
||||
<x-list-item title="One hour" :selected="false" />
|
||||
<x-list-item title="Three days" :selected="true" />
|
||||
<x-list-item title="Thirty days" :selected="false" />
|
||||
</x-list>
|
||||
<x-slot:actions><x-button label="Apply" variant="filled" /></x-slot:actions>
|
||||
</x-drawer>
|
||||
</div>
|
||||
</div>
|
||||
BLADE,
|
||||
'Sheets' => <<<'BLADE'
|
||||
<div x-data="{ open: false }">
|
||||
<x-button label="Side sheet" variant="tonal" x-on:click="open = true" />
|
||||
@@ -137,6 +197,18 @@
|
||||
</x-list>
|
||||
</x-bottom-sheet>
|
||||
</div>
|
||||
|
||||
<div x-data="{ open: false }">
|
||||
<x-button label="Bottom sheet with preset heights" variant="tonal" x-on:click="open = true" />
|
||||
<x-bottom-sheet title="Nearby places" snap>
|
||||
<p class="type-body-md text-on-surface-variant">Press the drag handle, or focus it and press Enter, to move to the next height; from the last it closes. Dragging it settles on the nearest.</p>
|
||||
<x-list>
|
||||
<x-list-item title="Hafen" description="240 m · open until 23:00" icon="location_on" />
|
||||
<x-list-item title="Stadtbibliothek" description="600 m · closes at 18:00" icon="location_on" />
|
||||
<x-list-item title="Seepromenade" description="1.1 km · always open" icon="location_on" />
|
||||
</x-list>
|
||||
</x-bottom-sheet>
|
||||
</div>
|
||||
BLADE,
|
||||
];
|
||||
@endphp
|
||||
|
||||
Reference in New Issue
Block a user