86 lines
3.5 KiB
Plaintext
86 lines
3.5 KiB
Plaintext
// Wire UI showcase. Route: /ui. Every element below is a server-rendered
|
|
// component from @wrnexus/ui (auto-discovered), styled by theme tokens.
|
|
page UI {
|
|
layout = "public"
|
|
|
|
seo {
|
|
title = "Wire UI"
|
|
description = "Built-in Wire UI components and layout primitives."
|
|
}
|
|
|
|
view {
|
|
<h1>Wire UI components</h1>
|
|
|
|
<div data-component="stack" gap="5">
|
|
<div data-component="alert" variant="info" title="Server-rendered" message="These components render on the server and ship no JS unless they are interactive."></div>
|
|
|
|
<div data-component="card">
|
|
<div data-component="stack" gap="3">
|
|
<strong>Buttons</strong>
|
|
<div data-component="hstack" gap="3">
|
|
<div data-component="button" variant="primary" label="Primary"></div>
|
|
<div data-component="button" variant="default" label="Default"></div>
|
|
<div data-component="button" variant="danger" label="Danger"></div>
|
|
<div data-component="button" variant="ghost" label="Ghost"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-component="grid" cols="3" gap="4">
|
|
<div data-component="card">
|
|
<strong>Badges</strong>
|
|
<div data-component="hstack" gap="2">
|
|
<div data-component="badge" variant="success" label="Live"></div>
|
|
<div data-component="badge" variant="warning" label="Beta"></div>
|
|
<div data-component="badge" variant="danger" label="Off"></div>
|
|
</div>
|
|
</div>
|
|
<div data-component="card">
|
|
<strong>Input</strong>
|
|
<div data-component="input" placeholder="Type here..."></div>
|
|
</div>
|
|
<div data-component="card">
|
|
<strong>Spinner</strong>
|
|
<div data-component="spinner"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-component="divider"></div>
|
|
|
|
<div data-component="card">
|
|
<div data-component="stack" gap="3">
|
|
<strong>More components</strong>
|
|
<div data-component="hstack" gap="3">
|
|
<div data-component="tag" label="default"></div>
|
|
<div data-component="tag" variant="primary" label="primary"></div>
|
|
<div data-component="tag" variant="success" label="success"></div>
|
|
<div data-component="tag" variant="danger" label="danger"></div>
|
|
</div>
|
|
<div data-component="select" name="fruit">
|
|
<option>Apple</option>
|
|
<option>Banana</option>
|
|
<option>Cherry</option>
|
|
</div>
|
|
<div data-component="switch" name="notify" label="Email notifications"></div>
|
|
<div data-component="radio" name="plan" value="pro" label="Pro plan"></div>
|
|
<div data-component="progress" value="65"></div>
|
|
<div data-component="skeleton" width="60%" height="1.2rem"></div>
|
|
<p>Hover this <div data-component="tooltip" text="I am a CSS tooltip"><strong>tooltip trigger</strong></div>.</p>
|
|
<div data-component="table">
|
|
<thead><tr><th>Name</th><th>Role</th></tr></thead>
|
|
<tbody><tr><td>Ada</td><td>Admin</td></tr><tr><td>Grace</td><td>Editor</td></tr></tbody>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-component="divider"></div>
|
|
|
|
<div data-component="disclosure" summary="How do I override component styles?">
|
|
Four ways, least to most control: change a theme token, redefine a
|
|
<code>.wire-*</code> class in your CSS, pass a <code>class</code> prop, or run
|
|
<code>wrnexus eject <name></code> to copy the component into app/components.
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|