mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
872 lines
25 KiB
Plaintext
872 lines
25 KiB
Plaintext
---
|
|
|
|
// Code-block content lives in the frontmatter so Astro does not try to evaluate
|
|
// its `${name}` / `{ }` as expressions; injected verbatim via set:html.
|
|
|
|
import ButtonGroup from '@ui/ButtonGroup.astro';
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import Button from '@ui/Button.astro';
|
|
import ButtonList from '@ui/ButtonList.astro';
|
|
import Card from '@ui/Card.astro';
|
|
import CardHeader from '@ui/CardHeader.astro';
|
|
import CardBody from '@ui/CardBody.astro';
|
|
import CardFooter from '@ui/CardFooter.astro';
|
|
import Alert from '@ui/Alert.astro';
|
|
import Badge from '@ui/Badge.astro';
|
|
import Progress from '@ui/Progress.astro';
|
|
import Select from '@ui/Select.astro';
|
|
import Check from '@ui/form/Check.astro';
|
|
import FormGroup from '@ui/FormGroup.astro';
|
|
import Nav from '@ui/Nav.astro';
|
|
import Breadcrumb from '@ui/Breadcrumb.astro';
|
|
import Pagination from '@ui/Pagination.astro';
|
|
import Avatar from '@ui/Avatar.astro';
|
|
import Icon from '@ui/Icon.astro';
|
|
import Dropdown from '@ui/Dropdown.astro';
|
|
import Accordion from '@ui/Accordion.astro';
|
|
import Spinner from '@ui/Spinner.astro';
|
|
import Rating from '@ui/Rating.astro';
|
|
import Steps from '@ui/Steps.astro';
|
|
import StatusDot from '@ui/StatusDot.astro';
|
|
import Toast from '@ui/Toast.astro';
|
|
import InputIcon from '@ui/form/InputIcon.astro';
|
|
import InputGroup from '@ui/InputGroup.astro';
|
|
import Range from '@ui/Range.astro';
|
|
import Tag from '@ui/Tag.astro';
|
|
import Ribbon from '@ui/Ribbon.astro';
|
|
import Flag from '@ui/Flag.astro';
|
|
import Payment from '@ui/Payment.astro';
|
|
import Timeline from '@ui/Timeline.astro';
|
|
import Empty from '@ui/Empty.astro';
|
|
import NavSegmented from '@ui/NavSegmented.astro';
|
|
import ListGroup from '@ui/ListGroup.astro';
|
|
import ListGroupItem from '@ui/ListGroupItem.astro';
|
|
|
|
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">
|
|
<Card>
|
|
<CardHeader title="Typography" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Buttons Section -->
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader title="Buttons" />
|
|
<CardBody>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h4>Standard Buttons</h4>
|
|
<ButtonList class="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" />
|
|
</ButtonList>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h4>Button Sizes</h4>
|
|
<ButtonList class="mb-3 align-items-start">
|
|
<Button text="Small" size="sm" />
|
|
<Button text="Default" />
|
|
<Button text="Large" size="lg" />
|
|
</ButtonList>
|
|
|
|
<h4>Icon Buttons</h4>
|
|
<ButtonList class="mb-3 align-items-start">
|
|
<Button icon="heart" iconOnly />
|
|
<Button icon="star" iconOnly />
|
|
<Button icon="check" iconOnly />
|
|
</ButtonList>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Cards Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Simple Card" />
|
|
<CardBody>
|
|
<p>This is a simple card with header and body content.</p>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Card with Footer" />
|
|
<CardBody>
|
|
<p>This card includes a footer section.</p>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<div class="d-flex">
|
|
<a class="btn btn-link">Cancel</a>
|
|
<a class="btn btn-primary ms-auto">Save</a>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Alerts Section -->
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader title="Alerts" />
|
|
<CardBody>
|
|
<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." />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Badges Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Badges" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Progress Bars Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Progress Bars" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Form Elements Section -->
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader title="Form Elements" />
|
|
<CardBody>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<FormGroup label="Text Input">
|
|
<input type="text" class="form-control" placeholder="Enter text">
|
|
</FormGroup>
|
|
<FormGroup label="Email Input">
|
|
<input type="email" class="form-control" placeholder="Enter email">
|
|
</FormGroup>
|
|
<FormGroup label="Password Input">
|
|
<input type="password" class="form-control" placeholder="Enter password">
|
|
</FormGroup>
|
|
<FormGroup label="Select Dropdown">
|
|
<Select id="demo-select" values={['Option 1', 'Option 2', 'Option 3']} />
|
|
</FormGroup>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<FormGroup label="Textarea">
|
|
<textarea class="form-control" rows="3" placeholder="Enter message"></textarea>
|
|
</FormGroup>
|
|
<FormGroup label="Checkboxes">
|
|
<Check title="Option 1" type="checkbox" />
|
|
<Check title="Option 2" type="checkbox" checked />
|
|
</FormGroup>
|
|
<FormGroup label="Radio Buttons">
|
|
<Check title="Option 1" type="radio" name="radio-demo" />
|
|
<Check title="Option 2" type="radio" name="radio-demo" checked />
|
|
</FormGroup>
|
|
<FormGroup label="Switch">
|
|
<Check title="Enable notifications" switch />
|
|
</FormGroup>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Navigation Elements -->
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader title="Navigation Elements" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Lists Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Lists" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Table Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Table" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Avatars Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Avatars" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Icons Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Icons" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Dropdowns Section -->
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader title="Dropdowns" />
|
|
<CardBody>
|
|
<ButtonList>
|
|
<Dropdown mainBtn="Primary Dropdown" options={['Action', 'Another action', 'Something else here']} />
|
|
<Dropdown mainBtn="Secondary Dropdown" options={['Edit', 'Copy', 'Delete']} />
|
|
</ButtonList>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Interactive Elements Section -->
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader title="Interactive Elements" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Status & Feedback Elements -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Status Elements" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Enhanced Form Elements -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Enhanced Forms" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Tags & Labels -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Tags & Labels" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Media Elements -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Media Elements" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Timeline Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Timeline" />
|
|
<CardBody>
|
|
<Timeline />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Empty State Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Empty State" />
|
|
<CardBody>
|
|
<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"
|
|
/>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Modal Section -->
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader title="Modals" />
|
|
<CardBody>
|
|
<ButtonList>
|
|
<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>
|
|
</ButtonList>
|
|
|
|
<!-- 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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Button Groups Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Button Groups" />
|
|
<CardBody>
|
|
<h4>Basic Button Group</h4>
|
|
<ButtonGroup class="mb-3">
|
|
<button type="button" class="btn">Left</button>
|
|
<button type="button" class="btn">Middle</button>
|
|
<button type="button" class="btn">Right</button>
|
|
</ButtonGroup>
|
|
|
|
<h4>Button Toolbar</h4>
|
|
<div class="btn-toolbar mb-3" role="toolbar">
|
|
<ButtonGroup class="me-2">
|
|
<button type="button" class="btn">1</button>
|
|
<button type="button" class="btn">2</button>
|
|
<button type="button" class="btn">3</button>
|
|
</ButtonGroup>
|
|
<ButtonGroup>
|
|
<button type="button" class="btn">4</button>
|
|
<button type="button" class="btn">5</button>
|
|
</ButtonGroup>
|
|
</div>
|
|
|
|
<h4>Vertical Button Group</h4>
|
|
<ButtonGroup vertical={true}>
|
|
<button type="button" class="btn">Top</button>
|
|
<button type="button" class="btn">Middle</button>
|
|
<button type="button" class="btn">Bottom</button>
|
|
</ButtonGroup>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Segmented Navigation Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Segmented Navigation" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Collapse Section -->
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader title="Collapse" />
|
|
<CardBody>
|
|
<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>
|
|
<ButtonList>
|
|
<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>
|
|
</ButtonList>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Tooltips & Popovers Section -->
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardHeader title="Tooltips & Popovers" />
|
|
<CardBody>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h4>Tooltips</h4>
|
|
<ButtonList>
|
|
<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>
|
|
</ButtonList>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h4>Popovers</h4>
|
|
<ButtonList>
|
|
<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>
|
|
</ButtonList>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- List Groups Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="List Groups" />
|
|
<CardBody class="p-0">
|
|
<ListGroup flush>
|
|
<ListGroupItem>
|
|
<Icon name="home" class="me-2" />
|
|
Home
|
|
</ListGroupItem>
|
|
<ListGroupItem active>
|
|
<Icon name="star" class="me-2" />
|
|
Active item
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<Icon name="settings" class="me-2" />
|
|
Settings
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<Icon name="user" class="me-2" />
|
|
Profile
|
|
</ListGroupItem>
|
|
<ListGroupItem disabled>
|
|
<Icon name="lock" class="me-2" />
|
|
Disabled item
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Content Elements Section -->
|
|
<div class="col-md-6">
|
|
<Card>
|
|
<CardHeader title="Content Elements" />
|
|
<CardBody>
|
|
<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>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|