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

Add an illustration slot to the empty state

Browse Source 
An application with its own artwork for an empty collection puts it in
the `illustration` slot, which is drawn in place of the shape and icon.
The slot's attributes go on the element around it, so its class sets the
colour an SVG's currentColor takes. A slot holding only whitespace or
comments counts as empty (hasActualContent), and without the slot the
empty state renders as before.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 18:11:00 +02:00
co-authored by Claude Opus 5
parent e63c0f684c
commit d77ecf5e2a
4 changed files with 75 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/empty-state.blade.php
+19 -5
View File
@@ -8,7 +8,17 @@
Not an M3 component; built from M3 Expressive's parts — `shape` (any `<x-shape>` name,
`cookie-9` by default) in secondary-container behind the `icon` in on-secondary-container,
a title-large `title`, body-medium `description` or slot. For "your filter matched nothing"
use a plain line of text instead: a picture there is consolation for a typo. --}}
use a plain line of text instead: a picture there is consolation for a typo.
An application with its own artwork puts it in the `illustration` slot, which is drawn in place
of the shape and icon (both props are then unused). The slot sizes itself; its attributes go on
the element around it, so `class` can set the colour an SVG's `currentColor` takes:
<x-empty-state title="No routes yet">
<x-slot:illustration class="text-primary"><svg class="size-32" aria-hidden="true">…</svg></x-slot:illustration>
</x-empty-state>
A slot holding only whitespace or comments counts as empty, and the shape and icon stay. --}}
@props([
'icon' => 'inbox',
@@ -18,10 +28,14 @@
])
<div {{ $attributes->class('flex flex-col items-center gap-4 px-4 py-10 text-center') }}>
<div class="relative grid size-28 place-items-center">
<x-livewire-material::shape :name="$shape" class="absolute inset-0 size-full text-secondary-container" />
<x-livewire-material::icon :name="$icon" class="relative size-12 text-on-secondary-container" />
</div>
@if (isset($illustration) && $illustration->hasActualContent())
<div {{ $illustration->attributes }}>{{ $illustration }}</div>
@else
<div class="relative grid size-28 place-items-center">
<x-livewire-material::shape :name="$shape" class="absolute inset-0 size-full text-secondary-container" />
<x-livewire-material::icon :name="$icon" class="relative size-12 text-on-secondary-container" />
</div>
@endif
@if ($title)
<h3 class="type-title-lg">{{ $title }}</h3>