Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Redesign Interface demo pages for clarity and consistency (#2863)

Browse Source 
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Bartosz-DoandClaude Sonnet 5 authored and GitHub committed 2026-08-12 23:55:36 +02:00
1 parent 464a52255b
commit 5363668dc2
25 files changed
+798 -263
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/interface-pages-consistency.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": patch
---
Made Interface demo pages consistent with the Buttons page: card subtitles, one docs link, responsive grids.
.changeset/prose-page.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": minor
---
Added the missing Prose demo page, linked from the menu but not previously built.
preview/pages/accordion.astro
+27 -1
View File
@@ -3,25 +3,45 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Accordion from '@ui/Accordion.astro' import Accordion from '@ui/Accordion.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const accordionDocsUrl = getDocsUrl('/ui/components/accordion')
--- ---
<DefaultLayout title="Accordion" pageHeader="Accordion" pageMenu="base.accordion"> <DefaultLayout title="Accordion" pageMenu="base.accordion" description="Accordions show and hide sections of content, one panel at a time, inside a card.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Accordion</h1>
<a href={accordionDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Default</CardTitle>
<div class="card-subtitle">The base accordion — one panel open at a time.</div>
<Accordion /> <Accordion />
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody>
<CardTitle>Flush</CardTitle>
<div class="card-subtitle">Add <code>flush</code> to remove the card border and rounded corners.</div>
</CardBody>
<Accordion type={['flush']} id="flush" /> <Accordion type={['flush']} id="flush" />
</Card> </Card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tabs</CardTitle>
<div class="card-subtitle">Add <code>tabs</code> for a tab-like header instead of the default style.</div>
<Accordion type={['tabs']} id="tabs" /> <Accordion type={['tabs']} id="tabs" />
</CardBody> </CardBody>
</Card> </Card>
@@ -29,6 +49,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Inverted</CardTitle>
<div class="card-subtitle">Add <code>inverted</code> to flip the toggle icon to the start of the header.</div>
<Accordion type={['inverted']} id="inverted" /> <Accordion type={['inverted']} id="inverted" />
</CardBody> </CardBody>
</Card> </Card>
@@ -36,6 +58,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Inverted with plus icon</CardTitle>
<div class="card-subtitle">Combine <code>inverted</code> with a custom <code>toggleIcon</code>.</div>
<Accordion id="inverted-plus" type={['inverted', 'plus']} toggleIcon="plus" /> <Accordion id="inverted-plus" type={['inverted', 'plus']} toggleIcon="plus" />
</CardBody> </CardBody>
</Card> </Card>
@@ -43,6 +67,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>With icons</CardTitle>
<div class="card-subtitle">Add <code>showIcon</code> to show an icon next to each panel's title.</div>
<Accordion id="icons" showIcon /> <Accordion id="icons" showIcon />
</CardBody> </CardBody>
</Card> </Card>
preview/pages/alerts.astro
+30 -13
View File
@@ -4,14 +4,26 @@ import Alert from '@ui/Alert.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro' import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const alertDocsUrl = getDocsUrl('/ui/components/alert')
--- ---
<DefaultLayout title="Alerts" pageHeader="Alerts" pageMenu="base.alerts"> <DefaultLayout title="Alerts" pageMenu="base.alerts" description="Alert messages inform users about the status of an action, in success, info, warning, or danger states.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Alerts</h1>
<a href={alertDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-lg-6"> <div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Basic alerts</CardTitle> <CardTitle as="h2">Basic</CardTitle>
<div class="card-subtitle">A title and a color are enough to show the status of an action.</div>
<Alert type="danger" title="An error occurred!" /> <Alert type="danger" title="An error occurred!" />
<Alert type="warning" title="Some information is missing!" /> <Alert type="warning" title="Some information is missing!" />
<Alert type="success" title="Completed successfully!" /> <Alert type="success" title="Completed successfully!" />
@@ -19,10 +31,11 @@ import CardTitle from '@ui/CardTitle.astro'
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-lg-6"> <div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Alerts with action</CardTitle> <CardTitle as="h2">With action</CardTitle>
<div class="card-subtitle">Add a link with the <code>action</code> prop to give users something to do next.</div>
<Alert showClose action="Link" type="danger" title="An error occurred!" /> <Alert showClose action="Link" type="danger" title="An error occurred!" />
<Alert showClose action="Link" type="warning" title="Some information is missing!" /> <Alert showClose action="Link" type="warning" title="Some information is missing!" />
<Alert showClose action="Link" type="success" title="Completed successfully!" /> <Alert showClose action="Link" type="success" title="Completed successfully!" />
@@ -30,10 +43,11 @@ import CardTitle from '@ui/CardTitle.astro'
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-lg-6"> <div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Dismissible alerts</CardTitle> <CardTitle as="h2">Dismissible</CardTitle>
<div class="card-subtitle">Add <code>showClose</code> to let users close the alert.</div>
<Alert showClose type="danger" title="An error occurred!" /> <Alert showClose type="danger" title="An error occurred!" />
<Alert showClose type="warning" title="Some information is missing!" /> <Alert showClose type="warning" title="Some information is missing!" />
<Alert showClose type="success" title="Completed successfully!" /> <Alert showClose type="success" title="Completed successfully!" />
@@ -41,10 +55,11 @@ import CardTitle from '@ui/CardTitle.astro'
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-lg-6"> <div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Alert with a description</CardTitle> <CardTitle as="h2">With a description</CardTitle>
<div class="card-subtitle">Add a <code>description</code> or a <code>list</code> when the title alone isn't enough context.</div>
<Alert showClose type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} /> <Alert showClose type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
<Alert showClose type="warning" title="Some information is missing!" description="This is a custom alert box with a description." /> <Alert showClose type="warning" title="Some information is missing!" description="This is a custom alert box with a description." />
<Alert showClose type="success" title="Completed successfully!" description="This is a custom alert box with a description." /> <Alert showClose type="success" title="Completed successfully!" description="This is a custom alert box with a description." />
@@ -52,10 +67,11 @@ import CardTitle from '@ui/CardTitle.astro'
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-lg-6"> <div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Important alerts</CardTitle> <CardTitle as="h2">Important</CardTitle>
<div class="card-subtitle">Add <code>important</code> for a bolder style that stands out from the rest of the page.</div>
<Alert showClose important type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} /> <Alert showClose important type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
<Alert showClose important type="success" description="This is a custom alert box with a description." /> <Alert showClose important type="success" description="This is a custom alert box with a description." />
<Alert showClose important type="warning" description="This is a custom alert box with a description." /> <Alert showClose important type="warning" description="This is a custom alert box with a description." />
@@ -63,10 +79,11 @@ import CardTitle from '@ui/CardTitle.astro'
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-lg-6"> <div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Minor alerts</CardTitle> <CardTitle as="h2">Minor</CardTitle>
<div class="card-subtitle">Add <code>minor</code> for a quieter style that fits inline with other content.</div>
<Alert showClose minor type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} /> <Alert showClose minor type="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
<Alert showClose minor type="success" description="This is a custom alert box with a description." /> <Alert showClose minor type="success" description="This is a custom alert box with a description." />
<Alert showClose minor type="warning" description="This is a custom alert box with a description." /> <Alert showClose minor type="warning" description="This is a custom alert box with a description." />
preview/pages/avatars.astro
+36 -17
View File
@@ -6,9 +6,10 @@ import AvatarList from '@ui/AvatarList.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro' import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import people from '@data/people.json' import people from '@data/people.json'
import { site } from '@shared/lib/site' import { site } from '@shared/lib/site'
import { firstLetters } from '@shared/lib/string-format' import { firstLetters, getDocsUrl } from '@shared/lib/string-format'
const iconIcons = ['user', 'settings', 'car', 'balloon', 'users', 'users-group', 'apps', 'ghost'] const iconIcons = ['user', 'settings', 'car', 'balloon', 'users', 'users-group', 'apps', 'ghost']
@@ -22,64 +23,77 @@ const listSizes = ['xxs', 'xs', 'sm', 'md', 'lg'] as const
const uploadSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const const uploadSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
const statusColors = ['red', 'green', 'blue', 'yellow', 'secondary'] const statusColors = ['red', 'green', 'blue', 'yellow', 'secondary']
const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch'] const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
const avatarDocsUrl = getDocsUrl('/ui/components/avatar')
--- ---
<DefaultLayout title="Avatars" pageMenu="base.avatars" pageHeader="Avatars"> <DefaultLayout title="Avatars" pageMenu="base.avatars" description="Avatars display a photo, icon, or initials to represent a person, brand, or status.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Avatars</h1>
<a href={avatarDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-4"> <div class="col-sm-6 col-lg-4">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Default avatar</CardTitle> <CardTitle as="h2">Default avatar</CardTitle>
<div class="card-subtitle">The base <code>.avatar</code> element — a placeholder box for a photo, icon, or initials.</div>
<Avatar /> <Avatar />
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-4"> <div class="col-sm-6 col-lg-4">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Avatar with icon</CardTitle> <CardTitle as="h2">Avatar with icon</CardTitle>
<div class="card-subtitle">Use an icon instead of a photo with the <code>icon</code> prop.</div>
<div class="avatar-list"> <div class="avatar-list">
{iconIcons.map((icon) => <Avatar icon={icon} />)} {iconIcons.map((icon) => <Avatar icon={icon} />)}
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-4"> <div class="col-sm-6 col-lg-4">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Avatar with icon</CardTitle> <CardTitle as="h2">Avatar icon colors</CardTitle>
<div class="card-subtitle">Combine an icon avatar with any theme color.</div>
<div class="avatar-list"> <div class="avatar-list">
{colors.map((color) => <Avatar icon="user" color={color} />)} {colors.map((color) => <Avatar icon="user" color={color} />)}
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-4"> <div class="col-sm-6 col-lg-4">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Simple avatar</CardTitle> <CardTitle as="h2">Simple avatar</CardTitle>
<div class="card-subtitle">Pass a <code>person</code> object to render their photo.</div>
<div class="avatar-list"> <div class="avatar-list">
{people8.map((person) => <Avatar person={person} />)} {people8.map((person) => <Avatar person={person} />)}
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-4"> <div class="col-sm-6 col-lg-4">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Avatar placeholder</CardTitle> <CardTitle as="h2">Avatar placeholder</CardTitle>
<div class="card-subtitle">Fall back to initials with the <code>placeholder</code> prop when there's no photo.</div>
<div class="avatar-list"> <div class="avatar-list">
{people8.map((person) => <Avatar placeholder={firstLetters(person.full_name)} />)} {people8.map((person) => <Avatar placeholder={firstLetters(person.full_name)} />)}
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-4"> <div class="col-sm-6 col-lg-4">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Avatar shapes</CardTitle> <CardTitle as="h2">Avatar shapes</CardTitle>
<div class="card-subtitle">Square by default — add <code>.rounded-circle</code> or <code>.rounded-0</code> to change the shape.</div>
<div class="avatar-list"> <div class="avatar-list">
<Avatar /> <Avatar />
<Avatar class="rounded-circle" /> <Avatar class="rounded-circle" />
@@ -88,10 +102,11 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-6"> <div class="col-12 col-lg-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Avatar sizes</CardTitle> <CardTitle as="h2">Avatar sizes</CardTitle>
<div class="card-subtitle">Six sizes from <code>xxs</code> to <code>xl</code>, for both photos and placeholders.</div>
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<div class="avatar-list"> <div class="avatar-list">
@@ -107,10 +122,11 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-6"> <div class="col-12 col-lg-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Avatar lists</CardTitle> <CardTitle as="h2">Avatar lists</CardTitle>
<div class="card-subtitle">Stack avatars with <code>&lt;AvatarList&gt;</code> to show a group at a glance.</div>
<div class="row g-3"> <div class="row g-3">
{ {
listSizes.map((size) => ( listSizes.map((size) => (
@@ -138,26 +154,29 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-4"> <div class="col-sm-6 col-lg-4">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Avatar placeholder</CardTitle> <CardTitle as="h2">Avatar upload</CardTitle>
<div class="card-subtitle">An upload control styled as an avatar, for profile photo pickers.</div>
{uploadSizes.map((size) => <AvatarUpload size={size} />)} {uploadSizes.map((size) => <AvatarUpload size={size} />)}
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-4"> <div class="col-sm-6 col-lg-4">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Avatar statuses</CardTitle> <CardTitle as="h2">Avatar statuses</CardTitle>
<div class="card-subtitle">Add a <code>status</code> dot to show online, away, or busy state.</div>
{statusColors.map((color, i) => <Avatar personId={i + 1} class="rounded-circle" status={color} />)} {statusColors.map((color, i) => <Avatar personId={i + 1} class="rounded-circle" status={color} />)}
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-4"> <div class="col-sm-6 col-lg-4">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle as="h2">Avatar brands</CardTitle> <CardTitle as="h2">Avatar brands</CardTitle>
<div class="card-subtitle">Show a recognizable brand icon instead of a person.</div>
{brands.map((brand, i) => <Avatar personId={i + 1} brand={brand} />)} {brands.map((brand, i) => <Avatar personId={i + 1} brand={brand} />)}
</CardBody> </CardBody>
</Card> </Card>
preview/pages/badges.astro
+201 -181
View File
@@ -10,196 +10,216 @@ import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro' import CardTitle from '@ui/CardTitle.astro'
import DropdownMenu from '@ui/DropdownMenu.astro' import DropdownMenu from '@ui/DropdownMenu.astro'
import site from '@data/site.json' import site from '@data/site.json'
import { ucFirst } from '@shared/lib/string-format' import { ucFirst, getDocsUrl } from '@shared/lib/string-format'
const colors = ['default', ...Object.keys(site.colors), 'dark', 'light'] const colors = ['default', ...Object.keys(site.colors), 'dark', 'light']
const sizes = ['sm', 'md', 'lg'] const sizes = ['sm', 'md', 'lg']
const badgeDocsUrl = getDocsUrl('/ui/components/badge')
--- ---
<DefaultLayout title="Badges" pageHeader="Badges" pageMenu="base.badges"> <DefaultLayout title="Badges" pageMenu="base.badges" description="Badges highlight a count, status, or short label attached to text, buttons, or menu items.">
<div class="row row-cards"> <div class="d-flex justify-content-between align-items-center mb-4">
<div class="col-4"> <h1 class="page-title">Badges</h1>
<div class="row row-cards"> <a href={badgeDocsUrl} target="_blank" rel="noopener" class="link-secondary">
<div class="col-12"> Docs <Icon name="external-link" class="icon-sm" />
<Card> </a>
<CardBody> </div>
<h1>Example heading <span class="badge">New</span></h1>
<h2>Example heading <span class="badge">New</span></h2>
<h3>Example heading <span class="badge">New</span></h3>
<h4>Example heading <span class="badge">New</span></h4>
<h5>Example heading <span class="badge">New</span></h5>
<h6>Example heading <span class="badge">New</span></h6>
</CardBody>
</Card>
</div>
<div class="col-12">
<Card>
<CardBody>
<CardTitle>Badge sizes</CardTitle>
<div class="space-y"> <div class="row row-cards mb-5">
{ <div class="col-md-6 col-lg-4">
sizes.map((size) => ( <Card>
<BadgeList> <CardBody>
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>Default</span> <CardTitle>In headings</CardTitle>
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}> <div class="card-subtitle">A badge scales with the heading level it sits next to.</div>
<Icon name="check" /> Left icon <h1>Example heading <span class="badge">New</span></h1>
</span> <h2>Example heading <span class="badge">New</span></h2>
<span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}> <h3>Example heading <span class="badge">New</span></h3>
Right icon <h4>Example heading <span class="badge">New</span></h4>
<Icon name="arrow-right" /> <h5>Example heading <span class="badge">New</span></h5>
</span> <h6>Example heading <span class="badge">New</span></h6>
<span class={`badge badge-icononly${size !== 'md' ? ` badge-${size}` : ''}`}> </CardBody>
<Icon name="star" type="filled" /> </Card>
</span> </div>
</BadgeList> <div class="col-md-6 col-lg-4">
)) <Card>
} <CardBody>
</div> <CardTitle>Sizes</CardTitle>
</CardBody> <div class="card-subtitle">Three sizes, with an optional icon before or after the label.</div>
</Card> <div class="space-y">
</div> {
<div class="col-12"> sizes.map((size) => (
<Card> <BadgeList>
<CardBody> <span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>Default</span>
<CardTitle>Positioned badges</CardTitle> <span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
<Icon name="check" /> Left icon
<ButtonList>
<button type="button" class="btn">Notifications <span class="badge text-bg-secondary ms-2">4</span></button>
<button type="button" class="btn">
Inbox
<span class="badge bg-red badge-notification text-red-fg">
9+
<span class="visually-hidden">unread messages</span>
</span> </span>
</button> <span class={`badge${size !== 'md' ? ` badge-${size}` : ''}`}>
Right icon
<button type="button" class="btn"> <Icon name="arrow-right" />
Profile </span>
<span class="badge badge-dot bg-red badge-notification"></span> <span class={`badge badge-icononly${size !== 'md' ? ` badge-${size}` : ''}`}>
</button> <Icon name="star" type="filled" />
</span>
<button type="button" class="btn"> </BadgeList>
Settings ))
<span class="badge badge-dot bg-red badge-notification badge-blink"></span> }
</button> </div>
</CardBody>
<button type="button" class="btn btn-icon"> </Card>
<Icon name="bell" />
<span class="badge badge-dot bg-red badge-notification badge-blink"></span>
</button>
<button type="button" class="btn btn-icon btn-action">
<Icon name="bell" />
<span class="badge badge-dot bg-red badge-notification"></span>
</button>
</ButtonList>
</CardBody>
</Card>
</div>
</div>
</div> </div>
<div class="col-8"> <div class="col-md-6 col-lg-4">
<div class="row row-cards"> <Card>
<div class="col-12"> <CardBody>
<Card> <CardTitle>Positioned</CardTitle>
<CardBody> <div class="card-subtitle">Attach a count or a dot to a button with <code>.badge-notification</code>.</div>
<CardTitle>Basic badges</CardTitle> <ButtonList>
<BadgeList> <button type="button" class="btn">Notifications <span class="badge text-bg-secondary ms-2">4</span></button>
{colors.map((color) => <span class={`badge bg-${color} text-${color}-fg`}>{ucFirst(color)}</span>)}
</BadgeList> <button type="button" class="btn">
</CardBody> Inbox
</Card> <span class="badge bg-red badge-notification text-red-fg">
</div> 9+
<div class="col-12"> <span class="visually-hidden">unread messages</span>
<Card> </span>
<CardBody> </button>
<CardTitle>Light badges</CardTitle>
<BadgeList> <button type="button" class="btn">
{colors.map((color) => <span class={`badge bg-${color}-lt`}>{ucFirst(color)}</span>)} Profile
</BadgeList> <span class="badge badge-dot bg-red badge-notification"></span>
</CardBody> </button>
</Card>
</div> <button type="button" class="btn">
<div class="col-12"> Settings
<Card> <span class="badge badge-dot bg-red badge-notification badge-blink"></span>
<CardBody> </button>
<CardTitle>Outline badges</CardTitle>
<BadgeList> <button type="button" class="btn btn-icon">
{colors.map((color) => <span class={`badge badge-outline text-${color}`}>{ucFirst(color)}</span>)} <Icon name="bell" />
</BadgeList> <span class="badge badge-dot bg-red badge-notification badge-blink"></span>
</CardBody> </button>
</Card>
</div> <button type="button" class="btn btn-icon btn-action">
<div class="col-12"> <Icon name="bell" />
<Card> <span class="badge badge-dot bg-red badge-notification"></span>
<CardBody> </button>
<CardTitle>Badges with icons</CardTitle> </ButtonList>
<BadgeList> </CardBody>
{ </Card>
colors.map((color) => (
<span class={`badge bg-${color} text-${color}-fg`}>
{' '}
<Icon name="star" type="filled" /> {ucFirst(color)}{' '}
</span>
))
}
</BadgeList>
</CardBody>
</Card>
</div>
</div>
</div> </div>
<div class="col-sm-6 col-lg-3"><DropdownMenu show badge arrow /></div> <div class="col-md-6 col-lg-4">
<div class="col-sm-6 col-lg-9"> <Card>
<div class="row row-cards"> <CardBody>
<div class="col-12"> <CardTitle>In a dropdown</CardTitle>
<Card> <div class="card-subtitle">A badge inside a dropdown item.</div>
<CardBody> <DropdownMenu show badge arrow />
<ButtonList> </CardBody>
{ </Card>
colors.map((color, index) => ( </div>
<button class="btn"> <div class="col-md-6 col-lg-4">
{ucFirst(color)} badge <span class={`badge bg-${color} text-${color}-fg ms-2`}>{index + 1}</span> <Card>
</button> <CardBody>
)) <CardTitle>On buttons</CardTitle>
} <div class="card-subtitle">Pair any badge color with a button label.</div>
</ButtonList> <ButtonList>
</CardBody> {
</Card> colors.map((color, index) => (
</div> <button class="btn">
<div class="col-12"> {ucFirst(color)} badge <span class={`badge bg-${color} text-${color}-fg ms-2`}>{index + 1}</span>
<Card> </button>
<CardBody> ))
<ButtonList> }
{ </ButtonList>
colors.map((color, index) => ( </CardBody>
<button class="btn position-relative"> </Card>
{ucFirst(color)} badge <span class={`badge bg-${color} text-${color}-fg badge-notification badge-pill`}>{index + 1}</span> </div>
</button> <div class="col-md-6 col-lg-4">
)) <Card>
} <CardBody>
</ButtonList> <CardTitle>Notification dot</CardTitle>
</CardBody> <div class="card-subtitle">A pill-shaped counter positioned on the corner of a button.</div>
</Card> <ButtonList>
</div> {
<div class="col-12"> colors.map((color, index) => (
<Card> <button class="btn position-relative">
<CardBody> {ucFirst(color)} badge <span class={`badge bg-${color} text-${color}-fg badge-notification badge-pill`}>{index + 1}</span>
<ButtonList> </button>
{ ))
colors.map((color) => ( }
<button class="btn position-relative"> </ButtonList>
{ucFirst(color)} badge <span class={`badge bg-${color} badge-notification badge-blink`} /> </CardBody>
</button> </Card>
)) </div>
} <div class="col-md-6 col-lg-4">
</ButtonList> <Card>
</CardBody> <CardBody>
</Card> <CardTitle>Blinking notification</CardTitle>
</div> <div class="card-subtitle">Add <code>.badge-blink</code> to draw attention to unread activity.</div>
</div> <ButtonList>
{
colors.map((color) => (
<button class="btn position-relative">
{ucFirst(color)} badge <span class={`badge bg-${color} badge-notification badge-blink`} />
</button>
))
}
</ButtonList>
</CardBody>
</Card>
</div>
</div>
<div class="row row-cards">
<div class="col-12">
<Card>
<CardBody>
<CardTitle>Basic</CardTitle>
<div class="card-subtitle">Fill a badge with a theme or extended color.</div>
<BadgeList>
{colors.map((color) => <span class={`badge bg-${color} text-${color}-fg`}>{ucFirst(color)}</span>)}
</BadgeList>
</CardBody>
</Card>
</div>
<div class="col-12">
<Card>
<CardBody>
<CardTitle>Light</CardTitle>
<div class="card-subtitle">A tinted background for a softer, secondary badge.</div>
<BadgeList>
{colors.map((color) => <span class={`badge bg-${color}-lt`}>{ucFirst(color)}</span>)}
</BadgeList>
</CardBody>
</Card>
</div>
<div class="col-12">
<Card>
<CardBody>
<CardTitle>Outline</CardTitle>
<div class="card-subtitle">A colored border with a transparent background.</div>
<BadgeList>
{colors.map((color) => <span class={`badge badge-outline text-${color}`}>{ucFirst(color)}</span>)}
</BadgeList>
</CardBody>
</Card>
</div>
<div class="col-12">
<Card>
<CardBody>
<CardTitle>With icons</CardTitle>
<div class="card-subtitle">Add an icon before the label to reinforce its meaning.</div>
<BadgeList>
{
colors.map((color) => (
<span class={`badge bg-${color} text-${color}-fg`}>
{' '}
<Icon name="star" type="filled" /> {ucFirst(color)}{' '}
</span>
))
}
</BadgeList>
</CardBody>
</Card>
</div> </div>
</div> </div>
</DefaultLayout> </DefaultLayout>
preview/pages/carousel.astro
+12 -1
View File
@@ -1,9 +1,20 @@
--- ---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import CarouselCard from '@shared/components/cards/CarouselCard.astro' import CarouselCard from '@shared/components/cards/CarouselCard.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const carouselDocsUrl = getDocsUrl('/ui/components/carousel')
--- ---
<DefaultLayout title="Carousel" pageHeader="Carousel" pageMenu="base.carousel"> <DefaultLayout title="Carousel" pageMenu="base.carousel" description="A carousel cycles through a set of slides, with optional indicators and controls.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Carousel</h1>
<a href={carouselDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-md-6"> <div class="col-md-6">
<CarouselCard id="default" /> <CarouselCard id="default" />
preview/pages/colors.astro
+29 -7
View File
@@ -6,7 +6,9 @@ import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import Avatar from '@ui/Avatar.astro' import Avatar from '@ui/Avatar.astro'
import CardTitle from '@ui/CardTitle.astro' import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import site from '@data/site.json' import site from '@data/site.json'
import { getDocsUrl } from '@shared/lib/string-format'
type ColorEntry = [string, { title: string; hex: string; abbr?: string; icon?: string }] type ColorEntry = [string, { title: string; hex: string; abbr?: string; icon?: string }]
@@ -16,13 +18,24 @@ const grayColors = Object.entries(site.grayColors) as ColorEntry[]
const socialColors = Object.entries(site.socialColors) as ColorEntry[] const socialColors = Object.entries(site.socialColors) as ColorEntry[]
const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'transparent'] const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'transparent']
const colorsDocsUrl = getDocsUrl('/ui/base/colors')
--- ---
<DefaultLayout title="Colors" pageHeader="Colors" pageMenu="base.colors"> <DefaultLayout title="Colors" pageMenu="base.colors" description="The full color palette, with hex values, and a gradient builder.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Colors</h1>
<a href={colorsDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-3"> <div class="col-6 col-lg-3">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Colors</CardTitle>
<div class="card-subtitle">The extended color palette, with hex values.</div>
<div class="row g-3"> <div class="row g-3">
{ {
colors.map(([name, color]) => ( colors.map(([name, color]) => (
@@ -44,9 +57,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-3"> <div class="col-6 col-lg-3">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Light colors</CardTitle>
<div class="card-subtitle">A tinted, low-contrast version of each color.</div>
<div class="row g-3"> <div class="row g-3">
{ {
lightColors.map(([name, color]) => ( lightColors.map(([name, color]) => (
@@ -68,9 +83,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-3"> <div class="col-6 col-lg-3">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Gray colors</CardTitle>
<div class="card-subtitle">The neutral gray scale used for text, borders, and backgrounds.</div>
<div class="row g-3"> <div class="row g-3">
{ {
grayColors.map(([name, color]) => ( grayColors.map(([name, color]) => (
@@ -92,9 +109,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-3"> <div class="col-6 col-lg-3">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Social colors</CardTitle>
<div class="card-subtitle">Brand colors for social networks.</div>
<div class="row g-3"> <div class="row g-3">
{ {
socialColors.map(([name, color]) => ( socialColors.map(([name, color]) => (
@@ -118,10 +137,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-12 col-lg-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Gradient</CardTitle> <CardTitle>Gradient</CardTitle>
<div class="card-subtitle">Build a gradient from any two colors and preview it live.</div>
<form action=""> <form action="">
<div class="row g-4"> <div class="row g-4">
<div class="col"> <div class="col">
@@ -174,9 +194,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
<div class="col-6"> <div class="col-12 col-lg-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Gradient colors</CardTitle>
<div class="card-subtitle">Every color faded to transparent, fading in from the left or the right.</div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="space-y"> <div class="space-y">
preview/pages/datagrid.astro
+12 -1
View File
@@ -3,10 +3,21 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro' import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import Datagrid from '@shared/components/parts/Datagrid.astro' import Datagrid from '@shared/components/parts/Datagrid.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const datagridDocsUrl = getDocsUrl('/ui/components/datagrid')
--- ---
<DefaultLayout title="Data grid" pageHeader="Data grid" pageMenu="base.datagrid"> <DefaultLayout title="Data grid" pageMenu="base.datagrid" description="A data grid lays out label/value pairs in a compact, aligned grid.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Data grid</h1>
<a href={datagridDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<Card> <Card>
<CardHeader title="Base info" /> <CardHeader title="Base info" />
<CardBody> <CardBody>
preview/pages/dropdowns.astro
+12 -1
View File
@@ -2,9 +2,20 @@
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import DropdownMenu from '@ui/DropdownMenu.astro' import DropdownMenu from '@ui/DropdownMenu.astro'
import DropdownMenuAll from '@ui/DropdownMenuAll.astro' import DropdownMenuAll from '@ui/DropdownMenuAll.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const dropdownDocsUrl = getDocsUrl('/ui/components/dropdown')
--- ---
<DefaultLayout title="Dropdowns" pageHeader="Dropdowns" pageMenu="base.dropdowns"> <DefaultLayout title="Dropdowns" pageMenu="base.dropdowns" description="Dropdown menus for actions, filters, and selections, always shown open here for reference.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Dropdowns</h1>
<a href={dropdownDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row"> <div class="row">
<div class="col-sm-6 col-lg-3"> <div class="col-sm-6 col-lg-3">
<DropdownMenuAll show /> <DropdownMenuAll show />
preview/pages/lists.astro
+12 -1
View File
@@ -2,14 +2,25 @@
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro' import CardHeader from '@ui/CardHeader.astro'
import Icon from '@ui/Icon.astro'
import UsersList from '@shared/components/cards/UsersList.astro' import UsersList from '@shared/components/cards/UsersList.astro'
import UsersList2 from '@shared/components/cards/UsersList2.astro' import UsersList2 from '@shared/components/cards/UsersList2.astro'
import UsersListHeaders from '@shared/components/cards/UsersListHeaders.astro' import UsersListHeaders from '@shared/components/cards/UsersListHeaders.astro'
import ListGroup from '@ui/ListGroup.astro' import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro' import ListGroupItem from '@ui/ListGroupItem.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const listGroupDocsUrl = getDocsUrl('/ui/components/list-group')
--- ---
<DefaultLayout title="Lists" pageHeader="Lists" pageMenu="base.lists"> <DefaultLayout title="Lists" pageMenu="base.lists" description="Lists of users, contacts, and links — built from list-group items or a plain card body.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Lists</h1>
<a href={listGroupDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-md-6"> <div class="col-md-6">
<div class="row row-cards"> <div class="row row-cards">
preview/pages/modals.astro
+12 -1
View File
@@ -4,6 +4,7 @@
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import ModalInline from '@shared/components/modals/ModalInline.astro' import ModalInline from '@shared/components/modals/ModalInline.astro'
import SimpleModalContent from '@shared/components/modals/SimpleModalContent.astro' import SimpleModalContent from '@shared/components/modals/SimpleModalContent.astro'
import LargeModalContent from '@shared/components/modals/LargeModalContent.astro' import LargeModalContent from '@shared/components/modals/LargeModalContent.astro'
@@ -22,11 +23,21 @@ import EditProfileModalContent from '@shared/components/modals/EditProfileModalC
import ConfirmDeleteModalContent from '@shared/components/modals/ConfirmDeleteModalContent.astro' import ConfirmDeleteModalContent from '@shared/components/modals/ConfirmDeleteModalContent.astro'
import ChangePasswordModalContent from '@shared/components/modals/ChangePasswordModalContent.astro' import ChangePasswordModalContent from '@shared/components/modals/ChangePasswordModalContent.astro'
import AddTaskModalContent from '@shared/components/modals/AddTaskModalContent.astro' import AddTaskModalContent from '@shared/components/modals/AddTaskModalContent.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0' const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0'
const modalDocsUrl = getDocsUrl('/ui/components/modal')
--- ---
<DefaultLayout title="Modals" pageHeader="Modals" pageMenu="base.modals" pageLibs={['signature_pad', 'hugerte', 'litepicker', 'tom-select']}> <DefaultLayout title="Modals" pageMenu="base.modals" pageLibs={['signature_pad', 'hugerte', 'litepicker', 'tom-select']} description="Modals interrupt the page to ask for input, confirmation, or a focused action.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Modals</h1>
<a href={modalDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<Card> <Card>
<CardBody> <CardBody>
<div class="row g-5"> <div class="row g-5">
preview/pages/navigation.astro
+12 -1
View File
@@ -4,9 +4,20 @@
// fluid-search (variant 5) is a no-op — search block in condensed branch is dead code. // fluid-search (variant 5) is a no-op — search block in condensed branch is dead code.
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Navbar from '@shared/components/navbar/Navbar.astro' import Navbar from '@shared/components/navbar/Navbar.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const navbarDocsUrl = getDocsUrl('/ui/layout/navbars')
--- ---
<DefaultLayout title="Navigation" pageHeader="Navigation" pageMenu="base.navigation"> <DefaultLayout title="Navigation" pageMenu="base.navigation" description="Navbar variants — condensed, dark, colored, and with different logo and search layouts.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Navigation</h1>
<a href={navbarDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="box"> <div class="box">
<div class="mb-3"> <div class="mb-3">
<Navbar sample condensed transparent personId={3} /> <Navbar sample condensed transparent personId={3} />
preview/pages/offcanvas.astro
+12 -2
View File
@@ -1,17 +1,27 @@
--- ---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import { ucFirst as capitalize } from '@shared/lib/string-format' import { ucFirst as capitalize, getDocsUrl } from '@shared/lib/string-format'
import ButtonList from '@ui/ButtonList.astro' import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import Offcanvas from '@ui/Offcanvas.astro' import Offcanvas from '@ui/Offcanvas.astro'
import OffcanvasHeader from '@ui/OffcanvasHeader.astro' import OffcanvasHeader from '@ui/OffcanvasHeader.astro'
import OffcanvasBody from '@ui/OffcanvasBody.astro' import OffcanvasBody from '@ui/OffcanvasBody.astro'
const directions = ['start', 'end', 'top', 'bottom'] as const const directions = ['start', 'end', 'top', 'bottom'] as const
const offcanvasDocsUrl = getDocsUrl('/ui/components/offcanvas')
--- ---
<DefaultLayout title="Offcanvas" pageHeader="Offcanvas" pageMenu="base.offcanvas"> <DefaultLayout title="Offcanvas" pageMenu="base.offcanvas" description="An offcanvas panel slides in from an edge of the screen for navigation or supplementary content.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Offcanvas</h1>
<a href={offcanvasDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<Card> <Card>
<CardBody> <CardBody>
<ButtonList> <ButtonList>
preview/pages/pagination.astro
+17 -1
View File
@@ -3,13 +3,27 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Pagination from '@ui/Pagination.astro' import Pagination from '@ui/Pagination.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const paginationDocsUrl = getDocsUrl('/ui/components/pagination')
--- ---
<DefaultLayout title="Pagination" pageHeader="Pagination" pageMenu="base.pagination"> <DefaultLayout title="Pagination" pageMenu="base.pagination" description="Pagination splits a long list of results into pages, with Prev/Next controls.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Pagination</h1>
<a href={paginationDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Numbered</CardTitle>
<div class="card-subtitle">Page numbers, with or without <code>text</code> Prev/Next labels.</div>
<Pagination /> <Pagination />
<Pagination text /> <Pagination text />
</CardBody> </CardBody>
@@ -18,6 +32,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-12"> <div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>With descriptions</CardTitle>
<div class="card-subtitle">Add <code>prevDescription</code>/<code>nextDescription</code> to name the adjacent page.</div>
<Pagination count={0} prevDescription="Getting started" nextDescription="Breadcrumbs" /> <Pagination count={0} prevDescription="Getting started" nextDescription="Breadcrumbs" />
</CardBody> </CardBody>
</Card> </Card>
preview/pages/patterns.astro
+12 -1
View File
@@ -3,16 +3,27 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro' import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import BackgroundPattern from '@ui/BackgroundPattern.astro' import BackgroundPattern from '@ui/BackgroundPattern.astro'
import site from '@data/site.json' import site from '@data/site.json'
import { getDocsUrl } from '@shared/lib/string-format'
const patternColors = Object.keys(site.colors) const patternColors = Object.keys(site.colors)
const patternSizes = ['sm', 'md', 'lg', 'xl'] as const const patternSizes = ['sm', 'md', 'lg', 'xl'] as const
const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'lines-vertical', 'grid', 'grid-diagonal', 'blueprint', 'circles', 'diagonal-stripes', 'diagonal-stripes-2', 'zigzag', 'vertical-stripes', 'horizontal-stripes'] as const const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'lines-vertical', 'grid', 'grid-diagonal', 'blueprint', 'circles', 'diagonal-stripes', 'diagonal-stripes-2', 'zigzag', 'vertical-stripes', 'horizontal-stripes'] as const
const patternsDocsUrl = getDocsUrl('/ui/utilities/background-patterns')
--- ---
<DefaultLayout title="Patterns" pageHeader="Patterns" pageMenu="base.patterns"> <DefaultLayout title="Patterns" pageMenu="base.patterns" description="Background patterns you can apply to any element with a utility class.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Patterns</h1>
<a href={patternsDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12">
<Card> <Card>
preview/pages/placeholder.astro
+16 -5
View File
@@ -1,25 +1,36 @@
--- ---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Icon from '@ui/Icon.astro'
import PlaceholderCard1 from '@shared/components/cards/placeholder/Card1.astro' import PlaceholderCard1 from '@shared/components/cards/placeholder/Card1.astro'
import PlaceholderCard2 from '@shared/components/cards/placeholder/Card2.astro' import PlaceholderCard2 from '@shared/components/cards/placeholder/Card2.astro'
import PlaceholderCard3 from '@shared/components/cards/placeholder/Card3.astro' import PlaceholderCard3 from '@shared/components/cards/placeholder/Card3.astro'
import PlaceholderCard4 from '@shared/components/cards/placeholder/Card4.astro' import PlaceholderCard4 from '@shared/components/cards/placeholder/Card4.astro'
import PlaceholderCard5 from '@shared/components/cards/placeholder/Card5.astro' import PlaceholderCard5 from '@shared/components/cards/placeholder/Card5.astro'
import PlaceholderCard6 from '@shared/components/cards/placeholder/Card6.astro' import PlaceholderCard6 from '@shared/components/cards/placeholder/Card6.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const cols = [1, 2, 3, 4] const cols = [1, 2, 3, 4]
const placeholderDocsUrl = getDocsUrl('/ui/components/placeholder')
--- ---
<DefaultLayout title="Placeholder" pageHeader="Placeholder" pageMenu="base.placeholder"> <DefaultLayout title="Placeholder" pageMenu="base.placeholder" description="Placeholders mimic the shape of content that hasn't loaded yet.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Placeholder</h1>
<a href={placeholderDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
{ {
cols.map(() => ( cols.map(() => (
<div class="col-3"> <div class="col-6 col-md-3">
<PlaceholderCard1 /> <PlaceholderCard1 />
</div> </div>
)) ))
} }
<div class="col-4"> <div class="col-12 col-md-4">
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12">
<PlaceholderCard3 /> <PlaceholderCard3 />
@@ -29,7 +40,7 @@ const cols = [1, 2, 3, 4]
</div> </div>
</div> </div>
</div> </div>
<div class="col-4"> <div class="col-12 col-md-4">
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12">
<PlaceholderCard1 /> <PlaceholderCard1 />
@@ -39,7 +50,7 @@ const cols = [1, 2, 3, 4]
</div> </div>
</div> </div>
</div> </div>
<div class="col-4"> <div class="col-12 col-md-4">
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12">
<PlaceholderCard5 /> <PlaceholderCard5 />
preview/pages/prose.astro
+155
View File
@@ -0,0 +1,155 @@
---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Prose from '@ui/Prose.astro'
import Icon from '@ui/Icon.astro'
import Avatar from '@ui/Avatar.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const proseDocsUrl = getDocsUrl('/ui/base/prose')
---
<DefaultLayout title="Prose" pageMenu="base.prose" description="Wrap long-form content in .prose to style headings, paragraphs, lists, and tables without adding classes to every element.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Prose</h1>
<a href={proseDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row justify-content-center">
<div class="col-lg-9 col-xl-8">
<div class="card card-lg">
<div class="card-body">
<Prose>
<h1>Getting started with documentation <span class="badge">New</span></h1>
<div class="d-flex align-items-center text-secondary mb-4">
<Avatar placeholder="PK" size="sm" class="me-2" />
Written by Paweł Kuna · 6 min read
</div>
<p class="lead">
Writing clear and effective documentation is essential for any project. When you create content that others will read and use, proper formatting makes all the difference. <em>Good documentation</em> helps users understand complex concepts quickly and efficiently.
</p>
<blockquote>
<p>Documentation is a love letter that you write to your future self.</p>
</blockquote>
<p>
The foundation of great documentation starts with <strong>understanding your audience</strong> and their needs. Along the way you'll reach for a handful of inline elements: <mark>highlights</mark> to draw the eye, an <abbr title="HyperText Markup Language">HTML</abbr> tag for terms that deserve a definition,
and <del>outdated advice</del> replaced with <ins>the current recommendation</ins>. Formulas read naturally too, like H<sub>2</sub>O or 2<sup>10</sup>.
</p>
<p>
As <cite>The Elements of Style</cite> puts it, omit needless words — the same rule applies to interfaces and to the docs that explain them.
</p>
<div class="callout">
<p>
<strong>Tip.</strong> Keep a glossary of terms your readers might not know. It saves you from re-explaining the same concept in every article.
</p>
</div>
<h2>A quick glossary</h2>
<dl>
<dt>Prose</dt>
<dd>Long-form, readable content — articles, changelogs, help center entries.</dd>
<dt>Markdown</dt>
<dd>A plain-text format that compiles down to the same HTML this page uses.</dd>
<dt>Style guide</dt>
<dd>A shared reference so every writer on the team formats things the same way.</dd>
</dl>
<h2>Adding code examples</h2>
<p>
Inline code looks like <code>console.log("Hello")</code> and uses monospace styling. For anything longer, drop it into a code block, and mention shortcuts with <kbd>Ctrl</kbd> + <kbd>C</kbd> style keys:
</p>
<pre><code>{`function add(a, b) {\n return a + b;\n}`}</code></pre>
<h2>Structuring steps and points</h2>
<p>Use an ordered list to walk through a process:</p>
<ol>
<li>Start with the most important information.</li>
<li>Provide context before technical details.</li>
<li>Include practical examples.</li>
</ol>
<p>And an unordered list for related points that don't have a specific order:</p>
<ul>
<li>Write clear, concise list items.</li>
<li>Keep the structure consistent.</li>
<li>Avoid overly long items.</li>
</ul>
<h3>Nesting related items</h3>
<p>Lists can nest, with indentation and spacing handled automatically:</p>
<ul>
<li>
Editing
<ul>
<li>Undo and redo</li>
<li>Cut, copy, and paste</li>
</ul>
</li>
<li>
Formatting
<ul>
<li>Bold and italic</li>
<li>Headings and lists</li>
</ul>
</li>
<li>Sharing</li>
</ul>
<h3>A visual checklist</h3>
<p>For a status readers can scan at a glance, drop in the steps component instead of a plain list:</p>
<ul class="steps steps-vertical steps-counter my-4">
<li class="step-item">Draft</li>
<li class="step-item">Review</li>
<li class="step-item active">Publish</li>
<li class="step-item">Announce</li>
</ul>
<hr />
<h2>Supporting images</h2>
<p>Images should support the text and provide useful context, not just decorate the page.</p>
<figure>
<img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt="Open book and coffee" />
<figcaption class="text-secondary small mt-2">A quiet spot makes for better writing sessions.</figcaption>
</figure>
<h2>Comparing data in tables</h2>
<p>Tables work best for comparing related data points, like votes on a proposal:</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Up-votes</th>
<th>Down-votes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>Bob</td>
<td>4</td>
<td>3</td>
</tr>
<tr>
<td>Charlie</td>
<td>7</td>
<td>9</td>
</tr>
<tr>
<td>Totals</td>
<td>21</td>
<td>23</td>
</tr>
</tbody>
</table>
</Prose>
</div>
</div>
</div>
</div>
</DefaultLayout>
preview/pages/segmented-control.astro
+37 -1
View File
@@ -3,13 +3,27 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import NavSegmented from '@ui/NavSegmented.astro' import NavSegmented from '@ui/NavSegmented.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const segmentedControlDocsUrl = getDocsUrl('/ui/components/segmented-control')
--- ---
<DefaultLayout title="Segmented control" pageHeader="Segmented control" pageMenu="base.segmented-control"> <DefaultLayout title="Segmented control" pageMenu="base.segmented-control" description="A segmented control lets users pick one option from a small, always-visible set.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Segmented control</h1>
<a href={segmentedControlDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Basic</CardTitle>
<div class="card-subtitle">A list of <code>items</code> is enough for a plain control.</div>
<NavSegmented items={['1', '2', '3', '4']} /> <NavSegmented items={['1', '2', '3', '4']} />
</CardBody> </CardBody>
</Card> </Card>
@@ -17,6 +31,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Any content</CardTitle>
<div class="card-subtitle">Items can be any short text, including emoji.</div>
<NavSegmented items={['👦', '👦🏿', '👦🏾', '👦🏽', '👦🏼', '👦🏻']} /> <NavSegmented items={['👦', '👦🏿', '👦🏾', '👦🏽', '👦🏼', '👦🏻']} />
</CardBody> </CardBody>
</Card> </Card>
@@ -24,6 +40,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Icons only</CardTitle>
<div class="card-subtitle">Pass <code>icons</code> without <code>items</code> for an icon-only control.</div>
<NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} /> <NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} />
</CardBody> </CardBody>
</Card> </Card>
@@ -31,6 +49,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>With icons</CardTitle>
<div class="card-subtitle">Combine <code>items</code> and <code>icons</code> to label each option.</div>
<NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} /> <NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} />
</CardBody> </CardBody>
</Card> </Card>
@@ -38,6 +58,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Vertical</CardTitle>
<div class="card-subtitle">Add <code>vertical</code> to stack the options in a column.</div>
<NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} vertical /> <NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} vertical />
</CardBody> </CardBody>
</Card> </Card>
@@ -45,6 +67,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Vertical with disabled items</CardTitle>
<div class="card-subtitle">Pass indexes to <code>disabled</code> to make specific options unselectable.</div>
<NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} vertical disabled={[3]} /> <NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} vertical disabled={[3]} />
</CardBody> </CardBody>
</Card> </Card>
@@ -52,6 +76,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Disabled items</CardTitle>
<div class="card-subtitle">Disabled options stay visible but can't be selected.</div>
<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} disabled={[4, 5]} /> <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} disabled={[4, 5]} />
</CardBody> </CardBody>
</Card> </Card>
@@ -59,6 +85,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Vertical, no icons</CardTitle>
<div class="card-subtitle">A vertical control also works with text-only items.</div>
<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} vertical={true} /> <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} vertical={true} />
</CardBody> </CardBody>
</Card> </Card>
@@ -66,6 +94,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Independent group</CardTitle>
<div class="card-subtitle">Set a unique <code>name</code> so this control doesn't share selection state with others using the same items.</div>
<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name="checkbox" /> <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name="checkbox" />
</CardBody> </CardBody>
</Card> </Card>
@@ -73,6 +103,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Full width</CardTitle>
<div class="card-subtitle">Add <code>fullWidth</code> to stretch the control across its container.</div>
<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} fullWidth={true} /> <NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} fullWidth={true} />
</CardBody> </CardBody>
</Card> </Card>
@@ -80,6 +112,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Full width, stacked</CardTitle>
<div class="card-subtitle">Multiple full-width controls, one above the other.</div>
<div class="space-y"> <div class="space-y">
<div><NavSegmented items={['Overview', 'Analytics', 'Reports', 'Notifications']} fullWidth={true} /></div> <div><NavSegmented items={['Overview', 'Analytics', 'Reports', 'Notifications']} fullWidth={true} /></div>
<div><NavSegmented items={['Account', 'Password']} fullWidth={true} /></div> <div><NavSegmented items={['Account', 'Password']} fullWidth={true} /></div>
@@ -90,6 +124,8 @@ import CardBody from '@ui/CardBody.astro'
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Sizes</CardTitle>
<div class="card-subtitle">Set <code>size</code> to <code>sm</code> or <code>lg</code> — with text, icons, or both.</div>
<div class="space-y"> <div class="space-y">
<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} size="sm" /></div> <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} size="sm" /></div>
<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} /></div> <div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} /></div>
preview/pages/social-icons.astro
+20 -9
View File
@@ -4,10 +4,12 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import ButtonList from '@ui/ButtonList.astro' import ButtonList from '@ui/ButtonList.astro'
import Trending from '@ui/Trending.astro' import Trending from '@ui/Trending.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import socialTiles from '@data/social-tiles.json' import socialTiles from '@data/social-tiles.json'
import socials from '@data/socials.json' import socials from '@data/socials.json'
import { getDocsUrl } from '@shared/lib/string-format'
interface SocialTile { interface SocialTile {
icon: string icon: string
@@ -24,15 +26,24 @@ interface Social {
const tiles = socialTiles as SocialTile[] const tiles = socialTiles as SocialTile[]
const socialList = socials as Social[] const socialList = socials as Social[]
const fillers = Array.from({ length: 21 }) const fillers = Array.from({ length: 21 })
const socialDocsUrl = getDocsUrl('/ui/plugins/social-icons')
--- ---
<DefaultLayout title="Social icons" pageHeader="Social icons" pageMenu="base.social"> <DefaultLayout title="Social icons" pageMenu="base.social" description="Branded icons and helpers for linking out to, or signing in with, social networks.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Social icons</h1>
<a href={socialDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12">
<div class="row g-3"> <div class="row g-3">
{ {
tiles.map((tile) => ( tiles.map((tile) => (
<div class="col-3"> <div class="col-6 col-md-4 col-lg-3">
<Card> <Card>
<CardBody> <CardBody>
<div class="row align-items-center"> <div class="row align-items-center">
@@ -56,10 +67,9 @@ const fillers = Array.from({ length: 21 })
</div> </div>
<div class="col-12"> <div class="col-12">
<Card> <Card>
<CardHeader>
<h3 class="card-title">Sign in with social media</h3>
</CardHeader>
<CardBody> <CardBody>
<CardTitle>Sign in with social media</CardTitle>
<div class="card-subtitle">A button per provider, for a social sign-in screen.</div>
<ButtonList> <ButtonList>
{ {
socialList.map((social) => ( socialList.map((social) => (
@@ -76,9 +86,10 @@ const fillers = Array.from({ length: 21 })
<div class="col-12"> <div class="col-12">
<Card> <Card>
<CardHeader> <CardBody>
<h3 class="card-title">List of all social media icons</h3> <CardTitle>List of all social media icons</CardTitle>
</CardHeader> <div class="card-subtitle">Every brand icon shipped with the social icons plugin.</div>
</CardBody>
<CardBody class="p-0"> <CardBody class="p-0">
<div class="demo-icons-list-wrap"> <div class="demo-icons-list-wrap">
<div class="demo-icons-list"> <div class="demo-icons-list">
preview/pages/steps.astro
+63 -12
View File
@@ -3,35 +3,65 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro' import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const stepDocsUrl = getDocsUrl('/ui/components/step')
--- ---
<DefaultLayout title="Steps" pageHeader="Steps" pageMenu="base.steps"> <DefaultLayout title="Steps" pageMenu="base.steps" description="Steps show progress through a numbered or labeled sequence, as a horizontal bar, breadcrumb, or vertical timeline.">
<div class="row row-cards"> <div class="d-flex justify-content-between align-items-center mb-4">
<div class="col-lg-8"> <h1 class="page-title">Steps</h1>
<a href={stepDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards mb-5">
<div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Steps horizontal</CardTitle> <CardTitle>Horizontal</CardTitle>
<div class="card-subtitle">Numbered steps for a linear process, with the current step highlighted.</div>
<ul class="steps steps-green my-4"> <ul class="steps steps-green my-4">
<li class="step-item">1</li> <li class="step-item">1</li>
<li class="step-item active">2</li> <li class="step-item active">2</li>
<li class="step-item">3</li> <li class="step-item">3</li>
</ul> </ul>
</CardBody> </CardBody>
</Card>
</div>
<div class="col-12">
<Card>
<CardBody> <CardBody>
<CardTitle>Horizontal counter</CardTitle>
<div class="card-subtitle">The same steps without numbers, for a more minimal look.</div>
<ul class="steps steps-green steps-counter my-4"> <ul class="steps steps-green steps-counter my-4">
<li class="step-item"></li> <li class="step-item"></li>
<li class="step-item active"></li> <li class="step-item active"></li>
<li class="step-item"></li> <li class="step-item"></li>
</ul> </ul>
</CardBody> </CardBody>
</Card>
</div>
<div class="col-12">
<Card>
<CardBody> <CardBody>
<CardTitle>With labels</CardTitle>
<div class="card-subtitle">Give each step a title instead of a number.</div>
<ul class="steps steps-green steps-counter my-4"> <ul class="steps steps-green steps-counter my-4">
<li class="step-item">Cart</li> <li class="step-item">Cart</li>
<li class="step-item active">Billing Information</li> <li class="step-item active">Billing Information</li>
<li class="step-item">Confirmation</li> <li class="step-item">Confirmation</li>
</ul> </ul>
</CardBody> </CardBody>
</Card>
</div>
<div class="col-12">
<Card>
<CardBody> <CardBody>
<CardTitle>Breadcrumb arrows</CardTitle>
<div class="card-subtitle">Chevron-style steps, useful for wizards and checkouts.</div>
<ol class="breadcrumb breadcrumb-arrows"> <ol class="breadcrumb breadcrumb-arrows">
<li class="breadcrumb-item"><a href="#">Step one</a></li> <li class="breadcrumb-item"><a href="#">Step one</a></li>
<li class="breadcrumb-item active"><a href="#">Step two</a></li> <li class="breadcrumb-item active"><a href="#">Step two</a></li>
@@ -39,7 +69,13 @@ import CardTitle from '@ui/CardTitle.astro'
<li class="breadcrumb-item disabled"><a href="#">Step four</a></li> <li class="breadcrumb-item disabled"><a href="#">Step four</a></li>
</ol> </ol>
</CardBody> </CardBody>
</Card>
</div>
<div class="col-12">
<Card>
<CardBody> <CardBody>
<CardTitle>Breadcrumb numbered</CardTitle>
<div class="card-subtitle">Number each step and mute the ones not yet reached.</div>
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">1. Step one</a></li> <li class="breadcrumb-item"><a href="#">1. Step one</a></li>
<li class="breadcrumb-item"><a href="#">2. Step two</a></li> <li class="breadcrumb-item"><a href="#">2. Step two</a></li>
@@ -48,7 +84,13 @@ import CardTitle from '@ui/CardTitle.astro'
<li class="breadcrumb-item disabled"><a href="#">5. Step five</a></li> <li class="breadcrumb-item disabled"><a href="#">5. Step five</a></li>
</ol> </ol>
</CardBody> </CardBody>
</Card>
</div>
<div class="col-12">
<Card>
<CardBody> <CardBody>
<CardTitle>Breadcrumb muted</CardTitle>
<div class="card-subtitle">A quieter style for steps that shouldn't compete with the rest of the page.</div>
<ol class="breadcrumb breadcrumb-muted"> <ol class="breadcrumb breadcrumb-muted">
<li class="breadcrumb-item"><a href="#">1. Step one</a></li> <li class="breadcrumb-item"><a href="#">1. Step one</a></li>
<li class="breadcrumb-item"><a href="#">2. Step two</a></li> <li class="breadcrumb-item"><a href="#">2. Step two</a></li>
@@ -59,31 +101,40 @@ import CardTitle from '@ui/CardTitle.astro'
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
</div>
<div class="col-lg-4"> <div class="row row-cards">
<div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Steps vertical</CardTitle> <CardTitle>Vertical</CardTitle>
<div class="card-subtitle">A title and description per step, for a detailed timeline.</div>
<ul class="steps steps-vertical"> <ul class="steps steps-vertical">
<li class="step-item"> <li class="step-item">
<div class="h4 m-0">Order received</div> <div class="h4 m-0">Order received</div>
<div class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus culpa cum expedita ipsam laborum nam ratione reprehenderit sed sint tenetur!</div> <div class="text-secondary">The order was placed and payment was confirmed. A confirmation email is on its way.</div>
</li> </li>
<li class="step-item"> <li class="step-item">
<div class="h4 m-0">Order received</div> <div class="h4 m-0">Preparing</div>
<div class="text-secondary">Lorem ipsum dolor sit amet.</div> <div class="text-secondary">The warehouse picked and packed the items.</div>
</li> </li>
<li class="step-item active"> <li class="step-item active">
<div class="h4 m-0">Out for delivery</div> <div class="h4 m-0">Out for delivery</div>
<div class="text-secondary">Lorem ipsum dolor sit amet.</div> <div class="text-secondary">The courier has the package and is on the way.</div>
</li> </li>
<li class="step-item"> <li class="step-item">
<div class="h4 m-0">Finalized</div> <div class="h4 m-0">Delivered</div>
<div class="text-secondary">Lorem ipsum dolor sit amet.</div> <div class="text-secondary">Signed for at the delivery address.</div>
</li> </li>
</ul> </ul>
</CardBody> </CardBody>
</Card>
</div>
<div class="col-md-6">
<Card>
<CardBody> <CardBody>
<CardTitle>Vertical counter</CardTitle>
<div class="card-subtitle">Numbered steps in a vertical list, without descriptions.</div>
<ul class="steps steps-counter steps-vertical"> <ul class="steps steps-counter steps-vertical">
<li class="step-item">Step one</li> <li class="step-item">Step one</li>
<li class="step-item">Step two</li> <li class="step-item">Step two</li>
preview/pages/tabs.astro
+12 -1
View File
@@ -1,9 +1,20 @@
--- ---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import TabsCard from '@shared/components/cards/TabsCard.astro' import TabsCard from '@shared/components/cards/TabsCard.astro'
import Icon from '@ui/Icon.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const tabsDocsUrl = getDocsUrl('/ui/layout/navs-tabs')
--- ---
<DefaultLayout title="Tabs" pageHeader="Tabs" pageMenu="base.tabs"> <DefaultLayout title="Tabs" pageMenu="base.tabs" description="Tabs switch between related panels of content inside a card.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Tabs</h1>
<a href={tabsDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-md-4"><TabsCard id="1" settings /></div> <div class="col-md-4"><TabsCard id="1" settings /></div>
<div class="col-md-4"><TabsCard id="2" reverse settings /></div> <div class="col-md-4"><TabsCard id="2" reverse settings /></div>
preview/pages/tags.astro
+22 -3
View File
@@ -5,9 +5,11 @@ import TagList from '@ui/TagList.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro' import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import people from '@data/people.json' import people from '@data/people.json'
import flags from '@data/flags.json' import flags from '@data/flags.json'
import siteData from '@data/site.json' import siteData from '@data/site.json'
import { getDocsUrl } from '@shared/lib/string-format'
const tagIcons = ['bold', 'italic', 'underline', 'copy', 'scissors', 'file-plus', 'file-minus', 'ghost', 'star', 'script', 'photo', 'dog', 'piano'] const tagIcons = ['bold', 'italic', 'underline', 'copy', 'scissors', 'file-plus', 'file-minus', 'ghost', 'star', 'script', 'photo', 'dog', 'piano']
@@ -18,14 +20,24 @@ const people8 = people.slice(0, 8)
// site.colors yields value objects with .class / .title. // site.colors yields value objects with .class / .title.
const colors = Object.values(siteData.colors) as { class: string; title: string }[] const colors = Object.values(siteData.colors) as { class: string; title: string }[]
const tagDocsUrl = getDocsUrl('/ui/components/tag')
--- ---
<DefaultLayout title="Tags" pageHeader="Tags" pageMenu="base.tags"> <DefaultLayout title="Tags" pageMenu="base.tags" description="Tags are compact labels for filters, categories, and keywords.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Tags</h1>
<a href={tagDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3"> <div class="row row-cards row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col"> <div class="col">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Default tags</CardTitle> <CardTitle>Default tags</CardTitle>
<div class="card-subtitle">The base tag, for a plain label.</div>
<TagList> <TagList>
{range(1, 14).map((i) => <Tag text={`Label ${i}`} />)} {range(1, 14).map((i) => <Tag text={`Label ${i}`} />)}
</TagList> </TagList>
@@ -37,6 +49,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with flag</CardTitle> <CardTitle>Tags with flag</CardTitle>
<div class="card-subtitle">Pair a tag with a country flag.</div>
<TagList> <TagList>
{flags9.map((country) => <Tag text={country.name} flag={country.flag} />)} {flags9.map((country) => <Tag text={country.name} flag={country.flag} />)}
</TagList> </TagList>
@@ -48,6 +61,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with icon</CardTitle> <CardTitle>Tags with icon</CardTitle>
<div class="card-subtitle">Add an icon before the label.</div>
<TagList> <TagList>
{tagIcons.map((icon) => <Tag text={icon} icon={icon} />)} {tagIcons.map((icon) => <Tag text={icon} icon={icon} />)}
</TagList> </TagList>
@@ -59,6 +73,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with avatar</CardTitle> <CardTitle>Tags with avatar</CardTitle>
<div class="card-subtitle">Add a person's avatar before the label.</div>
<TagList> <TagList>
{people8.map((person) => <Tag text={person.full_name} person={person} />)} {people8.map((person) => <Tag text={person.full_name} person={person} />)}
</TagList> </TagList>
@@ -70,6 +85,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with status</CardTitle> <CardTitle>Tags with status</CardTitle>
<div class="card-subtitle">Add a small status dot in any theme or extended color.</div>
<TagList> <TagList>
{colors.map((color) => <Tag text={color.title} status={color.class} />)} {colors.map((color) => <Tag text={color.title} status={color.class} />)}
</TagList> </TagList>
@@ -81,6 +97,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Tags with legend</CardTitle> <CardTitle>Tags with legend</CardTitle>
<div class="card-subtitle">Add a colored legend square instead of a dot.</div>
<TagList> <TagList>
{colors.map((color) => <Tag text={color.title} legend={color.class} />)} {colors.map((color) => <Tag text={color.title} legend={color.class} />)}
</TagList> </TagList>
@@ -91,7 +108,8 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<div class="col"> <div class="col">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Default tags</CardTitle> <CardTitle>Selectable tags</CardTitle>
<div class="card-subtitle">Add <code>checkbox</code> to let users toggle a tag on and off.</div>
<TagList> <TagList>
{range(1, 6).map((i) => <Tag text={`Label ${i}`} checkbox={true} />)} {range(1, 6).map((i) => <Tag text={`Label ${i}`} checkbox={true} />)}
{range(7, 12).map((i) => <Tag text={`Label ${i}`} checkbox={true} checked={true} />)} {range(7, 12).map((i) => <Tag text={`Label ${i}`} checkbox={true} checked={true} />)}
@@ -103,7 +121,8 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
<div class="col"> <div class="col">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Default tags</CardTitle> <CardTitle>Tags with badge</CardTitle>
<div class="card-subtitle">Add a <code>badge</code> count to the end of the tag.</div>
<TagList> <TagList>
{range(1, 12).map((i) => <Tag text="Label" badge={i} />)} {range(1, 12).map((i) => <Tag text="Label" badge={i} />)}
</TagList> </TagList>
preview/pages/toasts.astro
+12 -1
View File
@@ -4,10 +4,21 @@ import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro' import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import Icon from '@ui/Icon.astro'
import Toast from '@ui/Toast.astro' import Toast from '@ui/Toast.astro'
import { getDocsUrl } from '@shared/lib/string-format'
const toastDocsUrl = getDocsUrl('/ui/components/toast')
--- ---
<DefaultLayout title="Toasts" pageHeader="Toasts" pageMenu="base.toasts"> <DefaultLayout title="Toasts" pageMenu="base.toasts" description="Toasts show a brief, dismissible notification in the corner of the screen.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Toasts</h1>
<a href={toastDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<Card> <Card>
<CardBody> <CardBody>
<ButtonList> <ButtonList>
preview/pages/tracking.astro
+15 -2
View File
@@ -3,7 +3,9 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro' import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro' import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro' import CardTitle from '@ui/CardTitle.astro'
import Icon from '@ui/Icon.astro'
import StatusMonitoring from '@shared/components/cards/StatusMonitoring.astro' import StatusMonitoring from '@shared/components/cards/StatusMonitoring.astro'
import { getDocsUrl } from '@shared/lib/string-format'
interface TrackingItem { interface TrackingItem {
status?: 'success' | 'warning' | 'danger' status?: 'success' | 'warning' | 'danger'
@@ -43,14 +45,24 @@ const uptime: TrackingItem[] = [
{ status: 'success', label: 'Operational' }, { status: 'success', label: 'Operational' },
{ status: 'success', label: 'Operational' }, { status: 'success', label: 'Operational' },
] ]
const trackingDocsUrl = getDocsUrl('/ui/components/tracking')
--- ---
<DefaultLayout title="Tracking" pageHeader="Tracking" pageMenu="base.tracking"> <DefaultLayout title="Tracking" pageMenu="base.tracking" description="Tracking blocks show an uptime or activity history as a row of colored bars.">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="page-title">Tracking</h1>
<a href={trackingDocsUrl} target="_blank" rel="noopener" class="link-secondary">
Docs <Icon name="external-link" class="icon-sm" />
</a>
</div>
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Basic example</CardTitle> <CardTitle>Basic example</CardTitle>
<div class="card-subtitle">Hover a block to see its status.</div>
<div class="tracking"> <div class="tracking">
{uptime.map((item) => <div class:list={['tracking-block', item.status && `bg-${item.status}`]} data-bs-toggle="tooltip" data-bs-placement="top" title={item.label} />)} {uptime.map((item) => <div class:list={['tracking-block', item.status && `bg-${item.status}`]} data-bs-toggle="tooltip" data-bs-placement="top" title={item.label} />)}
</div> </div>
@@ -65,7 +77,8 @@ const uptime: TrackingItem[] = [
<div class="col-md-6"> <div class="col-md-6">
<Card> <Card>
<CardBody> <CardBody>
<CardTitle>Squares variant (.tracking-squares)</CardTitle> <CardTitle>Squares variant</CardTitle>
<div class="card-subtitle">Add <code>.tracking-squares</code> for square, evenly spaced blocks.</div>
<div class="tracking tracking-squares"> <div class="tracking tracking-squares">
{uptime.map((item) => <div class:list={['tracking-block', item.status && `bg-${item.status}`]} data-bs-toggle="tooltip" data-bs-placement="top" title={item.label} />)} {uptime.map((item) => <div class:list={['tracking-block', item.status && `bg-${item.status}`]} data-bs-toggle="tooltip" data-bs-placement="top" title={item.label} />)}
</div> </div>