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/chips.blade.php
+6 -6
View File
@@ -1,17 +1,17 @@
@php
$examples = [
'Assist chips' => <<<'BLADE'
<x-livewire-material::row gap="space100" wrap align="center" x-data>
<x-row gap="space100" wrap align="center" x-data>
<x-chip label="Add to calendar" icon="event" x-on:click="materialToast('Added to your calendar')" />
<x-chip label="Directions" icon="directions" link="#chips" />
<x-chip label="Share" icon="share" elevated tooltip="Share this file" />
<x-chip label="Material 3 guidelines" icon-right="open_in_new" link="https://m3.material.io/components/chips" external />
<x-chip label="Unavailable" icon="block" disabled />
<x-chip label="Unavailable" icon="block" elevated disabled />
</x-livewire-material::row>
</x-row>
BLADE,
'Filter chips' => <<<'BLADE'
<x-livewire-material::stack gap="space300" x-data="{ kinds: ['photos'] }">
<x-stack gap="space300" x-data="{ kinds: ['photos'] }">
<x-chip-set label="File types" hint="Show only these kinds of file">
<x-chip type="filter" label="Photos" value="photos" x-model="kinds" />
<x-chip type="filter" label="Documents" value="documents" x-model="kinds" />
@@ -25,10 +25,10 @@
<x-chip type="filter" label="Expiring" name="expiring" icon-right="arrow_drop_down" />
<x-chip type="filter" label="Archived" name="archived" :selected="true" disabled />
</x-chip-set>
</x-livewire-material::stack>
</x-stack>
BLADE,
'Input chips' => <<<'BLADE'
<x-livewire-material::stack gap="space300" x-data="{ recipients: ['anna@example.com', 'ben@example.com', 'chiara@example.com'] }">
<x-stack gap="space300" x-data="{ recipients: ['anna@example.com', 'ben@example.com', 'chiara@example.com'] }">
<x-chip-set label="Recipients" hint="Backspace or Delete removes the focused chip">
<template x-for="recipient in recipients" :key="recipient">
<x-chip type="input" icon="mail" removable remove="recipients = recipients.filter((other) => other !== recipient)"><span x-text="recipient"></span></x-chip>
@@ -41,7 +41,7 @@
<x-chip type="input" label="contract.pdf" icon="picture_as_pdf" x-on:click="materialToast('contract.pdf')" />
<x-chip type="input" label="Chiara Rossi" avatar="CR" removable disabled />
</x-chip-set>
</x-livewire-material::stack>
</x-stack>
BLADE,
'Suggestion chips' => <<<'BLADE'
<x-chip-set label="Suggested replies">