mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Migrate preview and docs packages from Eleventy to Astro (#2694)
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,925 @@
|
||||
---
|
||||
// Port of preview/pages/all-elements.html — a kitchen-sink of every component.
|
||||
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
||||
import Button from '@shared/components/Button.astro';
|
||||
import Alert from '@shared/components/Alert.astro';
|
||||
import Badge from '@shared/components/ui/Badge.astro';
|
||||
import Progress from '@shared/components/ui/Progress.astro';
|
||||
import Select from '@shared/components/ui/Select.astro';
|
||||
import Check from '@shared/components/ui/form/Check.astro';
|
||||
import Nav from '@shared/components/ui/Nav.astro';
|
||||
import Breadcrumb from '@shared/components/ui/Breadcrumb.astro';
|
||||
import Pagination from '@shared/components/ui/Pagination.astro';
|
||||
import Avatar from '@shared/components/ui/Avatar.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Dropdown from '@shared/components/ui/Dropdown.astro';
|
||||
import Accordion from '@shared/components/ui/Accordion.astro';
|
||||
import Spinner from '@shared/components/ui/Spinner.astro';
|
||||
import Rating from '@shared/components/ui/Rating.astro';
|
||||
import Steps from '@shared/components/ui/Steps.astro';
|
||||
import StatusDot from '@shared/components/ui/StatusDot.astro';
|
||||
import Toast from '@shared/components/ui/Toast.astro';
|
||||
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
|
||||
import InputGroup from '@shared/components/InputGroup.astro';
|
||||
import Range from '@shared/components/ui/Range.astro';
|
||||
import Tag from '@shared/components/ui/Tag.astro';
|
||||
import Ribbon from '@shared/components/ui/Ribbon.astro';
|
||||
import Flag from '@shared/components/ui/Flag.astro';
|
||||
import Payment from '@shared/components/ui/Payment.astro';
|
||||
import Timeline from '@shared/components/ui/Timeline.astro';
|
||||
import Empty from '@shared/components/ui/Empty.astro';
|
||||
import NavSegmented from '@shared/components/ui/NavSegmented.astro';
|
||||
|
||||
// Code-block content lives in the frontmatter so Astro does not try to evaluate
|
||||
// its `${name}` / `{ }` as expressions; injected verbatim via set:html.
|
||||
const codeExample = `// JavaScript example
|
||||
function greetUser(name) {
|
||||
console.log(\`Hello, \${name}!\`);
|
||||
return true;
|
||||
}`;
|
||||
---
|
||||
|
||||
<DefaultLayout
|
||||
title="All Elements - Kitchen Sink"
|
||||
pageHeader="All Elements"
|
||||
pageMenu="base.all-elements"
|
||||
pageLibs={['nouislider', 'star-rating.js', 'tabler-flags', 'tabler-payments', 'tom-select']}
|
||||
>
|
||||
<div class="row row-cards">
|
||||
<!-- Typography Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Typography</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p class="lead">This is a lead paragraph with larger text.</p>
|
||||
<p>This is a regular paragraph with <strong>bold text</strong>, <em>italic text</em>, and
|
||||
<u>underlined text</u>.</p>
|
||||
<p><small class="text-muted">This is small muted text.</small></p>
|
||||
<p class="text-primary">Primary text color</p>
|
||||
<p class="text-success">Success text color</p>
|
||||
<p class="text-danger">Danger text color</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Standard Buttons</h4>
|
||||
<div class="btn-list mb-3">
|
||||
<Button text="Default" />
|
||||
<Button text="Primary" color="primary" icon="star" />
|
||||
<Button text="Secondary" color="secondary" />
|
||||
<Button text="Success" color="success" icon="check" />
|
||||
<Button text="Warning" color="warning" />
|
||||
<Button text="Danger" color="danger" icon="x" />
|
||||
<Button text="Info" color="info" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Button Sizes</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
<Button text="Small" size="sm" />
|
||||
<Button text="Default" />
|
||||
<Button text="Large" size="lg" />
|
||||
</div>
|
||||
|
||||
<h4>Icon Buttons</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
<Button icon="heart" iconOnly />
|
||||
<Button icon="star" iconOnly />
|
||||
<Button icon="check" iconOnly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Simple Card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This is a simple card with header and body content.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Card with Footer</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>This card includes a footer section.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="d-flex">
|
||||
<a class="btn btn-link">Cancel</a>
|
||||
<a class="btn btn-primary ms-auto">Save</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Alerts</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Alert type="info" title="This is a primary alert with an icon." />
|
||||
<Alert type="success" title="This is a success alert message." />
|
||||
<Alert type="warning" title="This is a warning alert message." />
|
||||
<Alert type="danger" title="This is a danger alert message." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badges Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Badges</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Badge text="Default" />
|
||||
<Badge text="Primary" color="primary" />
|
||||
<Badge text="Secondary" color="secondary" />
|
||||
<Badge text="Success" color="success" />
|
||||
<Badge text="Warning" color="warning" />
|
||||
<Badge text="Danger" color="danger" />
|
||||
</div>
|
||||
<div>
|
||||
<Badge text="With Icon" color="primary" icon="star" />
|
||||
<Badge text="Light Badge" color="primary" light />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bars Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Progress Bars</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Progress value="25" />
|
||||
</div>
|
||||
<div>
|
||||
<Progress value="50" color="success" />
|
||||
</div>
|
||||
<div>
|
||||
<Progress value="75" color="warning" />
|
||||
</div>
|
||||
<div>
|
||||
<Progress value="90" color="danger" showValue />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Elements Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Form Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Text Input</label>
|
||||
<input type="text" class="form-control" placeholder="Enter text">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Email Input</label>
|
||||
<input type="email" class="form-control" placeholder="Enter email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Password Input</label>
|
||||
<input type="password" class="form-control" placeholder="Enter password">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select Dropdown</label>
|
||||
<Select id="demo-select" values="Option 1,Option 2,Option 3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Textarea</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Enter message"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Checkboxes</label>
|
||||
<Check title="Option 1" type="checkbox" />
|
||||
<Check title="Option 2" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Radio Buttons</label>
|
||||
<Check title="Option 1" type="radio" name="radio-demo" />
|
||||
<Check title="Option 2" type="radio" name="radio-demo" checked />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Switch</label>
|
||||
<Check title="Enable notifications" switch />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Elements -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Navigation Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Tabs</h4>
|
||||
<div class="mb-3">
|
||||
<Nav tabs class="mb-4" />
|
||||
</div>
|
||||
|
||||
<h4>Pills Navigation</h4>
|
||||
<div class="mb-3">
|
||||
<Nav pills class="mb-4" />
|
||||
</div>
|
||||
|
||||
<h4>Breadcrumb</h4>
|
||||
<Breadcrumb pages="Home,Library,Data" homeIcon />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Pagination</h4>
|
||||
{/* active-item="2" is a STRING in Liquid; `i == "2"` never matches the
|
||||
integer index, so no page renders active — reproduced by passing a string. */}
|
||||
<Pagination count={5} activeItem="2" class="mb-4" />
|
||||
|
||||
<h4>Pagination with Text</h4>
|
||||
<Pagination count={3} text />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lists Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Lists</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Unordered List</h4>
|
||||
<ul>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
</ul>
|
||||
|
||||
<h4>Ordered List</h4>
|
||||
<ol>
|
||||
<li>First item</li>
|
||||
<li>Second item</li>
|
||||
<li>Third item</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Table</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>John Doe</td>
|
||||
<td>john@example.com</td>
|
||||
<td><Badge text="Active" color="success" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jane Smith</td>
|
||||
<td>jane@example.com</td>
|
||||
<td><Badge text="Pending" color="warning" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bob Johnson</td>
|
||||
<td>bob@example.com</td>
|
||||
<td><Badge text="Inactive" color="danger" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Avatars Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Avatars</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Avatar placeholder="JD" size="sm" />
|
||||
<Avatar placeholder="JS" />
|
||||
<Avatar placeholder="BJ" size="lg" />
|
||||
<Avatar placeholder="AB" size="xl" />
|
||||
</div>
|
||||
<div>
|
||||
<Avatar placeholder="RD" shape="avatar-rounded" />
|
||||
<Avatar placeholder="PR" color="primary" shape="avatar-rounded" />
|
||||
<Avatar placeholder="SC" color="success" shape="avatar-rounded" />
|
||||
</div>
|
||||
<div>
|
||||
<Avatar icon="user" />
|
||||
<Avatar icon="star" color="warning" />
|
||||
<Avatar placeholder="ST" status="success" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
<div>
|
||||
<Icon name="home" />
|
||||
<Icon name="user" />
|
||||
<Icon name="settings" />
|
||||
<Icon name="heart" />
|
||||
<Icon name="star" />
|
||||
<Icon name="bell" />
|
||||
<Icon name="mail" />
|
||||
<Icon name="phone" />
|
||||
<Icon name="calendar" />
|
||||
<Icon name="clock" />
|
||||
<Icon name="map-pin" />
|
||||
<Icon name="camera" />
|
||||
<Icon name="plus" />
|
||||
<Icon name="minus" />
|
||||
<Icon name="edit" />
|
||||
<Icon name="trash" />
|
||||
<Icon name="download" />
|
||||
<Icon name="upload" />
|
||||
<Icon name="search" />
|
||||
<Icon name="filter" />
|
||||
<Icon name="refresh" />
|
||||
<Icon name="share" />
|
||||
<Icon name="copy" />
|
||||
<Icon name="external-link" />
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-primary"><Icon name="check" /></span>
|
||||
<span class="text-success"><Icon name="circle-check" /></span>
|
||||
<span class="text-warning"><Icon name="alert-triangle" /></span>
|
||||
<span class="text-danger"><Icon name="alert-circle" /></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dropdowns Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Dropdowns</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<Dropdown mainBtn="Primary Dropdown" options="Action, Another action, Something else here" />
|
||||
<Dropdown mainBtn="Secondary Dropdown" options="Edit, Copy, Delete" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Elements Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Interactive Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Accordion</h4>
|
||||
<div class="mb-4">
|
||||
<Accordion count={3} id="demo-accordion" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Spinners</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<Spinner type="border" color="primary" />
|
||||
<Spinner type="border" color="success" size="sm" />
|
||||
<Spinner type="grow" color="warning" />
|
||||
<Spinner type="grow" color="danger" size="sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Rating</h4>
|
||||
<div class="mb-3">
|
||||
<Rating id="demo-rating" value="4" />
|
||||
</div>
|
||||
|
||||
<h4>Steps</h4>
|
||||
<div class="mb-3">
|
||||
<Steps count={4} active="2" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<Steps count={4} active="3" numbers />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status & Feedback Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Status Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Status Dots</h4>
|
||||
<div class="mb-3">
|
||||
<StatusDot color="success" />
|
||||
<StatusDot color="warning" />
|
||||
<StatusDot color="danger" />
|
||||
<StatusDot color="info" animated />
|
||||
</div>
|
||||
|
||||
<h4>Toast Notifications</h4>
|
||||
<div class="mb-3">
|
||||
<Toast toastId="demo-toast" show text="This is a sample toast message!" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enhanced Form Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Enhanced Forms</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Input with Icons</h4>
|
||||
<div class="mb-3">
|
||||
<InputIcon placeholder="Search..." icon="search" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<InputIcon placeholder="Loading..." loader />
|
||||
</div>
|
||||
|
||||
<h4>Input Groups</h4>
|
||||
<div class="mb-3">
|
||||
<InputGroup prepend="@" placeholder="Username" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<InputGroup append=".00" prepend="$" placeholder="Price" />
|
||||
</div>
|
||||
|
||||
<h4>Range Slider</h4>
|
||||
<div class="mb-3">
|
||||
<Range id="demo-range" min={0} max={100} value="50" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags & Labels -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tags & Labels</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Tags</h4>
|
||||
<div class="mb-3">
|
||||
<Tag text="Primary Tag" icon="star" />
|
||||
<Tag text="Success Tag" status="success" />
|
||||
<Tag text="Warning Tag" status="warning" />
|
||||
</div>
|
||||
|
||||
<h4>Ribbons</h4>
|
||||
<div class="position-relative mb-4" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
|
||||
<Ribbon text="New" color="success" />
|
||||
</div>
|
||||
<div class="position-relative mb-3" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
|
||||
<Ribbon text="Sale" color="danger" top />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Media Elements -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Media Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Flags</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<Flag flag="us" />
|
||||
<Flag flag="gb" />
|
||||
<Flag flag="de" />
|
||||
<Flag flag="fr" />
|
||||
<Flag flag="pl" />
|
||||
<Flag flag="es" />
|
||||
<Flag flag="it" />
|
||||
<Flag flag="nl" />
|
||||
<Flag flag="ca" />
|
||||
<Flag flag="au" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Payment Icons</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<Payment payment="visa" />
|
||||
<Payment payment="mastercard" />
|
||||
<Payment payment="paypal" />
|
||||
<Payment payment="americanexpress" />
|
||||
<Payment payment="applepay" />
|
||||
<Payment payment="google-pay" />
|
||||
<Payment payment="stripe" />
|
||||
<Payment payment="discover" />
|
||||
<Payment payment="jcb" />
|
||||
<Payment payment="maestro" />
|
||||
<Payment payment="dinersclub" />
|
||||
<Payment payment="bitcoin" />
|
||||
<Payment payment="ethereum" />
|
||||
<Payment payment="klarna" />
|
||||
<Payment payment="venmo" />
|
||||
<Payment payment="square" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Timeline</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Timeline />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Empty State</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<Empty
|
||||
title="No data found"
|
||||
subtitle="Try adjusting your search or filter to find what you're looking for."
|
||||
illustration="boy-girl.svg"
|
||||
buttonText="Add new item"
|
||||
buttonIcon="plus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Modals</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-demo">
|
||||
Open Modal
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-success">
|
||||
Success Modal
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Modal -->
|
||||
<div class="modal modal-blur fade" id="modal-demo" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Modal Title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This is a sample modal dialog. You can put any content here.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Modal -->
|
||||
<div class="modal modal-blur fade" id="modal-success" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body text-center py-4">
|
||||
<Icon name="circle-check" color="success" size="xl" class="mb-2" />
|
||||
<h3>Success!</h3>
|
||||
<div class="text-secondary">Your action was completed successfully.</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="w-100">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="btn w-100" data-bs-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-success w-100" data-bs-dismiss="modal">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Button Groups Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Button Groups</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Basic Button Group</h4>
|
||||
<div class="btn-group mb-3" role="group">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
</div>
|
||||
|
||||
<h4>Button Toolbar</h4>
|
||||
<div class="btn-toolbar mb-3" role="toolbar">
|
||||
<div class="btn-group me-2" role="group">
|
||||
<button type="button" class="btn">1</button>
|
||||
<button type="button" class="btn">2</button>
|
||||
<button type="button" class="btn">3</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn">4</button>
|
||||
<button type="button" class="btn">5</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Vertical Button Group</h4>
|
||||
<div class="btn-group-vertical" role="group">
|
||||
<button type="button" class="btn">Top</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Bottom</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Segmented Navigation Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Segmented Navigation</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Basic Segmented</h4>
|
||||
<div class="mb-3">
|
||||
<NavSegmented items="Home,Profile,Settings" />
|
||||
</div>
|
||||
|
||||
<h4>With Icons</h4>
|
||||
<div class="mb-3">
|
||||
<NavSegmented icons="home,user,settings" />
|
||||
</div>
|
||||
|
||||
<h4>With Emojis</h4>
|
||||
<div class="mb-3">
|
||||
<NavSegmented items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" />
|
||||
</div>
|
||||
|
||||
<h4>With Icons and Text</h4>
|
||||
<div class="mb-3">
|
||||
<NavSegmented items="Home,Profile,Settings" icons="home,user,settings" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collapse Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapse</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Basic Collapse</h4>
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
|
||||
Toggle Collapse
|
||||
</button>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="card card-body">
|
||||
This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Multiple Targets</h4>
|
||||
<div class="btn-list">
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1">
|
||||
Toggle First
|
||||
</button>
|
||||
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2">
|
||||
Toggle Second
|
||||
</button>
|
||||
</div>
|
||||
<div class="collapse" id="multiCollapseExample1">
|
||||
<div class="card card-body mb-2">
|
||||
First collapsible content.
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="multiCollapseExample2">
|
||||
<div class="card card-body">
|
||||
Second collapsible content.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tooltips & Popovers Section -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Tooltips & Popovers</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Tooltips</h4>
|
||||
<div class="btn-list">
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
|
||||
Top
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
|
||||
Right
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
|
||||
Bottom
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
|
||||
Left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Popovers</h4>
|
||||
<div class="btn-list">
|
||||
<button class="btn" data-bs-toggle="popover" data-bs-placement="top" title="Popover Title" data-bs-content="This is popover content on top">
|
||||
Top Popover
|
||||
</button>
|
||||
<button class="btn" data-bs-toggle="popover" data-bs-placement="right" title="Popover Title" data-bs-content="This is popover content on right">
|
||||
Right Popover
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List Groups Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">List Groups</h3>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item">
|
||||
<Icon name="home" class="me-2" />
|
||||
Home
|
||||
</div>
|
||||
<div class="list-group-item active">
|
||||
<Icon name="star" class="me-2" />
|
||||
Active item
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<Icon name="settings" class="me-2" />
|
||||
Settings
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
<Icon name="user" class="me-2" />
|
||||
Profile
|
||||
</div>
|
||||
<div class="list-group-item disabled">
|
||||
<Icon name="lock" class="me-2" />
|
||||
Disabled item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Elements Section -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Content Elements</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h4>Blockquote</h4>
|
||||
<blockquote class="blockquote mb-4">
|
||||
<p>This is a blockquote example with some sample text to demonstrate the styling.</p>
|
||||
<footer class="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<h4>Code Block</h4>
|
||||
<pre class="mb-3"><code set:html={codeExample}></code></pre>
|
||||
|
||||
<h4>Inline Elements</h4>
|
||||
<p>This paragraph contains <code>inline code</code>, <kbd>Ctrl + S</kbd> keyboard shortcut, and <mark>highlighted text</mark>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
Reference in New Issue
Block a user