439 lines
33 KiB
Plaintext
439 lines
33 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page AvatarDetail {
|
|
layout = "showcase"
|
|
state playground_src = ctx.url.searchParams.get("pg_src") ?? "/avatar-example.svg"
|
|
state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "Example profile portrait"
|
|
state playground_initials = ctx.url.searchParams.get("pg_initials") ?? ""
|
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "xs"
|
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
|
|
state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
|
|
state playground_status = ctx.url.searchParams.get("pg_status") ?? ""
|
|
state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? ""
|
|
state playground_statusPosition = ctx.url.searchParams.get("pg_statusPosition") ?? "bottom"
|
|
state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
|
|
state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? ""
|
|
state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? ""
|
|
state playground_tooltip = ctx.url.searchParams.get("pg_tooltip") ?? ""
|
|
state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
|
|
state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
|
|
state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
|
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
|
seo {
|
|
title = "Avatar"
|
|
description = "Theme-aware, responsive avatar component."
|
|
}
|
|
view {
|
|
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
|
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/base">Base</a><span aria-hidden="true">/</span><span>Avatar</span>
|
|
</nav>
|
|
<header class="detail-hero">
|
|
<div class="detail-hero-copy">
|
|
<span class="showcase-eyebrow">Base component</span>
|
|
<h1>Avatar</h1>
|
|
<p>Theme-aware, responsive avatar component.</p>
|
|
<div class="detail-badges"><span>18 props</span><span>0 slots</span><span>3 events</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="Avatar" data-playground-public-tag="true" data-playground-has-slot="false">
|
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Avatar</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><div data-component="Avatar" src="{playground_src}" alt="{playground_alt}" initials="{playground_initials}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" shape="{playground_shape}" status="{playground_status}" statusLabel="{playground_statusLabel}" statusPosition="{playground_statusPosition}" badge="{playground_badge}" badgeIcon="{playground_badgeIcon}" badgeLabel="{playground_badgeLabel}" tooltip="{playground_tooltip}" name="{playground_name}" description="{playground_description}" loading="{playground_loading}" class="{playground_class}"></div></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><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Example profile portrait"
|
|
size="xs"
|
|
/></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>18 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-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="/avatar-example.svg" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="Example profile portrait" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="xs" selected>xs</option><option value="md">md</option><option value="default">default</option><option value="sm">sm</option><option value="lg">lg</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-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-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-avatar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-avatar-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><input id="playground-avatar-shape" name="pg_shape" type="text" value="circle" /></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="" /></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">Size & shape</span><h2>Extra-small circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
|
<span class="demo-case-number">01</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-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"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xs" color="primary" variant="solid" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Extra-small circular avatar usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Example profile portrait"
|
|
size="xs"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Small circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
|
<span class="demo-case-number">02</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-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"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="sm" color="primary" variant="solid" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Small circular avatar usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Example profile portrait"
|
|
size="sm"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Medium circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
|
<span class="demo-case-number">03</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-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"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="md" color="primary" variant="solid" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Medium circular avatar usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Example profile portrait"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Large circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
|
<span class="demo-case-number">04</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-4" class="demo-canvas demo-canvas--4">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="lg" color="primary" variant="solid" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Large circular avatar usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Example profile portrait"
|
|
size="lg"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Extra-large circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
|
|
<span class="demo-case-number">05</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-5" class="demo-canvas demo-canvas--5">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xl" color="primary" variant="solid" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Extra-large circular avatar usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Example profile portrait"
|
|
size="xl"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Size & shape</span><h2>Rounded avatars</h2><p>Apply softly rounded corners when a circle is not the right fit.</p></div>
|
|
<span class="demo-case-number">06</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-6" class="demo-canvas demo-canvas--6">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example rounded profile portrait" size="lg" color="primary" variant="solid" shape="rounded"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Rounded avatars usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Example rounded profile portrait"
|
|
size="lg"
|
|
shape="rounded"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Status</span><h2>Circular avatars with top status</h2><p>Place a clear presence indicator at the requested avatar edge.</p></div>
|
|
<span class="demo-case-number">07</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-7" class="demo-canvas demo-canvas--7">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="online" statusLabel="Online" statusPosition="top"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Circular avatars with top status usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Avery Chen"
|
|
size="lg"
|
|
status="online"
|
|
statusLabel="Online"
|
|
statusPosition="top"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Status</span><h2>Circular avatars with bottom status</h2><p>Place a clear presence indicator at the requested avatar edge.</p></div>
|
|
<span class="demo-case-number">08</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-8" class="demo-canvas demo-canvas--8">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="away" statusLabel="Away" statusPosition="bottom"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Circular avatars with bottom status usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Avery Chen"
|
|
size="lg"
|
|
status="away"
|
|
statusLabel="Away"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Fallbacks</span><h2>Avatars with brand icons</h2><p>Overlay a service or platform icon to identify a linked account.</p></div>
|
|
<span class="demo-case-number">09</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-9" class="demo-canvas demo-canvas--9">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Linked profile" size="lg" color="primary" variant="solid" shape="circle" badgeIcon="icon-[lucide--message-square]" badgeLabel="Messaging account"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Avatars with brand icons usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Linked profile"
|
|
size="lg"
|
|
badgeIcon="icon-[lucide--message-square]"
|
|
badgeLabel="Messaging account"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Fallbacks</span><h2>Placeholder icon</h2><p>Show a generic person icon when no profile image is available.</p></div>
|
|
<span class="demo-case-number">010</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-10" class="demo-canvas demo-canvas--10">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" alt="Anonymous profile" size="lg" color="primary" variant="soft" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Placeholder icon usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
alt="Anonymous profile"
|
|
size="lg"
|
|
variant="soft"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Fallbacks</span><h2>Placeholder initials</h2><p>Use initials as an accessible text fallback for a missing image.</p></div>
|
|
<span class="demo-case-number">011</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-11" class="demo-canvas demo-canvas--11">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="primary" variant="solid" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Placeholder initials usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
alt="Avery Chen"
|
|
initials="AC"
|
|
size="lg"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>Solid color variants</h2><p>Use the solid treatment across semantic avatar colors.</p></div>
|
|
<span class="demo-case-number">012</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-12" class="demo-canvas demo-canvas--12">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="success" variant="solid" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Solid color variants usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
alt="Avery Chen"
|
|
initials="AC"
|
|
size="lg"
|
|
color="success"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>Soft color variants</h2><p>Use the soft treatment across semantic avatar colors.</p></div>
|
|
<span class="demo-case-number">013</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-13" class="demo-canvas demo-canvas--13">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="info" variant="soft" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Soft color variants usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
alt="Avery Chen"
|
|
initials="AC"
|
|
size="lg"
|
|
color="info"
|
|
variant="soft"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>Outline color variants</h2><p>Use the outline treatment across semantic avatar colors.</p></div>
|
|
<span class="demo-case-number">014</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-14" class="demo-canvas demo-canvas--14">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="danger" variant="outline" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Outline color variants usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
alt="Avery Chen"
|
|
initials="AC"
|
|
size="lg"
|
|
color="danger"
|
|
variant="outline"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Color variants</span><h2>White color variants</h2><p>Use the white treatment across semantic avatar colors.</p></div>
|
|
<span class="demo-case-number">015</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-15" class="demo-canvas demo-canvas--15">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="primary" variant="white" shape="circle"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="White color variants usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
alt="Avery Chen"
|
|
initials="AC"
|
|
size="lg"
|
|
variant="white"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Composition</span><h2>Avatar with tooltip</h2><p>Reveal a name or extra context on hover and keyboard focus.</p></div>
|
|
<span class="demo-case-number">016</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-16" class="demo-canvas demo-canvas--16">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="online" tooltip="Avery Chen · Online" name="Avery Chen"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Avatar with tooltip usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Avery Chen"
|
|
size="lg"
|
|
status="online"
|
|
tooltip="Avery Chen · Online"
|
|
name="Avery Chen"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Composition</span><h2>Media object</h2><p>Combine an avatar with supporting text for profile and activity rows.</p></div>
|
|
<span class="demo-case-number">017</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="avatar-demo-17" class="demo-canvas demo-canvas--17">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Mark Wanner" size="lg" color="primary" variant="solid" shape="circle" name="Mark Wanner" description="mark@example.com"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Media object usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Avatar
|
|
src="/avatar-example.svg"
|
|
alt="Mark Wanner"
|
|
size="lg"
|
|
name="Mark Wanner"
|
|
description="mark@example.com"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article></div></section>
|
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
|
|
|
component.addEventListener('load', (event) => {
|
|
console.log(event.detail)
|
|
})</code></pre></section></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>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>initials</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</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>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"circle"</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>statusLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>statusPosition</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tooltip</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</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>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="#avatar-demo-1">Extra-small circular avatar</a><a href="#avatar-demo-2">Small circular avatar</a><a href="#avatar-demo-3">Medium circular avatar</a><a href="#avatar-demo-4">Large circular avatar</a><a href="#avatar-demo-5">Extra-large circular avatar</a><a href="#avatar-demo-6">Rounded avatars</a><a href="#avatar-demo-7">Circular avatars with top status</a><a href="#avatar-demo-8">Circular avatars with bottom status</a><a href="#avatar-demo-9">Avatars with brand icons</a><a href="#avatar-demo-10">Placeholder icon</a><a href="#avatar-demo-11">Placeholder initials</a><a href="#avatar-demo-12">Solid color variants</a><a href="#avatar-demo-13">Soft color variants</a><a href="#avatar-demo-14">Outline color variants</a><a href="#avatar-demo-15">White color variants</a><a href="#avatar-demo-16">Avatar with tooltip</a><a href="#avatar-demo-17">Media object</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
|
</aside>
|
|
</div>
|
|
<nav class="detail-pagination">
|
|
<a href="/components/alert"><small>Previous</small><strong>← Alert</strong></a>
|
|
<a href="/components/avatar-group"><small>Next</small><strong>Avatar Group →</strong></a>
|
|
</nav>
|
|
}
|
|
}
|