From c7070180dc64ac6fcc2e63197db24918c01b5aeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Sat, 15 Nov 2025 13:42:11 +0100 Subject: [PATCH] feat: add All Elements UI components page (#2524) --- .changeset/young-needles-love.md | 5 + preview/pages/all-elements.html | 887 ++++++++++++++++++++++++++ shared/data/menu.json | 4 + shared/includes/ui/nav-segmented.html | 2 +- shared/includes/ui/nav.html | 2 +- 5 files changed, 898 insertions(+), 2 deletions(-) create mode 100644 .changeset/young-needles-love.md create mode 100644 preview/pages/all-elements.html diff --git a/.changeset/young-needles-love.md b/.changeset/young-needles-love.md new file mode 100644 index 000000000..0a2c7d7d8 --- /dev/null +++ b/.changeset/young-needles-love.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Added comprehensive All Elements page with all UI components and Bootstrap elements diff --git a/preview/pages/all-elements.html b/preview/pages/all-elements.html new file mode 100644 index 000000000..bd2cfe79c --- /dev/null +++ b/preview/pages/all-elements.html @@ -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 +--- + +
+ +
+
+
+

Typography

+
+
+
+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+
+

This is a lead paragraph with larger text.

+

This is a regular paragraph with bold text, italic text, and + underlined text.

+

This is small muted text.

+

Primary text color

+

Success text color

+

Danger text color

+
+
+
+
+
+ + +
+
+
+

Buttons

+
+
+
+
+

Standard Buttons

+
+ {% 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" %} +
+
+
+

Button Sizes

+
+ {% include "ui/button.html" text="Small" size="sm" %} + {% include "ui/button.html" text="Default"%} + {% include "ui/button.html" text="Large" size="lg" %} +
+ +

Icon Buttons

+
+ {% 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 %} +
+
+
+
+
+
+ + +
+
+
+

Simple Card

+
+
+

This is a simple card with header and body content.

+
+
+
+ +
+
+
+

Card with Footer

+
+
+

This card includes a footer section.

+
+
+
+ Cancel + Save +
+
+
+
+ + +
+
+
+

Alerts

+
+
+ {% 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." %} +
+
+
+ + +
+
+
+

Badges

+
+
+
+
+ {% 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" %} +
+
+ {% include "ui/badge.html" text="With Icon" color="primary" icon="star" %} + {% include "ui/badge.html" text="Light Badge" color="primary" light=true %} +
+
+
+
+
+ + +
+
+
+

Progress Bars

+
+
+
+
+ {% include "ui/progress.html" value="25" %} +
+
+ {% include "ui/progress.html" value="50" color="success" %} +
+
+ {% include "ui/progress.html" value="75" color="warning" %} +
+
+ {% include "ui/progress.html" value="90" color="danger" show-value=true %} +
+
+
+
+
+ + +
+
+
+

Form Elements

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + {% include "ui/select.html" id="demo-select" values="Option 1,Option 2,Option 3" %} +
+
+
+
+ + +
+
+ + {% include "ui/form/check.html" title="Option 1" type="checkbox" %} + {% include "ui/form/check.html" title="Option 2" type="checkbox" checked=true %} +
+
+ + {% 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 %} +
+
+ + {% include "ui/form/check.html" title="Enable notifications" switch=true %} +
+
+
+
+
+
+ + +
+
+
+

Navigation Elements

+
+
+
+
+

Tabs

+
+ {% include "ui/nav.html" tabs=true class="mb-4" %} +
+ +

Pills Navigation

+
+ {% include "ui/nav.html" pills=true class="mb-4" %} +
+ +

Breadcrumb

+ {% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon=true %} +
+
+

Pagination

+ {% include "ui/pagination.html" count="5" active-item="2" class="mb-4" %} + +

Pagination with Text

+ {% include "ui/pagination.html" count="3" text=true %} +
+
+
+
+
+ + +
+
+
+

Lists

+
+
+

Unordered List

+
    +
  • First item
    • +
  • Second item
    • +
  • Third item
    • +
+ +

Ordered List

+
    +
  1. First item
    2. +
  2. Second item
    3. +
  3. Third item
    4. +
+
+
+
+ + +
+
+
+

Table

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameEmailStatus
John Doejohn@example.com{% include "ui/badge.html" text="Active" color="success" %}
Jane Smithjane@example.com{% include "ui/badge.html" text="Pending" color="warning" %}
Bob Johnsonbob@example.com{% include "ui/badge.html" text="Inactive" color="danger" %}
+
+
+
+
+ + +
+
+
+

Avatars

+
+
+
+
+ {% 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" %} +
+
+ {% 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" %} +
+
+ {% include "ui/avatar.html" icon="user" %} + {% include "ui/avatar.html" icon="star" color="warning" %} + {% include "ui/avatar.html" placeholder="ST" status="success" %} +
+
+
+
+
+ + +
+
+
+

Icons

+
+
+
+
+ {% 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" %} +
+
+ {% include "ui/icon.html" icon="check" %} + {% include "ui/icon.html" icon="circle-check" %} + {% include "ui/icon.html" icon="alert-triangle" %} + {% include "ui/icon.html" icon="alert-circle" %} +
+
+
+
+
+ + +
+
+
+

Dropdowns

+
+
+
+ {% 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" %} +
+
+
+
+ + +
+
+
+

Interactive Elements

+
+
+
+
+

Accordion

+
+ {% include "ui/accordion.html" count="3" id="demo-accordion" %} +
+
+
+

Spinners

+
+
+ {% 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" %} +
+
+ +

Rating

+
+ {% include "ui/rating.html" id="demo-rating" value="4" %} +
+ +

Steps

+
+ {% include "ui/steps.html" count="4" active="2" %} +
+
+ {% include "ui/steps.html" count="4" active="3" numbers=true %} +
+
+
+
+
+
+ + +
+
+
+

Status Elements

+
+
+

Status Dots

+
+ {% 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 %} +
+ +

Toast Notifications

+
+ {% include "ui/toast.html" toast-id="demo-toast" show=true text="This is a sample toast message!" %} +
+
+
+
+ + +
+
+
+

Enhanced Forms

+
+
+

Input with Icons

+
+ {% include "ui/form/input-icon.html" placeholder="Search..." icon="search" %} +
+
+ {% include "ui/form/input-icon.html" placeholder="Loading..." loader=true %} +
+ +

Input Groups

+
+ {% include "ui/form/input-group.html" prepend="@" placeholder="Username" %} +
+
+ {% include "ui/form/input-group.html" append=".00" prepend="$" placeholder="Price" %} +
+ +

Range Slider

+
+ {% include "ui/range.html" id="demo-range" min="0" max="100" value="50" %} +
+
+
+
+ + +
+
+
+

Tags & Labels

+
+
+

Tags

+
+ {% 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" %} +
+ +

Ribbons

+
+ {% include "ui/ribbon.html" text="New" color="success" %} +
+
+ {% include "ui/ribbon.html" text="Sale" color="danger" top=true %} +
+
+
+
+ + +
+
+
+

Media Elements

+
+
+

Flags

+
+
+ {% 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" %} +
+
+ +

Payment Icons

+
+
+ {% 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" %} +
+
+
+
+
+ + +
+
+
+

Timeline

+
+
+ {% include "ui/timeline.html" %} +
+
+
+ + +
+
+
+

Empty State

+
+
+ {% 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" %} +
+
+
+ + +
+
+
+

Modals

+
+
+
+ + +
+ + + + + + +
+
+
+ + +
+
+
+

Button Groups

+
+
+

Basic Button Group

+
+ + + +
+ +

Button Toolbar

+ + +

Vertical Button Group

+
+ + + +
+
+
+
+ + +
+
+
+

Segmented Navigation

+
+
+

Basic Segmented

+
+ {% include "ui/nav-segmented.html" %} +
+ +

With Icons

+
+ +
+
+
+
+ + +
+
+
+

Collapse

+
+
+
+
+

Basic Collapse

+ +
+
+ This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked. +
+
+
+
+

Multiple Targets

+
+ + +
+
+
+ First collapsible content. +
+
+
+
+ Second collapsible content. +
+
+
+
+
+
+
+ + +
+
+
+

Tooltips & Popovers

+
+
+
+
+

Tooltips

+
+ + + + +
+
+
+

Popovers

+
+ + +
+
+
+
+
+
+ + +
+
+
+

List Groups

+
+
+
+
+ {% include "ui/icon.html" icon="home" class="me-2" %} + Home +
+
+ {% include "ui/icon.html" icon="star" class="me-2" %} + Active item +
+
+ {% include "ui/icon.html" icon="settings" class="me-2" %} + Settings +
+
+ {% include "ui/icon.html" icon="user" class="me-2" %} + Profile +
+
+ {% include "ui/icon.html" icon="lock" class="me-2" %} + Disabled item +
+
+
+
+
+ + +
+
+
+

Content Elements

+
+
+

Blockquote

+
+

This is a blockquote example with some sample text to demonstrate the styling.

+
+ Someone famous in Source Title +
+
+ +

Code Block

+ 
// JavaScript example
+function greetUser(name) {
+   console.log(`Hello, ${name}!`);
+   return true;
+}
+ +

Inline Elements

+

This paragraph contains inline code, Ctrl + S keyboard shortcut, and highlighted text.

+
+
+
+
\ No newline at end of file diff --git a/shared/data/menu.json b/shared/data/menu.json index d2be89d72..cc9c394d0 100644 --- a/shared/data/menu.json +++ b/shared/data/menu.json @@ -9,6 +9,10 @@ "icon": "package", "columns": 2, "children": { + "all-elements": { + "title": "All Elements", + "url": "all-elements.html" + }, "accordion": { "title": "Accordion", "url": "accordion.html", diff --git a/shared/includes/ui/nav-segmented.html b/shared/includes/ui/nav-segmented.html index 1c9054573..ae907fa22 100644 --- a/shared/includes/ui/nav-segmented.html +++ b/shared/includes/ui/nav-segmented.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: "" %} diff --git a/shared/includes/ui/nav.html b/shared/includes/ui/nav.html index bfc8bafa3..432941588 100644 --- a/shared/includes/ui/nav.html +++ b/shared/includes/ui/nav.html @@ -1,4 +1,4 @@ -