From 9c4dc73a8bfb4efcbdc35be90d5d2eec3d4ff434 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Wed, 5 Aug 2026 18:44:39 +0200 Subject: [PATCH] Generate SCSS and JS docs snippets from source markers (#2798) --- core/js/src/autosize.ts | 2 + core/js/src/countup.ts | 2 + core/js/src/dropdown.ts | 2 + core/js/src/input-mask.ts | 2 + core/js/src/popover.ts | 2 + core/js/src/switch-icon.ts | 2 + core/js/src/tab.ts | 2 + core/js/src/toast.ts | 2 + core/js/src/tooltip.ts | 2 + core/scss/_variables.scss | 65 +++++++++++++++++++ docs/components/CodeDocs.astro | 60 +++++++++++++++++ docs/components/CodeSnippet.astro | 24 +++++++ docs/pages/ui/components/accordion.mdx | 7 ++ docs/pages/ui/components/alert.mdx | 7 +- docs/pages/ui/components/autosize.mdx | 7 ++ docs/pages/ui/components/avatar.mdx | 7 ++ docs/pages/ui/components/badge.mdx | 7 ++ docs/pages/ui/components/breadcrumb.mdx | 7 ++ docs/pages/ui/components/button.mdx | 7 ++ docs/pages/ui/components/card.mdx | 7 ++ docs/pages/ui/components/carousel.mdx | 7 ++ docs/pages/ui/components/chart.mdx | 7 ++ docs/pages/ui/components/countup.mdx | 7 ++ docs/pages/ui/components/datagrid.mdx | 7 ++ docs/pages/ui/components/dropdown.mdx | 13 ++++ docs/pages/ui/components/empty.mdx | 7 ++ docs/pages/ui/components/modal.mdx | 7 ++ docs/pages/ui/components/offcanvas.mdx | 7 ++ docs/pages/ui/components/pagination.mdx | 7 ++ docs/pages/ui/components/placeholder.mdx | 7 ++ docs/pages/ui/components/popover.mdx | 13 ++++ docs/pages/ui/components/progress.mdx | 7 ++ docs/pages/ui/components/ribbon.mdx | 7 ++ .../pages/ui/components/segmented-control.mdx | 7 ++ docs/pages/ui/components/spinner.mdx | 7 ++ docs/pages/ui/components/status.mdx | 7 ++ docs/pages/ui/components/step.mdx | 7 ++ docs/pages/ui/components/switch-icon.mdx | 7 ++ docs/pages/ui/components/tab.mdx | 7 ++ docs/pages/ui/components/table.mdx | 7 ++ docs/pages/ui/components/tag.mdx | 7 ++ docs/pages/ui/components/toast.mdx | 13 ++++ docs/pages/ui/components/tooltip.mdx | 13 ++++ docs/pages/ui/components/tracking.mdx | 7 ++ docs/pages/ui/forms/form-elements.mdx | 7 ++ docs/pages/ui/forms/form-input-mask.mdx | 7 ++ docs/pages/ui/forms/form-validation.mdx | 7 ++ docs/pages/ui/layout/navbars.mdx | 7 ++ docs/pages/ui/layout/navs-tabs.mdx | 7 ++ shared/lib/code-example.ts | 19 ++++++ 50 files changed, 467 insertions(+), 2 deletions(-) create mode 100644 docs/components/CodeDocs.astro create mode 100644 docs/components/CodeSnippet.astro diff --git a/core/js/src/autosize.ts b/core/js/src/autosize.ts index 8a76c12af..ee7ece20f 100644 --- a/core/js/src/autosize.ts +++ b/core/js/src/autosize.ts @@ -1,4 +1,5 @@ // Autosize plugin +// js-docs-start autosize-init const autosizeElements: NodeListOf = document.querySelectorAll('[data-bs-toggle="autosize"]') if (autosizeElements.length) { @@ -8,3 +9,4 @@ if (autosizeElements.length) { } }) } +// js-docs-end autosize-init diff --git a/core/js/src/countup.ts b/core/js/src/countup.ts index f13577ee2..1df871293 100644 --- a/core/js/src/countup.ts +++ b/core/js/src/countup.ts @@ -1,3 +1,4 @@ +// js-docs-start countup-init const countupElements: NodeListOf = document.querySelectorAll('[data-countup]') if (countupElements.length) { @@ -29,3 +30,4 @@ if (countupElements.length) { } }) } +// js-docs-end countup-init diff --git a/core/js/src/dropdown.ts b/core/js/src/dropdown.ts index 0607e72b4..dff07c047 100644 --- a/core/js/src/dropdown.ts +++ b/core/js/src/dropdown.ts @@ -3,6 +3,7 @@ import { Dropdown } from './bootstrap' /* Core dropdowns */ +// js-docs-start dropdown-init const dropdownTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]')) dropdownTriggerList.map(function (dropdownTriggerEl: HTMLElement) { const options = { @@ -10,3 +11,4 @@ dropdownTriggerList.map(function (dropdownTriggerEl: HTMLElement) { } return new Dropdown(dropdownTriggerEl, options) }) +// js-docs-end dropdown-init diff --git a/core/js/src/input-mask.ts b/core/js/src/input-mask.ts index 051911452..e3952f181 100644 --- a/core/js/src/input-mask.ts +++ b/core/js/src/input-mask.ts @@ -1,5 +1,6 @@ // Input mask plugin +// js-docs-start input-mask-init const maskElementList: HTMLElement[] = [].slice.call(document.querySelectorAll('[data-mask]')) maskElementList.map(function (maskEl: HTMLElement) { window.IMask && @@ -8,3 +9,4 @@ maskElementList.map(function (maskEl: HTMLElement) { lazy: maskEl.dataset.maskVisible !== 'true', }) }) +// js-docs-end input-mask-init diff --git a/core/js/src/popover.ts b/core/js/src/popover.ts index a14df18e1..08fb0f418 100644 --- a/core/js/src/popover.ts +++ b/core/js/src/popover.ts @@ -3,6 +3,7 @@ import { Popover } from './bootstrap' /* Core popovers */ +// js-docs-start popover-init const popoverTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) popoverTriggerList.map(function (popoverTriggerEl: HTMLElement) { const options = { @@ -12,3 +13,4 @@ popoverTriggerList.map(function (popoverTriggerEl: HTMLElement) { } return new Popover(popoverTriggerEl, options) }) +// js-docs-end popover-init diff --git a/core/js/src/switch-icon.ts b/core/js/src/switch-icon.ts index a769113b4..1ff85b3fa 100644 --- a/core/js/src/switch-icon.ts +++ b/core/js/src/switch-icon.ts @@ -1,6 +1,7 @@ /* Switch icons */ +// js-docs-start switch-icon-init const switchesTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]')) switchesTriggerList.map(function (switchTriggerEl: HTMLElement) { switchTriggerEl.addEventListener('click', (e: MouseEvent) => { @@ -9,3 +10,4 @@ switchesTriggerList.map(function (switchTriggerEl: HTMLElement) { switchTriggerEl.classList.toggle('active') }) }) +// js-docs-end switch-icon-init diff --git a/core/js/src/tab.ts b/core/js/src/tab.ts index 17a827355..7355ec77a 100644 --- a/core/js/src/tab.ts +++ b/core/js/src/tab.ts @@ -1,5 +1,6 @@ import { Tab } from './bootstrap' +// js-docs-start tab-init export const EnableActivationTabsFromLocationHash = (): void => { const locationHash: string = window.location.hash @@ -14,3 +15,4 @@ export const EnableActivationTabsFromLocationHash = (): void => { } EnableActivationTabsFromLocationHash() +// js-docs-end tab-init diff --git a/core/js/src/toast.ts b/core/js/src/toast.ts index b59e6d3b3..d771b9c9b 100644 --- a/core/js/src/toast.ts +++ b/core/js/src/toast.ts @@ -3,6 +3,7 @@ import { Toast } from './bootstrap' /* Toasts */ +// js-docs-start toast-init const toastsTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]')) toastsTriggerList.map(function (toastTriggerEl: HTMLElement) { const target = toastTriggerEl.getAttribute('data-bs-target') @@ -16,3 +17,4 @@ toastsTriggerList.map(function (toastTriggerEl: HTMLElement) { toastEl.show() }) }) +// js-docs-end toast-init diff --git a/core/js/src/tooltip.ts b/core/js/src/tooltip.ts index ea04a61ca..f394f4daf 100644 --- a/core/js/src/tooltip.ts +++ b/core/js/src/tooltip.ts @@ -1,5 +1,6 @@ import { Tooltip } from './bootstrap' +// js-docs-start tooltip-init const tooltipTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) tooltipTriggerList.map(function (tooltipTriggerEl: HTMLElement) { const options = { @@ -9,3 +10,4 @@ tooltipTriggerList.map(function (tooltipTriggerEl: HTMLElement) { } return new Tooltip(tooltipTriggerEl, options) }) +// js-docs-end tooltip-init diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 93b396765..cc2dd509c 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -795,6 +795,7 @@ $kbd-border-radius: var(--#{$prefix}border-radius) !default; $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6 // Avatars +// scss-docs-start avatar-variables $avatar-size: 2.5rem !default; $avatar-status-size: 0.75rem !default; $avatar-font-size: 1rem !default; @@ -860,6 +861,7 @@ $avatar-sizes: ( $avatar-border-radius: var(--#{$prefix}border-radius-pill) !default; $avatar-font-size: $h4-font-size !default; $avatar-list-spacing: -0.5; +// scss-docs-end avatar-variables $link-decoration: none !default; $link-hover-decoration: underline !default; @@ -1025,6 +1027,7 @@ $transition-time: 0.3s !default; $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !default; // Alerts +// scss-docs-start alert-variables $alert-padding-y: 0.75rem !default; $alert-padding-x: 1rem !default; $alert-margin-bottom: 1rem !default; @@ -1036,8 +1039,10 @@ $alert-heading-margin-bottom: 0.25rem !default; $alert-icon-size: 1.25rem !default; $alert-padding-inline-end: 3rem !default; $alert-gap: 1rem !default; +// scss-docs-end alert-variables // Breadcrumb +// scss-docs-start breadcrumb-variables $breadcrumb-font-size: null !default; $breadcrumb-padding-y: 0 !default; $breadcrumb-padding-x: 0 !default; @@ -1057,8 +1062,10 @@ $breadcrumb-variants: ( arrows: '›', bullets: '\02022', ) !default; +// scss-docs-end breadcrumb-variables // Badges +// scss-docs-start badge-variables $badge-font-size: $font-size-reative-sm !default; $badge-font-size-sm: $font-size-reative-xs !default; $badge-font-size-lg: $font-size-reative-md !default; @@ -1073,6 +1080,7 @@ $badge-gap: 0.25rem !default; $badge-padding-x-sm: 0.25rem !default; $badge-padding-y-lg: 0.25rem !default; $badge-padding-x-lg: 0.5rem !default; +// scss-docs-end badge-variables // Buttons + Forms $input-btn-border-width: var(--#{$prefix}border-width) !default; @@ -1107,6 +1115,7 @@ $input-btn-font-size-xl: $h1-font-size !default; $input-btn-line-height-xl: 2rem !default; $input-btn-icon-size-xl: 2rem !default; +// scss-docs-start btn-variables $btn-border-width: $input-btn-border-width !default; $btn-font-weight: var(--#{$prefix}font-weight-medium) !default; @@ -1157,8 +1166,10 @@ $btn-padding-y-sm: $input-btn-padding-y-sm !default; $btn-padding-x-sm: $input-btn-padding-x-sm !default; $btn-padding-y-lg: $input-btn-padding-y-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default; +// scss-docs-end btn-variables // Inputs +// scss-docs-start input-variables $input-bg: var(--#{$prefix}bg-forms) !default; $input-disabled-color: null !default; $input-disabled-bg: var(--#{$prefix}bg-forms-disabled) !default; @@ -1210,8 +1221,10 @@ $input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5 $input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false)) !default; $input-height-sm: add($input-line-height-sm, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default; $input-height-lg: add($input-line-height-lg, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default; +// scss-docs-end input-variables // Cards +// scss-docs-start card-variables $card-spacer-y: 1.25rem !default; $card-spacer-x: 1.25rem !default; $card-title-spacer-y: 1.25rem !default; @@ -1265,6 +1278,9 @@ $card-options-link-min-width: 1rem !default; $card-options-link-margin-start: 0.25rem !default; $card-avatar-height: 3.5rem !default; $card-avatar-ring-width: 0.25rem !default; +// scss-docs-end card-variables + +// scss-docs-start ribbon-variables $ribbon-offset: 0.75rem !default; $ribbon-padding-y: 0.25rem !default; $ribbon-padding-x: 0.75rem !default; @@ -1273,8 +1289,10 @@ $ribbon-top-width: 2rem !default; $ribbon-top-padding-y: 0.5rem !default; $ribbon-bookmark-border-size: 1rem !default; $ribbon-bookmark-notch-width: 0.5rem !default; +// scss-docs-end ribbon-variables // Accordion +// scss-docs-start accordion-variables $accordion-padding-y: 1rem !default; $accordion-padding-x: 1.25rem !default; $accordion-border-width: var(--#{$prefix}border-width) !default; @@ -1291,8 +1309,10 @@ $accordion-button-active-color: inherit !default; $accordion-btn-gap: 0.75rem !default; $accordion-header-gap: 1rem !default; $accordion-tabs-gap: 0.75rem !default; +// scss-docs-end accordion-variables // Carousel +// scss-docs-start carousel-variables $carousel-control-color: $white !default; $carousel-control-width: 15% !default; @@ -1328,6 +1348,7 @@ $carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4 $carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4 $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4 $carousel-indicators-vertical-margin-inline-end: 1rem !default; +// scss-docs-end carousel-variables // Close $btn-close-width: 1em !default; @@ -1344,11 +1365,14 @@ $btn-close-filter: null !default; $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4 // Datagrid +// scss-docs-start datagrid-variables $datagrid-padding: 1.5rem !default; $datagrid-item-width: 15rem !default; $datagrid-title-margin-bottom: 0.25rem !default; +// scss-docs-end datagrid-variables // Empty +// scss-docs-start empty-variables $empty-padding: 1rem !default; $empty-padding-md: 3rem !default; $empty-icon-size: 3rem !default; @@ -1358,8 +1382,10 @@ $empty-header-margin-bottom: 1rem !default; $empty-header-font-size: 4rem !default; $empty-title-margin-bottom: 0.5rem !default; $empty-action-margin-top: 1.5rem !default; +// scss-docs-end empty-variables // Dropdown +// scss-docs-start dropdown-variables $dropdown-min-width: 11rem !default; $dropdown-padding-x: 0 !default; $dropdown-padding-y: 0.25rem !default; @@ -1398,6 +1424,7 @@ $dropdown-arrow-offset: 0.25rem !default; $dropdown-arrow-inset: 0.75rem !default; $dropdown-dropend-offset: 0.25rem !default; $dropdown-menu-card-min-width: 20rem !default; +// scss-docs-end dropdown-variables // Dropdown dark $dropdown-dark-color: $gray-300 !default; @@ -1414,6 +1441,7 @@ $dropdown-dark-link-disabled-color: $gray-500 !default; $dropdown-dark-header-color: $gray-500 !default; // Tooltip +// scss-docs-start tooltip-variables $tooltip-font-size: $font-size-sm !default; $tooltip-max-width: 200px !default; $tooltip-color: var(--#{$prefix}text-inverted) !default; @@ -1426,6 +1454,7 @@ $tooltip-margin: null !default; // TODO: remove this in v6 $tooltip-arrow-width: 0.8rem !default; $tooltip-arrow-height: 0.4rem !default; +// scss-docs-end tooltip-variables // Loader $loader-size: 2.5rem !default; @@ -1434,6 +1463,7 @@ $list-group-header-bg: var(--#{$prefix}bg-surface-tertiary) !default; $list-group-header-color: var(--#{$prefix}gray-500) !default; // Modals +// scss-docs-start modal-variables $modal-inner-padding: 1.5rem !default; $modal-footer-margin-between: 0.75rem !default; @@ -1481,8 +1511,10 @@ $modal-body-title-margin-bottom: 1rem !default; $modal-footer-padding-y: 0.75rem !default; $modal-status-size: $border-width-wide !default; +// scss-docs-end modal-variables // Nav +// scss-docs-start nav-variables $nav-link-padding-y: 0.5rem !default; $nav-link-padding-x: 0.75rem !default; $nav-link-font-size: null !default; @@ -1525,8 +1557,10 @@ $nav-vertical-nested-margin-start: 1.25rem !default; $nav-vertical-nested-padding-start: 0.5rem !default; $nav-link-toggle-padding-x: 0.25rem !default; $nav-link-icon-margin-end: 0.5rem !default; +// scss-docs-end nav-variables // Navbar +// scss-docs-start navbar-variables $navbar-height: 3.5rem !default; $navbar-padding-y: 0.25rem !default; $navbar-padding-x: null !default; @@ -1577,6 +1611,7 @@ $navbar-overlap-height: 9rem !default; $navbar-nav-link-hover-bg: color-transparent(var(--#{$prefix}nav-link-color), 0.04) !default; $navbar-active-border-color: var(--#{$prefix}primary) !default; +// scss-docs-end navbar-variables // Sidebar $sidebar-width: 15rem !default; @@ -1587,6 +1622,7 @@ $page-title-line-height: var(--#{$prefix}line-height-h2) !default; $page-title-font-weight: var(--#{$prefix}font-weight-headings) !default; // Popover +// scss-docs-start popover-variables $popover-font-size: $font-size-sm !default; $popover-bg: var(--#{$prefix}bg-surface) !default; $popover-max-width: 276px !default; @@ -1608,6 +1644,7 @@ $popover-body-padding-x: 0.5rem !default; $popover-arrow-width: 1rem !default; $popover-arrow-height: 0.5rem !default; +// scss-docs-end popover-variables // Footer $footer-padding-y: 2rem !default; @@ -1616,6 +1653,7 @@ $footer-border-color: var(--#{$prefix}border-color) !default; $footer-color: var(--#{$prefix}gray-500) !default; // Pagination +// scss-docs-start pagination-variables $pagination-padding-y: calc(0.25rem + 1px) !default; $pagination-padding-x: 0.25rem !default; $pagination-padding-y-sm: 0.25rem !default; @@ -1662,8 +1700,10 @@ $pagination-link-min-width: 2rem !default; $page-text-padding-x: 0.5rem !default; $page-item-subtitle-margin-bottom: 2px !default; $page-item-subtitle-font-size: 12px !default; +// scss-docs-end pagination-variables // Statuses +// scss-docs-start status-variables $status-dot-size: 0.5rem !default; $status-height: 1.5rem !default; $status-icon-size: $icon-size !default; @@ -1672,8 +1712,10 @@ $status-padding-x: 0.75rem !default; $status-gap: 0.5rem !default; $status-indicator-size: 2.5rem !default; $status-circle-size: 0.75rem !default; +// scss-docs-end status-variables // Steps +// scss-docs-start steps-variables $steps-border-width: 2px !default; $steps-color: var(--#{$prefix}primary) !default; $steps-inactive-color: var(--#{$prefix}border-color) !default; @@ -1685,8 +1727,10 @@ $steps-vertical-item-gap: 1rem !default; $steps-vertical-connector-gap: 1rem !default; $steps-dot-offset: 6px !default; $steps-dot-offset-counter: -2px !default; +// scss-docs-end steps-variables // Spinner +// scss-docs-start spinner-variables $spinner-width: 1.5rem !default; $spinner-height: 1.5rem !default; $spinner-vertical-align: -0.125em !default; @@ -1696,8 +1740,10 @@ $spinner-animation-speed: 0.75s !default; $spinner-width-sm: 1rem !default; $spinner-height-sm: 1rem !default; $spinner-border-width-sm: 1px !default; +// scss-docs-end spinner-variables // Tables +// scss-docs-start table-variables $table-bg: transparent !default; $table-color: inherit !default; $table-accent-bg: transparent !default; @@ -1753,8 +1799,10 @@ $table-sort-asc-bg-image: url("data:image/svg+xml,") !default; $table-sort-icon-size: 1rem !default; $table-sort-icon-margin-start: 0.25rem !default; +// scss-docs-end table-variables // Toasts +// scss-docs-start toast-variables $toast-max-width: 350px !default; $toast-padding-x: 0.75rem !default; $toast-padding-y: 0.5rem !default; @@ -1770,14 +1818,18 @@ $toast-spacing: $container-padding-x !default; $toast-header-color: var(--#{$prefix}gray-500) !default; $toast-header-background-color: color-transparent(var(--#{$prefix}body-bg), 0.85) !default; $toast-header-border-color: $toast-border-color !default; +// scss-docs-end toast-variables // Tracking +// scss-docs-start tracking-variables $tracking-height: 1.5rem !default; $tracking-gap-width: 0.125rem !default; $tracking-border-radius: var(--#{$prefix}border-radius) !default; $tracking-block-min-width: 0.25rem !default; +// scss-docs-end tracking-variables // Progress +// scss-docs-start progress-variables $progress-height: 0.5rem !default; $progress-font-size: $font-size-base * 0.75 !default; $progress-bg: var(--#{$prefix}border-color) !default; @@ -1796,6 +1848,7 @@ $progressbg-value-padding-start: 2rem !default; $progress-separated-ring-width: 2px !default; $progress-steps-gap: 0.25rem !default; $progress-steps-item-height: 0.25rem !default; +// scss-docs-end progress-variables // List Group $list-group-color: var(--#{$prefix}body-color) !default; @@ -1996,6 +2049,7 @@ $form-feedback-icon-invalid: str-replace( '%23' ) !default; // Form validation states +// scss-docs-start form-validation-variables $form-validation-states: ( 'valid': ( 'color': var(--#{$prefix}form-valid-color), @@ -2014,6 +2068,7 @@ $form-validation-states: ( 'border-color': var(--#{$prefix}form-invalid-border-color), ), ) !default; +// scss-docs-end form-validation-variables // Form feedback tooltip $form-feedback-tooltip-padding-y: $tooltip-padding-y !default; @@ -2043,6 +2098,7 @@ $legend-size: 0.75em !default; $legend-border-radius: var(--#{$prefix}border-radius-sm) !default; // Offcanvas +// scss-docs-start offcanvas-variables $offcanvas-padding-y: $modal-inner-padding !default; $offcanvas-padding-x: $modal-inner-padding !default; $offcanvas-horizontal-width: 400px !default; @@ -2058,6 +2114,7 @@ $offcanvas-backdrop-bg: $backdrop-bg !default; $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; $offcanvas-border-color: var(--#{$prefix}border-color) !default; $offcanvas-narrow-width: 20rem !default; +// scss-docs-end offcanvas-variables // Chat $chat-bubbles-gap: 1rem !default; @@ -2071,6 +2128,7 @@ $toolbar-gutter: 0.5rem !default; $stars-gap: 0.25rem !default; // Tags +// scss-docs-start tag-variables $tag-height: 1.5rem !default; $tag-padding-x: 0.5rem !default; $tag-gap: 0.5rem !default; @@ -2085,8 +2143,10 @@ $tag-addon-margin-start: -0.25rem !default; $tag-icon-margin-end: -0.125rem !default; $tag-icon-size: 1rem !default; $tag-check-size: 1rem !default; +// scss-docs-end tag-variables // Segmented nav +// scss-docs-start segmented-nav-variables $nav-segmented-height: 2.5rem !default; $nav-segmented-padding: 2px !default; $nav-segmented-radius: 6px !default; @@ -2105,8 +2165,10 @@ $nav-segmented-radius-lg: 8px !default; $nav-segmented-link-padding-x-lg: 1rem !default; $nav-segmented-link-gap-lg: 0.5rem !default; $nav-segmented-link-icon-size-lg: 1.5rem !default; +// scss-docs-end segmented-nav-variables // Charts +// scss-docs-start chart-variables $chart-min-height: 10rem !default; $chart-height-sm: 2.5rem !default; $chart-height-lg: 15rem !default; @@ -2117,6 +2179,7 @@ $chart-sparkline-height-sm: 1.5rem !default; $chart-sparkline-width-square: 2.5rem !default; $chart-sparkline-width-wide: 6rem !default; $chart-sparkline-label-icon-size: 1rem !default; +// scss-docs-end chart-variables // Patterns $pattern-size: 0.5rem !default; @@ -2189,8 +2252,10 @@ $form-selectgroup-gap: 0.5rem !default; $form-selectgroup-icon-margin-x: -0.25rem !default; // Placeholders +// scss-docs-start placeholder-variables $placeholder-opacity-min: 0.1 !default; $placeholder-opacity-max: 0.2 !default; +// scss-docs-end placeholder-variables // Image thumbnails $thumbnail-padding: 0.25rem !default; diff --git a/docs/components/CodeDocs.astro b/docs/components/CodeDocs.astro new file mode 100644 index 000000000..7533cbe5a --- /dev/null +++ b/docs/components/CodeDocs.astro @@ -0,0 +1,60 @@ +--- +// Prints everything between `// -start ` and `// -end ` +// comments found in a source file, so docs stay in sync with the code. The marker +// prefix and highlight language are picked from the file extension: `.scss` files +// use `scss-docs` markers (with ` !default` suffixes stripped), `.js`/`.ts` files +// use `js-docs` markers. +import CodeSnippet from '@components/CodeSnippet.astro' +import { extractMarkedSnippet } from '@shared/lib/code-example' + +// Vite inlines the sources at build time — `node:fs` paths would break once +// the component is bundled into dist/.prerender during `astro build`. +const scssSources = import.meta.glob('../../core/scss/**/*.scss', { query: '?raw', import: 'default' }) +const jsSources = import.meta.glob('../../core/js/**/*.{js,ts}', { query: '?raw', import: 'default' }) + +interface Props { + /** Reference name used to find the content to display within the content of the `file` prop. */ + name: string + /** File path that contains the content to display, relative to the root of the repository. */ + file: string +} + +const { name, file } = Astro.props + +if (!name || !file) { + throw new Error(`Missing required parameter(s) for the '' component, expected both 'name' and 'file' but got 'name: ${name}' and 'file: ${file}'.`) +} + +const kinds = { + scss: { sources: scssSources, marker: 'scss-docs', lang: 'scss' }, + ts: { sources: jsSources, marker: 'js-docs', lang: 'ts' }, + js: { sources: jsSources, marker: 'js-docs', lang: 'js' }, +} + +const kind = kinds[file.split('.').pop() as keyof typeof kinds] + +if (!kind) { + throw new Error(`Unsupported file extension in the '' component, expected a '.scss', '.js' or '.ts' file but got '${file}'.`) +} + +// Repo-root-relative `file` → glob key relative to this component (docs/components/). +const loadSource = kind.sources[`../../${file}`] + +if (!loadSource) { + throw new Error(`Unknown file '${file}' in the '' component, expected a path to a 'core/scss' or 'core/js' file relative to the repository root.`) +} + +let fileContent = (await loadSource()) as string + +if (kind.lang === 'scss') { + fileContent = fileContent.replaceAll(' !default', '') +} + +const content = extractMarkedSnippet(fileContent, kind.marker, name) + +if (content === null) { + throw new Error(`Failed to find the content named '${name}' in '${file}', make sure that '// ${kind.marker}-start ${name}' and '// ${kind.marker}-end ${name}' are defined.`) +} +--- + + diff --git a/docs/components/CodeSnippet.astro b/docs/components/CodeSnippet.astro new file mode 100644 index 000000000..6b5b92b4d --- /dev/null +++ b/docs/components/CodeSnippet.astro @@ -0,0 +1,24 @@ +--- +// Highlighted code block with a copy button — used by CodeDocs. +import Icon from '@ui/Icon.astro' +import { highlightCode } from '@shared/lib/code-example' + +interface Props { + /** The code to display. */ + code: string + /** Shiki language used for highlighting. */ + lang: string +} + +const { code, lang } = Astro.props + +const highlighted = await highlightCode(code, lang) +--- + +
+ + + + + +
diff --git a/docs/pages/ui/components/accordion.mdx b/docs/pages/ui/components/accordion.mdx index a12d36924..ebce276bb 100644 --- a/docs/pages/ui/components/accordion.mdx +++ b/docs/pages/ui/components/accordion.mdx @@ -6,6 +6,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Overview @@ -71,3 +72,9 @@ Use `.accordion-inverted` to move the toggle to the start of the button row. Thi - Keep `data-bs-target` and panel `id` values in sync for every toggle. - Keep visible focus styles. The header and button styles include focus handling. - Add meaningful text labels, not only icons. + +## SCSS variables + +Use these SCSS variables to customize the accordion. The default values are: + + diff --git a/docs/pages/ui/components/alert.mdx b/docs/pages/ui/components/alert.mdx index ac46a2f48..114f2614f 100644 --- a/docs/pages/ui/components/alert.mdx +++ b/docs/pages/ui/components/alert.mdx @@ -5,6 +5,7 @@ description: An alert message for user notification. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; import Alert from '@ui/Alert.astro'; ## Default markup @@ -89,6 +90,8 @@ You're not limited to the 4 default alert colors. You can use any [base or socia -## SASS variables +## SCSS variables -You can customize the alert colors by changing the SASS variables. The default values are: +Use these SCSS variables to customize alerts. The default values are: + + diff --git a/docs/pages/ui/components/autosize.mdx b/docs/pages/ui/components/autosize.mdx index 1d6a4d9af..51eb121c1 100644 --- a/docs/pages/ui/components/autosize.mdx +++ b/docs/pages/ui/components/autosize.mdx @@ -6,6 +6,7 @@ description: Auto-adjusting textarea for better usability. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`. @@ -18,3 +19,9 @@ To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to th + +## JavaScript + +Tabler automatically initializes all elements with `data-bs-toggle="autosize"` on page load. This is the code that runs: + + diff --git a/docs/pages/ui/components/avatar.mdx b/docs/pages/ui/components/avatar.mdx index b13ea6f24..cd72d1698 100644 --- a/docs/pages/ui/components/avatar.mdx +++ b/docs/pages/ui/components/avatar.mdx @@ -7,6 +7,7 @@ layout: '@layouts/DocsMdxLayout.astro' import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; import AvatarList from '@ui/AvatarList.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -91,3 +92,9 @@ Make the list stack once a certain number of avatars is reached to make it look SA + +## SCSS variables + +Use these SCSS variables to customize avatars. The default values are: + + diff --git a/docs/pages/ui/components/badge.mdx b/docs/pages/ui/components/badge.mdx index 99c95cae9..6453311da 100644 --- a/docs/pages/ui/components/badge.mdx +++ b/docs/pages/ui/components/badge.mdx @@ -8,6 +8,7 @@ import BadgesList from '@ui/BadgesList.astro'; import Example from '@components/Example.astro'; import Badge from '@ui/Badge.astro'; import site from '@data/site.json'; +import CodeDocs from '@components/CodeDocs.astro'; export const colors = Object.entries(site.colors); @@ -103,3 +104,9 @@ Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The ## More examples If you want to see more examples of badges, you can check out the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) for badges. You can also find more examples in the Tabler [Badges](https://preview.tabler.io/badges.html) preview. + +## SCSS variables + +Use these SCSS variables to customize badges. The default values are: + + diff --git a/docs/pages/ui/components/breadcrumb.mdx b/docs/pages/ui/components/breadcrumb.mdx index cc3faa7c6..6972e976f 100644 --- a/docs/pages/ui/components/breadcrumb.mdx +++ b/docs/pages/ui/components/breadcrumb.mdx @@ -7,6 +7,7 @@ layout: '@layouts/DocsMdxLayout.astro' import Example from '@components/Example.astro'; import Breadcrumb from '@ui/Breadcrumb.astro'; import Icon from '@ui/Icon.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -51,3 +52,9 @@ You can use breadcrumbs in headers to show the current page location and provide

How to Build a Modern Dashboard with Tabler

Edit Publish
+ +## SCSS variables + +Use these SCSS variables to customize breadcrumbs. The default values are: + + diff --git a/docs/pages/ui/components/button.mdx b/docs/pages/ui/components/button.mdx index 518b9f55a..46bed5398 100644 --- a/docs/pages/ui/components/button.mdx +++ b/docs/pages/ui/components/button.mdx @@ -7,6 +7,7 @@ layout: '@layouts/DocsMdxLayout.astro' import ButtonGroup from '@ui/ButtonGroup.astro'; import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Button tag @@ -282,3 +283,9 @@ Use button groups to combine related buttons together. Button groups are perfect + +## SCSS variables + +Use these SCSS variables to customize buttons. The default values are: + + diff --git a/docs/pages/ui/components/card.mdx b/docs/pages/ui/components/card.mdx index b20a91852..cb5e435ed 100644 --- a/docs/pages/ui/components/card.mdx +++ b/docs/pages/ui/components/card.mdx @@ -6,6 +6,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default card @@ -106,3 +107,9 @@ Organize multiple cards into tabs to be able to display more content in a well-o
Content of tab #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

Content of tab #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

Content of tab #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

Content of tab #4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

+ +## SCSS variables + +Use these SCSS variables to customize cards. The default values are: + + diff --git a/docs/pages/ui/components/carousel.mdx b/docs/pages/ui/components/carousel.mdx index 7fba805ba..67e06bc53 100644 --- a/docs/pages/ui/components/carousel.mdx +++ b/docs/pages/ui/components/carousel.mdx @@ -5,6 +5,7 @@ description: Display visual content with a carousel. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -52,3 +53,9 @@ Below the `md` responsive breakpoint, the captions on the following example will + +## SCSS variables + +Use these SCSS variables to customize the carousel. The default values are: + + diff --git a/docs/pages/ui/components/chart.mdx b/docs/pages/ui/components/chart.mdx index 1c8c1d1d0..a037e1ddb 100644 --- a/docs/pages/ui/components/chart.mdx +++ b/docs/pages/ui/components/chart.mdx @@ -8,6 +8,7 @@ layout: '@layouts/DocsMdxLayout.astro' import Example from '@components/Example.astro' import Chart from '@ui/Chart.astro' +import CodeDocs from '@components/CodeDocs.astro'; To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`. @@ -84,3 +85,9 @@ For more complex data visualizations, you can create advanced charts with multip + +## SCSS variables + +Use these SCSS variables to customize charts. The default values are: + + diff --git a/docs/pages/ui/components/countup.mdx b/docs/pages/ui/components/countup.mdx index ff61121fa..fd2c2dc9b 100644 --- a/docs/pages/ui/components/countup.mdx +++ b/docs/pages/ui/components/countup.mdx @@ -6,6 +6,7 @@ description: Display numbers dynamically with a countup. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application. @@ -100,3 +101,9 @@ Set the countup suffix using `suffix` and specifying the suffix you want to add,

300

300

 + +## JavaScript + +Tabler automatically initializes all elements with `data-countup` on page load. This is the code that runs: + + diff --git a/docs/pages/ui/components/datagrid.mdx b/docs/pages/ui/components/datagrid.mdx index 948c2aa83..4ebfbc933 100644 --- a/docs/pages/ui/components/datagrid.mdx +++ b/docs/pages/ui/components/datagrid.mdx @@ -5,6 +5,7 @@ description: Detailed product information in grids. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro';
Registrar
Third Party
Nameservers
Third Party
Port number
3306
Expiration date
–
Creator
Paweł Kuna
Age
15 days
Edge network
Active
Avatars list
JL +3
Checkbox
Icon
Checked
Form control
Longer description
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -16,3 +17,9 @@ You can adjust the datagrid to your needs by setting the values of variables: |------------------------------|--------------------------------|----------| | `--tblr-datagrid-item-width` | Width of the datagrid item | `15rem` | | `--tblr-datagrid-padding` | Gap between the datagrid items | `1.5rem` | + +## SCSS variables + +Use these SCSS variables to customize the datagrid. The default values are: + + diff --git a/docs/pages/ui/components/dropdown.mdx b/docs/pages/ui/components/dropdown.mdx index 6c3bab884..51d00766e 100644 --- a/docs/pages/ui/components/dropdown.mdx +++ b/docs/pages/ui/components/dropdown.mdx @@ -5,6 +5,7 @@ description: Organize options with a dropdown menu. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default dropdown @@ -93,3 +94,15 @@ Use a dropdown with card content to make it easy for users to get more informati
Open dropdown
How do you know she is a witch?

How do you know she is a witch?

Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit.
Maryjo Lebarree
3 days ago
 + +## JavaScript + +Tabler automatically initializes all elements with `data-bs-toggle="dropdown"` on page load. This is the code that runs: + + + +## SCSS variables + +Use these SCSS variables to customize dropdowns. The default values are: + + diff --git a/docs/pages/ui/components/empty.mdx b/docs/pages/ui/components/empty.mdx index b9c8cdd68..683f75ed0 100644 --- a/docs/pages/ui/components/empty.mdx +++ b/docs/pages/ui/components/empty.mdx @@ -6,6 +6,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Illustration from '@ui/Illustration.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -32,3 +33,9 @@ Instead of adding an icon or illustration you can simply give the text:
404

Oops… You just found an error page

Try adjusting your search or filter to find what you're looking for.

Take me home
+ +## SCSS variables + +Use these SCSS variables to customize the empty state. The default values are: + + diff --git a/docs/pages/ui/components/modal.mdx b/docs/pages/ui/components/modal.mdx index 94be05350..431bfa29d 100644 --- a/docs/pages/ui/components/modal.mdx +++ b/docs/pages/ui/components/modal.mdx @@ -6,6 +6,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; +import CodeDocs from '@components/CodeDocs.astro'; Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `` so that modal content scrolls instead. @@ -50,3 +51,9 @@ You can use the modal to create a form. Look at the example below to see how the + +## SCSS variables + +Use these SCSS variables to customize modals. The default values are: + + diff --git a/docs/pages/ui/components/offcanvas.mdx b/docs/pages/ui/components/offcanvas.mdx index bd88ceb92..2b439d8c8 100644 --- a/docs/pages/ui/components/offcanvas.mdx +++ b/docs/pages/ui/components/offcanvas.mdx @@ -3,6 +3,7 @@ title: Offcanvas layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript. @@ -27,3 +28,9 @@ The offcanvas component is used to display a cookies banner. It is a great way t new bootstrap.Offcanvas(el, { scroll: true }).show(); }); });`} + +## SCSS variables + +Use these SCSS variables to customize the offcanvas component. The default values are: + + diff --git a/docs/pages/ui/components/pagination.mdx b/docs/pages/ui/components/pagination.mdx index 62e82903e..425935ebd 100644 --- a/docs/pages/ui/components/pagination.mdx +++ b/docs/pages/ui/components/pagination.mdx @@ -5,6 +5,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Pagination from '@ui/Pagination.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Basic Example @@ -53,3 +54,9 @@ If you want to use a circle version of the pagination, you can use the `.paginat + +## SCSS variables + +Use these SCSS variables to customize pagination. The default values are: + + diff --git a/docs/pages/ui/components/placeholder.mdx b/docs/pages/ui/components/placeholder.mdx index abb60b320..85d2c07dd 100644 --- a/docs/pages/ui/components/placeholder.mdx +++ b/docs/pages/ui/components/placeholder.mdx @@ -5,6 +5,7 @@ description: Reserve space for upcoming content. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Placeholder line @@ -87,3 +88,9 @@ See in the following examples how else you can use the placeholder component
+ +## SCSS variables + +Use these SCSS variables to customize placeholders. The default values are: + + diff --git a/docs/pages/ui/components/popover.mdx b/docs/pages/ui/components/popover.mdx index d62fef493..1c427e368 100644 --- a/docs/pages/ui/components/popover.mdx +++ b/docs/pages/ui/components/popover.mdx @@ -5,6 +5,7 @@ description: Provide extra information with a popover. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -29,3 +30,15 @@ Popover can be triggered in one or more of the following styles: `manual`, with + +## JavaScript + +Tabler automatically initializes all elements with `data-bs-toggle="popover"` on page load. This is the code that runs: + + + +## SCSS variables + +Use these SCSS variables to customize popovers. The default values are: + + diff --git a/docs/pages/ui/components/progress.mdx b/docs/pages/ui/components/progress.mdx index 742b74848..f43f832f6 100644 --- a/docs/pages/ui/components/progress.mdx +++ b/docs/pages/ui/components/progress.mdx @@ -6,6 +6,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import ProgressBg from '@ui/ProgressBg.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -121,3 +122,9 @@ You can combine progress background with contextual light colors to better separ + +## SCSS variables + +Use these SCSS variables to customize progress bars. The default values are: + + diff --git a/docs/pages/ui/components/ribbon.mdx b/docs/pages/ui/components/ribbon.mdx index ab26e5031..ee26ef7a7 100644 --- a/docs/pages/ui/components/ribbon.mdx +++ b/docs/pages/ui/components/ribbon.mdx @@ -6,6 +6,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -53,3 +54,9 @@ Use the `.ribbon-bookmark` class to create a bookmark ribbon. It is a special st
+ +## SCSS variables + +Use these SCSS variables to customize ribbons. The default values are: + + diff --git a/docs/pages/ui/components/segmented-control.mdx b/docs/pages/ui/components/segmented-control.mdx index fba7eeb2f..e2ded2f7d 100644 --- a/docs/pages/ui/components/segmented-control.mdx +++ b/docs/pages/ui/components/segmented-control.mdx @@ -5,6 +5,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; +import CodeDocs from '@components/CodeDocs.astro'; To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links. @@ -70,3 +71,9 @@ The results can be seen in the examples below. + +## SCSS variables + +Use these SCSS variables to customize the segmented control. The default values are: + + diff --git a/docs/pages/ui/components/spinner.mdx b/docs/pages/ui/components/spinner.mdx index 3bb6600fc..56da83f32 100644 --- a/docs/pages/ui/components/spinner.mdx +++ b/docs/pages/ui/components/spinner.mdx @@ -5,6 +5,7 @@ description: Indicate loading state with a spinner. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -66,3 +67,9 @@ Use buttons with animated dots to notify users that an action they have taken by Loading Loading + +## SCSS variables + +Use these SCSS variables to customize spinners. The default values are: + + diff --git a/docs/pages/ui/components/status.mdx b/docs/pages/ui/components/status.mdx index e6e5dade1..0d7496280 100644 --- a/docs/pages/ui/components/status.mdx +++ b/docs/pages/ui/components/status.mdx @@ -5,6 +5,7 @@ description: Highlight an interface element with a status dot. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -66,3 +67,9 @@ Use the status indicator to show the status of a component or page. The status i + +## SCSS variables + +Use these SCSS variables to customize statuses. The default values are: + + diff --git a/docs/pages/ui/components/step.mdx b/docs/pages/ui/components/step.mdx index 0644300eb..8cc6ff5ad 100644 --- a/docs/pages/ui/components/step.mdx +++ b/docs/pages/ui/components/step.mdx @@ -6,6 +6,7 @@ description: Simplify a complex process with a step. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -86,3 +87,9 @@ The example below demonstrates a progress tracker with numbers and a different c
+ +## SCSS variables + +Use these SCSS variables to customize steps. The default values are: + + diff --git a/docs/pages/ui/components/switch-icon.mdx b/docs/pages/ui/components/switch-icon.mdx index 02f1b0cc1..fe2f6796e 100644 --- a/docs/pages/ui/components/switch-icon.mdx +++ b/docs/pages/ui/components/switch-icon.mdx @@ -7,6 +7,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -23,3 +24,9 @@ You can also add a fancy animation to add variety to your button. See demo below + +## JavaScript + +Tabler toggles the `active` class on every element with `data-bs-toggle="switch-icon"` on click. This is the code that runs: + + diff --git a/docs/pages/ui/components/tab.mdx b/docs/pages/ui/components/tab.mdx index a9eb1e57d..212a1eecb 100644 --- a/docs/pages/ui/components/tab.mdx +++ b/docs/pages/ui/components/tab.mdx @@ -6,6 +6,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -46,3 +47,9 @@ Add the `.nav-fill` class to make the tabs take up the full space of the parent

Home tab

Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh

Profile tab

Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed

Activity tab

Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus
+ +## JavaScript + +Tabler activates the tab that matches the URL hash on page load, so you can link to a specific tab. This is the code that runs: + + diff --git a/docs/pages/ui/components/table.mdx b/docs/pages/ui/components/table.mdx index 8d9c487e0..d03016d89 100644 --- a/docs/pages/ui/components/table.mdx +++ b/docs/pages/ui/components/table.mdx @@ -5,6 +5,7 @@ description: Visualize data clearly with a table. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Basic Table @@ -43,3 +44,9 @@ If you don't want the table cell content to wrap to another line, use the `table
Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
+ +## SCSS variables + +Use these SCSS variables to customize tables. The default values are: + + diff --git a/docs/pages/ui/components/tag.mdx b/docs/pages/ui/components/tag.mdx index 5072e09d7..01540d380 100644 --- a/docs/pages/ui/components/tag.mdx +++ b/docs/pages/ui/components/tag.mdx @@ -9,6 +9,7 @@ import Flag from '@ui/Flag.astro'; import Icon from '@ui/Icon.astro'; import Payment from '@ui/Payment.astro'; import TagsList from '@ui/TagsList.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Overview @@ -68,3 +69,9 @@ Use `.tags-list` for groups of tags. It applies consistent spacing and wrapping - Add `aria-label` to every close button action. - Keep selectable tags keyboard reachable when using `.tag-check`. - Ensure icon or media tags still include readable text. + +## SCSS variables + +Use these SCSS variables to customize tags. The default values are: + + diff --git a/docs/pages/ui/components/toast.mdx b/docs/pages/ui/components/toast.mdx index 0e2e2091f..c6d3448d5 100644 --- a/docs/pages/ui/components/toast.mdx +++ b/docs/pages/ui/components/toast.mdx @@ -5,6 +5,7 @@ description: Display a lightweight alert notification with a toast. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -29,3 +30,15 @@ Stack multiple toasts together by putting them within one `.toast-container`.
+ +## JavaScript + +Tabler binds every element with `data-bs-toggle="toast"` to show the toast from its `data-bs-target` on click. This is the code that runs: + + + +## SCSS variables + +Use these SCSS variables to customize toasts. The default values are: + + diff --git a/docs/pages/ui/components/tooltip.mdx b/docs/pages/ui/components/tooltip.mdx index cf2d50bff..72b05249e 100644 --- a/docs/pages/ui/components/tooltip.mdx +++ b/docs/pages/ui/components/tooltip.mdx @@ -5,6 +5,7 @@ description: Guide users with an informative tooltip. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Default markup @@ -21,3 +22,15 @@ If the default tooltip is not enough, you can add the option to use HTML code in + +## JavaScript + +Tabler automatically initializes all elements with `data-bs-toggle="tooltip"` on page load. This is the code that runs: + + + +## SCSS variables + +Use these SCSS variables to customize tooltips. The default values are: + + diff --git a/docs/pages/ui/components/tracking.mdx b/docs/pages/ui/components/tracking.mdx index fb310f253..e11cae8a1 100644 --- a/docs/pages/ui/components/tracking.mdx +++ b/docs/pages/ui/components/tracking.mdx @@ -6,6 +6,7 @@ layout: '@layouts/DocsMdxLayout.astro' --- import Subheader from '@ui/Subheader.astro'; import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Basic example @@ -20,3 +21,9 @@ You can add a tracking component inside the cards to give your reports a fresh l
Status monitoring
Current month Last month Last 3 months
99.5%
2%
+ +## SCSS variables + +Use these SCSS variables to customize the tracking component. The default values are: + + diff --git a/docs/pages/ui/forms/form-elements.mdx b/docs/pages/ui/forms/form-elements.mdx index 5346cea90..0a07c2ccc 100644 --- a/docs/pages/ui/forms/form-elements.mdx +++ b/docs/pages/ui/forms/form-elements.mdx @@ -7,6 +7,7 @@ order: 1 layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Classic inputs @@ -163,3 +164,9 @@ Add an icon link which you want to display at the end of your input control to v
+ +## SCSS variables + +Use these SCSS variables to customize form controls. The default values are: + + diff --git a/docs/pages/ui/forms/form-input-mask.mdx b/docs/pages/ui/forms/form-input-mask.mdx index 0db99c30e..ed4260b3c 100644 --- a/docs/pages/ui/forms/form-input-mask.mdx +++ b/docs/pages/ui/forms/form-input-mask.mdx @@ -8,6 +8,7 @@ layout: '@layouts/DocsMdxLayout.astro' import Example from '@components/Example.astro' import TabsPackage from '@components/TabsPackage.astro' +import CodeDocs from '@components/CodeDocs.astro'; ## Installation @@ -56,3 +57,9 @@ Look at the example below to see how the input mask works: ## More examples If you need more examples of input masks, you can find them in the [IMask documentation](https://imask.js.org/guide.html#masked-input). + +## JavaScript + +Tabler automatically initializes all elements with `data-mask` on page load. This is the code that runs: + + diff --git a/docs/pages/ui/forms/form-validation.mdx b/docs/pages/ui/forms/form-validation.mdx index 04aa1b558..223dc89bf 100644 --- a/docs/pages/ui/forms/form-validation.mdx +++ b/docs/pages/ui/forms/form-validation.mdx @@ -5,6 +5,7 @@ description: Indicate valid or invalid inputs. layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; ## Validation states @@ -39,3 +40,9 @@ To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes. + +## SCSS variables + +Use these SCSS variables to customize form validation states. The default values are: + + diff --git a/docs/pages/ui/layout/navbars.mdx b/docs/pages/ui/layout/navbars.mdx index 518f34f83..ad4343093 100644 --- a/docs/pages/ui/layout/navbars.mdx +++ b/docs/pages/ui/layout/navbars.mdx @@ -8,6 +8,7 @@ layout: '@layouts/DocsMdxLayout.astro' import Example from '@components/Example.astro' import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro' import Icon from '@ui/Icon.astro' +import CodeDocs from '@components/CodeDocs.astro'; The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements, and even interactive components like dropdown menus or search bars. @@ -89,3 +90,9 @@ The navbar can contain links, buttons, and other elements. You can customize the + +## SCSS variables + +Use these SCSS variables to customize the navbar. The default values are: + + diff --git a/docs/pages/ui/layout/navs-tabs.mdx b/docs/pages/ui/layout/navs-tabs.mdx index 6183eb24d..9e6eccb49 100644 --- a/docs/pages/ui/layout/navs-tabs.mdx +++ b/docs/pages/ui/layout/navs-tabs.mdx @@ -5,6 +5,7 @@ description: "Essential guide to nav styles: tabs, pills, dropdowns, and more." layout: '@layouts/DocsMdxLayout.astro' --- import Example from '@components/Example.astro'; +import CodeDocs from '@components/CodeDocs.astro'; Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects. @@ -95,3 +96,9 @@ Example below shows how tabs with dropdown menus are displayed. + +## SCSS variables + +Use these SCSS variables to customize navs and tabs. The default values are: + + diff --git a/shared/lib/code-example.ts b/shared/lib/code-example.ts index e1bd24d38..50e232975 100644 --- a/shared/lib/code-example.ts +++ b/shared/lib/code-example.ts @@ -24,6 +24,25 @@ export async function highlightCode(code: string, lang = 'html'): Promise-start ` and `// -end ` + * comments in a source file, dedented to the first column. Returns null when the + * markers are missing. + */ +export function extractMarkedSnippet(source: string, marker: string, name: string): string | null { + const match = source.match(new RegExp(`// ${marker}-start ${name}\\n((?:.|\\n)*?)// ${marker}-end ${name}`)) + if (!match?.[1]) { + return null + } + const lines = match[1].split('\n') + const spaceCounts = lines.filter((line) => line.trim().length > 0).map((line) => (line.match(/^ */)?.[0] ?? '').length) + const minSpaces = spaceCounts.length ? Math.min(...spaceCounts) : 0 + return lines + .map((line) => line.slice(minSpaces)) + .join('\n') + .trim() +} + /** Escape text for use in HTML attributes (e.g. data-clipboard-text). */ export function escapeAttribute(text: string): string { return text