ClintchizandClaude Opus 5
8aa28205e0
Container, Columns, Grid, Divider, Image, Link, Typography and Kbd were built from utility classes and class: conditionals. That works only where Tailwind is present, and every variant cost a dozen conditional lines -- Divider spent eleven of them saying which token to paint the rule. They now carry wire-* classes with a local style block, and variants are data attributes the style block selects on. Divider went from eleven conditionals to five rules, and Typography lost thirteen. Behaviour is preserved rather than improved on. Container keeps columns and gap even though a container is not really a grid, because applications depend on them, and its columns default stays 2: the redesign contract test caught that changing it would silently reflow every Container already published. Additive only: Grid gains minItemWidth for an auto-fit track, Divider gains dashed and dotted variants, Image gains fit, and Link gains underline. Verified in a browser rather than by eye, since the pane cannot screenshot: track counts match the declared columns at desktop and collapse correctly below each breakpoint. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
137 lines
12 KiB
Plaintext
137 lines
12 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page ImageDetail {
|
|
layout = "showcase"
|
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
|
state playground_src = ctx.url.searchParams.get("pg_src") ?? ""
|
|
state playground_alt = ctx.url.searchParams.get("pg_alt") ?? ""
|
|
state playground_width = ctx.url.searchParams.get("pg_width") ?? ""
|
|
state playground_height = ctx.url.searchParams.get("pg_height") ?? ""
|
|
state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
|
|
state playground_fit = ctx.url.searchParams.get("pg_fit") ?? "cover"
|
|
state playground_rounded = (ctx.url.searchParams.get("pg_rounded") ?? "false") === "true"
|
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
|
seo {
|
|
title = "Image"
|
|
description = "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment."
|
|
}
|
|
view {
|
|
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
|
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Image</span>
|
|
</nav>
|
|
<header class="detail-hero">
|
|
<div class="detail-hero-copy">
|
|
<span class="showcase-eyebrow">Layout component</span>
|
|
<h1>Image</h1>
|
|
<p>Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.</p>
|
|
<div class="detail-badges"><span>10 props</span><span>1 slots</span><span>0 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
|
</div>
|
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
|
</header>
|
|
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Image" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
|
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Image</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
|
<div class="playground-workbench">
|
|
<div class="playground-preview">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="playground-preview-source" data-playground-preview><Image size='{playground_size}' color='{playground_color}' src='{playground_src}' alt='{playground_alt}' width='{playground_width}' height='{playground_height}' loading='{playground_loading}' fit='{playground_fit}' rounded='{playground_rounded}' class='{playground_class}' /></div>
|
|
<section class="playground-code" aria-label="Current component code">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
|
<pre><code data-playground-code><Image /></code></pre>
|
|
</section>
|
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
|
|
|
</div>
|
|
<form class="playground-controls" data-playground-form>
|
|
<header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
|
<div class="playground-fields"><label class="playground-field" for="playground-image-size"><span><strong>size</strong><small>string</small></span><select id="playground-image-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-image-color"><span><strong>color</strong><small>string</small></span><select id="playground-image-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-image-src"><span><strong>src</strong><small>string</small></span><input id="playground-image-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-image-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-image-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-image-width"><span><strong>width</strong><small>string</small></span><select id="playground-image-width" name="pg_width"><option value="" selected>Auto / default</option><option value="default">default</option><option value="compact">compact</option><option value="wide">wide</option><option value="full">full</option></select></label><label class="playground-field" for="playground-image-height"><span><strong>height</strong><small>string</small></span><input id="playground-image-height" name="pg_height" type="text" value="" /></label><label class="playground-field" for="playground-image-loading"><span><strong>loading</strong><small>string</small></span><select id="playground-image-loading" name="pg_loading"><option value="lazy" selected>lazy</option><option value="eager">eager</option></select></label><label class="playground-field" for="playground-image-fit"><span><strong>fit</strong><small>string</small></span><input id="playground-image-fit" name="pg_fit" type="text" value="cover" /></label><label class="playground-toggle" for="playground-image-rounded"><span><strong>rounded</strong><small>boolean</small></span><input id="playground-image-rounded" name="pg_rounded" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-image-class"><span><strong>class</strong><small>string</small></span><input id="playground-image-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<div class="detail-layout">
|
|
<main class="detail-content">
|
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Recommended</span><h2>Responsive content image</h2><p>Render a responsive image with meaningful alternative text.</p></div>
|
|
<span class="demo-case-number">01</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="image-demo-1" class="demo-canvas demo-canvas--1">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><Image size="default" src="/showcase-images/violet-circle.svg" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Responsive content image usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Image
|
|
src="/showcase-images/violet-circle.svg"
|
|
alt="Abstract violet circle on a dark surface"
|
|
width="800"
|
|
height="450"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Compact</span><h2>Rounded thumbnail</h2><p>Use a rounded image in cards, directories, and compact summaries.</p></div>
|
|
<span class="demo-case-number">02</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="image-demo-2" class="demo-canvas demo-canvas--2">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><Image size="sm" src="/showcase-images/blue-mountain.svg" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Rounded thumbnail usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Image
|
|
size="sm"
|
|
src="/showcase-images/blue-mountain.svg"
|
|
alt="Abstract blue thumbnail"
|
|
width="400"
|
|
height="400"
|
|
rounded="true"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Advanced</span><h2>Eager hero image</h2><p>Use explicit dimensions and eager loading for an above-the-fold visual.</p></div>
|
|
<span class="demo-case-number">03</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="image-demo-3" class="demo-canvas demo-canvas--3">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
|
|
<div class="demo-render"><Image size="lg" src="/showcase-images/green-hero.svg" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Eager hero image usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Image
|
|
size="lg"
|
|
src="/showcase-images/green-hero.svg"
|
|
alt="Abstract green hero visual"
|
|
width="1200"
|
|
height="600"
|
|
loading="eager"
|
|
rounded="true"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article></div></section>
|
|
|
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>width</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>height</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>fit</code></td><td>string</td><td><code>"cover"</code></td><td>No</td></tr><tr><td><code>rounded</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
|
</main>
|
|
<aside class="detail-aside">
|
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#image-demo-1">Responsive content image</a><a href="#image-demo-2">Rounded thumbnail</a><a href="#image-demo-3">Eager hero image</a><a href="#api">Props API</a></div>
|
|
</aside>
|
|
</div>
|
|
<nav class="detail-pagination">
|
|
<a href="/components/grid"><small>Previous</small><strong>← Grid</strong></a>
|
|
<a href="/components/kbd"><small>Next</small><strong>Kbd →</strong></a>
|
|
</nav>
|
|
}
|
|
}
|