mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 09:24:24 +04:00
feat: add All Elements UI components page (#2524)
This commit is contained in:
Paweł Kuna
GitHub
5
.changeset/young-needles-love.md
Normal file
5
.changeset/young-needles-love.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Added comprehensive All Elements page with all UI components and Bootstrap elements
|
||||
887
preview/pages/all-elements.html
Normal file
887
preview/pages/all-elements.html
Normal file
@@ -0,0 +1,887 @@
|
||||
---
|
||||
title: All Elements - Kitchen Sink
|
||||
page-header: All Elements
|
||||
page-menu: base.all-elements
|
||||
page-libs: [nouislider, star-rating.js, tabler-flags, tabler-payments, tom-select]
|
||||
layout: default
|
||||
permalink: all-elements.html
|
||||
---
|
||||
|
||||
<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">
|
||||
{% include "ui/button.html" text="Default" %}
|
||||
{% include "ui/button.html" text="Primary" color="primary" icon="star" %}
|
||||
{% include "ui/button.html" text="Secondary" color="secondary" %}
|
||||
{% include "ui/button.html" text="Success" color="success" icon="check" %}
|
||||
{% include "ui/button.html" text="Warning" color="warning" %}
|
||||
{% include "ui/button.html" text="Danger" color="danger" icon="x" %}
|
||||
{% include "ui/button.html" text="Info" color="info" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Button Sizes</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
{% include "ui/button.html" text="Small" size="sm" %}
|
||||
{% include "ui/button.html" text="Default"%}
|
||||
{% include "ui/button.html" text="Large" size="lg" %}
|
||||
</div>
|
||||
|
||||
<h4>Icon Buttons</h4>
|
||||
<div class="btn-list mb-3 align-items-start">
|
||||
{% include "ui/button.html" icon="heart" icon-only=true %}
|
||||
{% include "ui/button.html" icon="star" icon-only=true %}
|
||||
{% include "ui/button.html" icon="check" icon-only=true %}
|
||||
</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">
|
||||
{% include "ui/alert.html" type="info" title="This is a primary alert with an icon." %}
|
||||
{% include "ui/alert.html" type="success" title="This is a success alert message." %}
|
||||
{% include "ui/alert.html" type="warning" title="This is a warning alert message." %}
|
||||
{% include "ui/alert.html" 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>
|
||||
{% include "ui/badge.html" text="Default" %}
|
||||
{% include "ui/badge.html" text="Primary" color="primary" %}
|
||||
{% include "ui/badge.html" text="Secondary" color="secondary" %}
|
||||
{% include "ui/badge.html" text="Success" color="success" %}
|
||||
{% include "ui/badge.html" text="Warning" color="warning" %}
|
||||
{% include "ui/badge.html" text="Danger" color="danger" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/badge.html" text="With Icon" color="primary" icon="star" %}
|
||||
{% include "ui/badge.html" text="Light Badge" color="primary" light=true %}
|
||||
</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>
|
||||
{% include "ui/progress.html" value="25" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/progress.html" value="50" color="success" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/progress.html" value="75" color="warning" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/progress.html" value="90" color="danger" show-value=true %}
|
||||
</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>
|
||||
{% include "ui/select.html" 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>
|
||||
{% include "ui/form/check.html" title="Option 1" type="checkbox" %}
|
||||
{% include "ui/form/check.html" title="Option 2" type="checkbox" checked=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Radio Buttons</label>
|
||||
{% include "ui/form/check.html" title="Option 1" type="radio" name="radio-demo" %}
|
||||
{% include "ui/form/check.html" title="Option 2" type="radio" name="radio-demo" checked=true %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Switch</label>
|
||||
{% include "ui/form/check.html" title="Enable notifications" switch=true %}
|
||||
</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">
|
||||
{% include "ui/nav.html" tabs=true class="mb-4" %}
|
||||
</div>
|
||||
|
||||
<h4>Pills Navigation</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav.html" pills=true class="mb-4" %}
|
||||
</div>
|
||||
|
||||
<h4>Breadcrumb</h4>
|
||||
{% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon=true %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>Pagination</h4>
|
||||
{% include "ui/pagination.html" count="5" active-item="2" class="mb-4" %}
|
||||
|
||||
<h4>Pagination with Text</h4>
|
||||
{% include "ui/pagination.html" count="3" text=true %}
|
||||
</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>{% include "ui/badge.html" text="Active" color="success" %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jane Smith</td>
|
||||
<td>jane@example.com</td>
|
||||
<td>{% include "ui/badge.html" text="Pending" color="warning" %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bob Johnson</td>
|
||||
<td>bob@example.com</td>
|
||||
<td>{% include "ui/badge.html" 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>
|
||||
{% include "ui/avatar.html" placeholder="JD" size="sm" %}
|
||||
{% include "ui/avatar.html" placeholder="JS" %}
|
||||
{% include "ui/avatar.html" placeholder="BJ" size="lg" %}
|
||||
{% include "ui/avatar.html" placeholder="AB" size="xl" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/avatar.html" placeholder="RD" shape="avatar-rounded" %}
|
||||
{% include "ui/avatar.html" placeholder="PR" color="primary" shape="avatar-rounded" %}
|
||||
{% include "ui/avatar.html" placeholder="SC" color="success" shape="avatar-rounded" %}
|
||||
</div>
|
||||
<div>
|
||||
{% include "ui/avatar.html" icon="user" %}
|
||||
{% include "ui/avatar.html" icon="star" color="warning" %}
|
||||
{% include "ui/avatar.html" 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>
|
||||
{% include "ui/icon.html" icon="home" %}
|
||||
{% include "ui/icon.html" icon="user" %}
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
{% include "ui/icon.html" icon="heart" %}
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
{% include "ui/icon.html" icon="bell" %}
|
||||
{% include "ui/icon.html" icon="mail" %}
|
||||
{% include "ui/icon.html" icon="phone" %}
|
||||
{% include "ui/icon.html" icon="calendar" %}
|
||||
{% include "ui/icon.html" icon="clock" %}
|
||||
{% include "ui/icon.html" icon="map-pin" %}
|
||||
{% include "ui/icon.html" icon="camera" %}
|
||||
{% include "ui/icon.html" icon="plus" %}
|
||||
{% include "ui/icon.html" icon="minus" %}
|
||||
{% include "ui/icon.html" icon="edit" %}
|
||||
{% include "ui/icon.html" icon="trash" %}
|
||||
{% include "ui/icon.html" icon="download" %}
|
||||
{% include "ui/icon.html" icon="upload" %}
|
||||
{% include "ui/icon.html" icon="search" %}
|
||||
{% include "ui/icon.html" icon="filter" %}
|
||||
{% include "ui/icon.html" icon="refresh" %}
|
||||
{% include "ui/icon.html" icon="share" %}
|
||||
{% include "ui/icon.html" icon="copy" %}
|
||||
{% include "ui/icon.html" icon="external-link" %}
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-primary">{% include "ui/icon.html" icon="check" %}</span>
|
||||
<span class="text-success">{% include "ui/icon.html" icon="circle-check" %}</span>
|
||||
<span class="text-warning">{% include "ui/icon.html" icon="alert-triangle" %}</span>
|
||||
<span class="text-danger">{% include "ui/icon.html" icon="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">
|
||||
{% include "ui/dropdown.html" main-btn="Primary Dropdown" options="Action, Another action, Something else
|
||||
here" %}
|
||||
{% include "ui/dropdown.html" main-btn="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">
|
||||
{% include "ui/accordion.html" 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">
|
||||
{% include "ui/spinner.html" type="border" color="primary" %}
|
||||
{% include "ui/spinner.html" type="border" color="success" size="sm" %}
|
||||
{% include "ui/spinner.html" type="grow" color="warning" %}
|
||||
{% include "ui/spinner.html" type="grow" color="danger" size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Rating</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/rating.html" id="demo-rating" value="4" %}
|
||||
</div>
|
||||
|
||||
<h4>Steps</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/steps.html" count="4" active="2" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{% include "ui/steps.html" count="4" active="3" numbers=true %}
|
||||
</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">
|
||||
{% include "ui/status-dot.html" color="success" %}
|
||||
{% include "ui/status-dot.html" color="warning" %}
|
||||
{% include "ui/status-dot.html" color="danger" %}
|
||||
{% include "ui/status-dot.html" color="info" animated=true %}
|
||||
</div>
|
||||
|
||||
<h4>Toast Notifications</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/toast.html" toast-id="demo-toast" show=true 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">
|
||||
{% include "ui/form/input-icon.html" placeholder="Search..." icon="search" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{% include "ui/form/input-icon.html" placeholder="Loading..." loader=true %}
|
||||
</div>
|
||||
|
||||
<h4>Input Groups</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/form/input-group.html" prepend="@" placeholder="Username" %}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{% include "ui/form/input-group.html" append=".00" prepend="$" placeholder="Price" %}
|
||||
</div>
|
||||
|
||||
<h4>Range Slider</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/range.html" 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">
|
||||
{% include "ui/tag.html" text="Primary Tag" icon="star" %}
|
||||
{% include "ui/tag.html" text="Success Tag" status="success" %}
|
||||
{% include "ui/tag.html" text="Warning Tag" status="warning" %}
|
||||
</div>
|
||||
|
||||
<h4>Ribbons</h4>
|
||||
<div class="position-relative mb-4" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
|
||||
{% include "ui/ribbon.html" text="New" color="success" %}
|
||||
</div>
|
||||
<div class="position-relative mb-3" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
|
||||
{% include "ui/ribbon.html" text="Sale" color="danger" top=true %}
|
||||
</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">
|
||||
{% include "ui/flag.html" flag="us" %}
|
||||
{% include "ui/flag.html" flag="gb" %}
|
||||
{% include "ui/flag.html" flag="de" %}
|
||||
{% include "ui/flag.html" flag="fr" %}
|
||||
{% include "ui/flag.html" flag="pl" %}
|
||||
{% include "ui/flag.html" flag="es" %}
|
||||
{% include "ui/flag.html" flag="it" %}
|
||||
{% include "ui/flag.html" flag="nl" %}
|
||||
{% include "ui/flag.html" flag="ca" %}
|
||||
{% include "ui/flag.html" flag="au" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Payment Icons</h4>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% include "ui/payment.html" payment="visa" %}
|
||||
{% include "ui/payment.html" payment="mastercard" %}
|
||||
{% include "ui/payment.html" payment="paypal" %}
|
||||
{% include "ui/payment.html" payment="americanexpress" %}
|
||||
{% include "ui/payment.html" payment="applepay" %}
|
||||
{% include "ui/payment.html" payment="google-pay" %}
|
||||
{% include "ui/payment.html" payment="stripe" %}
|
||||
{% include "ui/payment.html" payment="discover" %}
|
||||
{% include "ui/payment.html" payment="jcb" %}
|
||||
{% include "ui/payment.html" payment="maestro" %}
|
||||
{% include "ui/payment.html" payment="dinersclub" %}
|
||||
{% include "ui/payment.html" payment="bitcoin" %}
|
||||
{% include "ui/payment.html" payment="ethereum" %}
|
||||
{% include "ui/payment.html" payment="klarna" %}
|
||||
{% include "ui/payment.html" payment="venmo" %}
|
||||
{% include "ui/payment.html" 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">
|
||||
{% include "ui/timeline.html" %}
|
||||
</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">
|
||||
{% include "ui/empty.html" title="No data found" subtitle="Try adjusting your search or filter to find what
|
||||
you're looking for." illustration="boy-girl.svg" button-text="Add new item" button-icon="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">
|
||||
{% include "ui/icon.html" icon="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">
|
||||
{% include "ui/nav-segmented.html" %}
|
||||
</div>
|
||||
|
||||
<h4>With Icons</h4>
|
||||
<div class="mb-3">
|
||||
<nav class="nav nav-segmented" role="tablist">
|
||||
<button class="nav-link active" role="tab">
|
||||
{% include "ui/icon.html" icon="home" class="nav-link-icon" %}
|
||||
Home
|
||||
</button>
|
||||
<button class="nav-link" role="tab">
|
||||
{% include "ui/icon.html" icon="user" class="nav-link-icon" %}
|
||||
Profile
|
||||
</button>
|
||||
<button class="nav-link" role="tab">
|
||||
{% include "ui/icon.html" icon="settings" class="nav-link-icon" %}
|
||||
Settings
|
||||
</button>
|
||||
</nav>
|
||||
</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">
|
||||
{% include "ui/icon.html" icon="home" class="me-2" %}
|
||||
Home
|
||||
</div>
|
||||
<div class="list-group-item active">
|
||||
{% include "ui/icon.html" icon="star" class="me-2" %}
|
||||
Active item
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
{% include "ui/icon.html" icon="settings" class="me-2" %}
|
||||
Settings
|
||||
</div>
|
||||
<div class="list-group-item">
|
||||
{% include "ui/icon.html" icon="user" class="me-2" %}
|
||||
Profile
|
||||
</div>
|
||||
<div class="list-group-item disabled">
|
||||
{% include "ui/icon.html" icon="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>// JavaScript example
|
||||
function greetUser(name) {
|
||||
console.log(`Hello, ${name}!`);
|
||||
return true;
|
||||
}</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>
|
||||
@@ -9,6 +9,10 @@
|
||||
"icon": "package",
|
||||
"columns": 2,
|
||||
"children": {
|
||||
"all-elements": {
|
||||
"title": "All Elements",
|
||||
"url": "all-elements.html"
|
||||
},
|
||||
"accordion": {
|
||||
"title": "Accordion",
|
||||
"url": "accordion.html",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% assign segmented-items = include.items | default: "" | split: "," %}
|
||||
{% assign segmented-items = include.items | default: "First,Second,Third" | split: "," %}
|
||||
{% assign segmented-icons = include.icons | default: "" | split: "," %}
|
||||
{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
|
||||
{% assign segmented-hover = include.hover | default: "" %}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<ul class="nav {% if include.pills %}nav-pills{% if include.header %} card-header-pills{% endif %}{% elsif include.tabs %}nav-tabs{% if include.header %} card-header-tabs{% endif %}{% endif %}">
|
||||
<ul class="nav {% if include.pills %}nav-pills{% if include.header %} card-header-pills{% endif %}{% elsif include.tabs %}nav-tabs{% if include.header %} card-header-tabs{% endif %}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">
|
||||
Active
|
||||
|
||||
Reference in New Issue
Block a user