mirror of
https://github.com/tabler/tabler.git
synced 2026-11-03 13:38:45 +04:00
Generate SCSS and JS docs snippets from source markers (#2798)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
0ce0db4009
commit
9c4dc73a8b
50 files changed
+467
-2
No files matched your search
@@ -1,4 +1,5 @@
|
||||
// Autosize plugin
|
||||
// js-docs-start autosize-init
|
||||
const autosizeElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-bs-toggle="autosize"]')
|
||||
|
||||
if (autosizeElements.length) {
|
||||
@@ -8,3 +9,4 @@ if (autosizeElements.length) {
|
||||
}
|
||||
})
|
||||
}
|
||||
// js-docs-end autosize-init
|
||||
@@ -1,3 +1,4 @@
|
||||
// js-docs-start countup-init
|
||||
const countupElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-countup]')
|
||||
|
||||
if (countupElements.length) {
|
||||
@@ -29,3 +30,4 @@ if (countupElements.length) {
|
||||
}
|
||||
})
|
||||
}
|
||||
// js-docs-end countup-init
|
||||
@@ -3,6 +3,7 @@ import { Dropdown } from './bootstrap'
|
||||
/*
|
||||
Core dropdowns
|
||||
*/
|
||||
// js-docs-start dropdown-init
|
||||
const dropdownTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[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
|
||||
@@ -1,5 +1,6 @@
|
||||
// Input mask plugin
|
||||
|
||||
// js-docs-start input-mask-init
|
||||
const maskElementList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[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
|
||||
@@ -3,6 +3,7 @@ import { Popover } from './bootstrap'
|
||||
/*
|
||||
Core popovers
|
||||
*/
|
||||
// js-docs-start popover-init
|
||||
const popoverTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[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
|
||||
@@ -1,6 +1,7 @@
|
||||
/*
|
||||
Switch icons
|
||||
*/
|
||||
// js-docs-start switch-icon-init
|
||||
const switchesTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[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
|
||||
@@ -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
|
||||
@@ -3,6 +3,7 @@ import { Toast } from './bootstrap'
|
||||
/*
|
||||
Toasts
|
||||
*/
|
||||
// js-docs-start toast-init
|
||||
const toastsTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[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
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Tooltip } from './bootstrap'
|
||||
|
||||
// js-docs-start tooltip-init
|
||||
const tooltipTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[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
|
||||
@@ -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,<svg xmlns='http://www.w3.org/
|
||||
$table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !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;
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
// Prints everything between `// <marker>-start <name>` and `// <marker>-end <name>`
|
||||
// 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 '<CodeDocs />' 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 '<CodeDocs />' 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 '<CodeDocs />' 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.`)
|
||||
}
|
||||
---
|
||||
|
||||
<CodeSnippet code={content} lang={kind.lang} />
|
||||
@@ -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)
|
||||
---
|
||||
|
||||
<div class="position-relative">
|
||||
<a class="btn btn-icon btn-dark position-absolute m-2 top-0 end-0 z-3" data-clipboard-text={code}>
|
||||
<Icon name="clipboard" />
|
||||
<Icon name="check" class="d-none" />
|
||||
</a>
|
||||
<Fragment set:html={highlighted} />
|
||||
</div>
|
||||
@@ -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:
|
||||
|
||||
<CodeDocs name="accordion-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<div class="alert alert-lime" role="alert"> <h4 class="alert-title">Wow! Everything worked!</h4> <div class="text-secondary">Your account has been saved!</div> </div> <div class="alert alert-cyan" role="alert"> <h4 class="alert-title">Did you know?</h4> <div class="text-secondary">Here is something that you might like to know.</div> </div> <div class="alert alert-facebook" role="alert"> <h4 class="alert-title">You have a new friend on Facebook</h4> <div class="text-secondary">Say hello to your new friend!</div> </div> <div class="alert alert-instagram alert-dismissible alert-important" role="alert"> <div class="d-flex"> <div> <span class="avatar me-3" style="background-image: url(/static/avatars/035f.jpg)" ></span> </div> <div> <h4 class="alert-title">Sophia just added a new post on Instagram</h4> <div>Be the first to see it!</div> </div> </div> <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a> </div>
|
||||
</Example>
|
||||
|
||||
## 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:
|
||||
|
||||
<CodeDocs name="alert-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example column vertical>
|
||||
<label class="form-label">Autosize example</label> <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
|
||||
</Example>
|
||||
|
||||
## JavaScript
|
||||
|
||||
Tabler automatically initializes all elements with `data-bs-toggle="autosize"` on page load. This is the code that runs:
|
||||
|
||||
<CodeDocs name="autosize-init" file="core/js/src/autosize.ts" />
|
||||
@@ -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
|
||||
<Example centered>
|
||||
<AvatarList stacked={true}> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle">SA</span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)" ></span> </AvatarList>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize avatars. The default values are:
|
||||
|
||||
<CodeDocs name="avatar-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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:
|
||||
|
||||
<CodeDocs name="badge-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example centered vertical>
|
||||
<div class="page-header"> <div class="row align-items-center mw-100"> <div class="col"> <Breadcrumb pages={['Home', 'Library', 'Articles']} /> <h2 class="page-title"> <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span> </h2> </div> <div class="col-auto"> <div class="btn-list"> <a href="#" class="btn d-none d-md-inline-flex"> <Icon name="edit" /> Edit </a> <a href="#" class="btn btn-primary">Publish</a> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize breadcrumbs. The default values are:
|
||||
|
||||
<CodeDocs name="breadcrumb-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example centered>
|
||||
<ButtonGroup vertical={true}> <button type="button" class="btn">Top</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Bottom</button> </ButtonGroup>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize buttons. The default values are:
|
||||
|
||||
<CodeDocs name="btn-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example bg="surface-secondary" column>
|
||||
<div class="card-tabs"> <ul class="nav nav-tabs"> <li class="nav-item"> <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a> </li> <li class="nav-item"> <a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a> </li> <li class="nav-item"> <a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a> </li> <li class="nav-item"> <a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a> </li> </ul> <div class="tab-content"> <div id="tab-top-1" class="card tab-pane active show"> <div class="card-body"> <div class="card-title">Content of tab #1</div> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p> </div> </div> <div id="tab-top-2" class="card tab-pane"> <div class="card-body"> <div class="card-title">Content of tab #2</div> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p> </div> </div> <div id="tab-top-3" class="card tab-pane"> <div class="card-body"> <div class="card-title">Content of tab #3</div> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p> </div> </div> <div id="tab-top-4" class="card tab-pane"> <div class="card-body"> <div class="card-title">Content of tab #4</div> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize cards. The default values are:
|
||||
|
||||
<CodeDocs name="card-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example>
|
||||
<div id="carousel-captions" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" alt="" src="/static/photos/workplace-with-laptop-on-table-at-home-4.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/people-watching-a-presentation-in-a-room.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/people-by-a-banquet-table-full-with-food.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/books-and-purple-flowers-on-a-wooden-stool-by-the-bed.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/cup-of-coffee-and-an-open-book.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> </div> <a class="carousel-control-prev" data-bs-target="#carousel-captions" role="button" data-bs-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" data-bs-target="#carousel-captions" role="button" data-bs-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize the carousel. The default values are:
|
||||
|
||||
<CodeDocs name="carousel-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize charts. The default values are:
|
||||
|
||||
<CodeDocs name="chart-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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,
|
||||
<Example vertical separated>
|
||||
<h1 data-countup='{"suffix":"%"}'>300</h1> <h1 data-countup='{"suffix":"‰"}'>300</h1>
|
||||
</Example>
|
||||
|
||||
## JavaScript
|
||||
|
||||
Tabler automatically initializes all elements with `data-countup` on page load. This is the code that runs:
|
||||
|
||||
<CodeDocs name="countup-init" file="core/js/src/countup.ts" />
|
||||
@@ -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';
|
||||
|
||||
<Example>
|
||||
<div class="datagrid"> <div class="datagrid-item"> <div class="datagrid-title">Registrar</div> <div class="datagrid-content">Third Party</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Nameservers</div> <div class="datagrid-content">Third Party</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Port number</div> <div class="datagrid-content">3306</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Expiration date</div> <div class="datagrid-content">–</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Creator</div> <div class="datagrid-content"> <div class="d-flex align-items-center"> <span class="avatar avatar-xs me-2 rounded" style="background-image: url(/static/avatars/027m.jpg)" ></span> Paweł Kuna </div> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Age</div> <div class="datagrid-content">15 days</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Edge network</div> <div class="datagrid-content"> <span class="status status-green"> Active </span> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Avatars list</div> <div class="datagrid-content"> <div class="avatar-list avatar-list-stacked"> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/029f.jpg)" ></span> <span class="avatar avatar-xs rounded">JL</span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/015f.jpg)" ></span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/004m.jpg)" ></span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/037m.jpg)" ></span> <span class="avatar avatar-xs rounded">+3</span> </div> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Checkbox</div> <div class="datagrid-content"> <label class="form-check"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Click me</span> </label> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Icon</div> <div class="datagrid-content"> <svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 12l5 5l10 -10" /> </svg> Checked </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Form control</div> <div class="datagrid-content"> <input type="text" class="form-control form-control-flush" placeholder="Input placeholder" /> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Longer description</div> <div class="datagrid-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> </div> </div>
|
||||
@@ -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:
|
||||
|
||||
<CodeDocs name="datagrid-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example height="520px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem"> <div class="card d-flex flex-column"> <a href="#"> <img class="card-img-top" src="/static/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" /> </a> <div class="card-body d-flex flex-column"> <h3 class="card-title"> <a href="#">How do you know she is a witch?</a> </h3> <div class="text-secondary"> Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. </div> <div class="d-flex align-items-center pt-4 mt-auto"> <span class="avatar" style="background-image: url(/static/avatars/013m.jpg)"></span> <div class="ms-3"> <a href="#" class="text-body">Maryjo Lebarree</a> <div class="text-secondary">3 days ago</div> </div> <div class="ms-auto"> <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /> </svg> </a> </div> </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## JavaScript
|
||||
|
||||
Tabler automatically initializes all elements with `data-bs-toggle="dropdown"` on page load. This is the code that runs:
|
||||
|
||||
<CodeDocs name="dropdown-init" file="core/js/src/dropdown.ts" />
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize dropdowns. The default values are:
|
||||
|
||||
<CodeDocs name="dropdown-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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:
|
||||
<Example bg="surface-secondary">
|
||||
<div class="empty"> <div class="empty-header">404</div> <p class="empty-title">Oops… You just found an error page</p> <p class="empty-subtitle text-secondary"> Try adjusting your search or filter to find what you're looking for. </p> <div class="empty-action"> <a href="#" class="btn btn-primary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="5" y1="12" x2="19" y2="12" /> <line x1="5" y1="12" x2="11" y2="18" /> <line x1="5" y1="12" x2="11" y2="6" /> </svg> Take me home </a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize the empty state. The default values are:
|
||||
|
||||
<CodeDocs name="empty-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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 `<body>` 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
|
||||
<Example raw bg="surface-secondary" class="px-5">
|
||||
<div class="modal" id="exampleModal" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">New report</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="mb-3"> <label class="form-label">Name</label> <input type="text" class="form-control" name="example-text-input" placeholder="Your report name" /> </div> <label class="form-label">Report type</label> <div class="form-selectgroup-boxes row mb-3"> <div class="col-md-6"> <label class="form-selectgroup-item"> <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label d-flex align-items-center p-3"> <span class="me-3"> <span class="form-selectgroup-check"></span> </span> <span class="form-selectgroup-label-content"> <span class="form-selectgroup-title strong mb-1">Simple</span> <span class="d-block text-secondary" >Provide only basic data needed for the report</span > </span> </span> </label> </div> <div class="col-md-6"> <label class="form-selectgroup-item"> <input type="radio" name="report-type" value="1" class="form-selectgroup-input" /> <span class="form-selectgroup-label d-flex align-items-center p-3"> <span class="me-3"> <span class="form-selectgroup-check"></span> </span> <span class="form-selectgroup-label-content"> <span class="form-selectgroup-title strong mb-1">Advanced</span> <span class="d-block text-secondary" >Insert charts and additional advanced analyses to be inserted in the report</span > </span> </span> </label> </div> </div> <div class="row"> <div class="col-lg-8"> <div class="mb-3"> <label class="form-label">Report url</label> <div class="input-group input-group-flat"> <span class="input-group-text"> https://tabler.io/reports/ </span> <input type="text" class="form-control ps-0" value="report-01" autocomplete="off" /> </div> </div> </div> <div class="col-lg-4"> <div class="mb-3"> <label class="form-label">Visibility</label> <select class="form-select"> <option value="1" selected>Private</option> <option value="2">Public</option> <option value="3">Hidden</option> </select> </div> </div> </div> </div> <div class="modal-body"> <div class="row"> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Client name</label> <input type="text" class="form-control" /> </div> </div> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Reporting period</label> <input type="date" class="form-control" /> </div> </div> <div class="col-lg-12"> <div> <label class="form-label">Additional information</label> <textarea class="form-control" rows="3"></textarea> </div> </div> </div> </div> <div class="modal-footer"> <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal"> Cancel </a> <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal"> <Icon name="plus" /> Create new report </a> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize modals. The default values are:
|
||||
|
||||
<CodeDocs name="modal-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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();
|
||||
});
|
||||
});`}</script>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize the offcanvas component. The default values are:
|
||||
|
||||
<CodeDocs name="offcanvas-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example centered vertical separated>
|
||||
<Pagination class="pagination-circle" /> <Pagination class="pagination-circle pagination-outline" />
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize pagination. The default values are:
|
||||
|
||||
<CodeDocs name="pagination-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example column centered vertical>
|
||||
<div class="card placeholder-glow"> <div class="ratio ratio-21x9 card-img-top placeholder"></div> <div class="card-body"> <div class="placeholder col-9 mb-3"></div> <div class="placeholder placeholder-xs col-10"></div> <div class="placeholder placeholder-xs col-11"></div> <div class="mt-3"> <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true" ></a> </div> </div> </div> <div class="card"> <div class="row g-0 align-items-center placeholder-glow"> <div class="col-3"> <div class="ratio ratio-1x1 card-img-start placeholder"></div> </div> <div class="col"> <div class="card-body"> <div class="placeholder col-9 mb-3"></div> <div class="placeholder placeholder-xs col-10"></div> <div class="placeholder placeholder-xs col-11"></div> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> </div> </div> </div> <div class="card"> <div class="card-body py-5 text-center"> <div> <div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div> </div> <div class="mt w-75 mx-auto"> <div class="placeholder col-9 mb-3"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </div> <div class="card"> <ul class="list-group list-group-flush placeholder-glow"> <li class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col-7"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> <div class="col-2 ms-auto text-end"> <div class="placeholder placeholder-xs col-8"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </li> <li class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col-7"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> <div class="col-2 ms-auto text-end"> <div class="placeholder placeholder-xs col-8"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </li> <li class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col-7"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> <div class="col-2 ms-auto text-end"> <div class="placeholder placeholder-xs col-8"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </li> <li class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col-7"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> <div class="col-2 ms-auto text-end"> <div class="placeholder placeholder-xs col-8"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </li> </ul> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize placeholders. The default values are:
|
||||
|
||||
<CodeDocs name="placeholder-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example centered bg="surface-secondary">
|
||||
<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" > Hover to toggle popover </button>
|
||||
</Example>
|
||||
|
||||
## JavaScript
|
||||
|
||||
Tabler automatically initializes all elements with `data-bs-toggle="popover"` on page load. This is the code that runs:
|
||||
|
||||
<CodeDocs name="popover-init" file="core/js/src/popover.ts" />
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize popovers. The default values are:
|
||||
|
||||
<CodeDocs name="popover-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example columnFullWidth>
|
||||
<ProgressBg value="75" text="Success" color="success-lt" showValue true /> <ProgressBg value="60" text="Warning" color="warning-lt" showValue true /> <ProgressBg value="40" text="Danger" color="danger-lt" showValue true /> <ProgressBg value="90" text="Info" color="info-lt" showValue true />
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize progress bars. The default values are:
|
||||
|
||||
<CodeDocs name="progress-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example column>
|
||||
<div class="card w-100"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon ribbon-bookmark bg-orange"> <Icon name="star" /> </div> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize ribbons. The default values are:
|
||||
|
||||
<CodeDocs name="ribbon-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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.
|
||||
<Example centered vertical>
|
||||
<nav class="nav nav-segmented nav-sm" role="tablist"> <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page" > List </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Kanban </button> <button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1" > Calendar </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Files </button> </nav> <nav class="nav nav-segmented nav-lg" role="tablist"> <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page" > List </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Kanban </button> <button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1" > Calendar </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Files </button> </nav>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize the segmented control. The default values are:
|
||||
|
||||
<CodeDocs name="segmented-nav-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example centered>
|
||||
<a href="#" class="btn btn-primary"> Loading<span class="animated-dots"></span> </a> <a href="#" class="btn btn-primary disabled"> Loading<span class="animated-dots"></span> </a>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize spinners. The default values are:
|
||||
|
||||
<CodeDocs name="spinner-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example>
|
||||
<span class="status-indicator status-blue status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-azure status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-indigo status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-purple status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-pink status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-red status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-orange status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-yellow status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-lime status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-green status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-teal status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-cyan status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize statuses. The default values are:
|
||||
|
||||
<CodeDocs name="status-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example>
|
||||
<div class="steps steps-counter"> <a href="#" class="step-item"></a> <a href="#" class="step-item active"></a> <span href="#" class="step-item"></span> <span href="#" class="step-item"></span> <span href="#" class="step-item"></span> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize steps. The default values are:
|
||||
|
||||
<CodeDocs name="steps-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example>
|
||||
<button class="switch-icon" data-bs-toggle="switch-icon"> <span class="switch-icon-a text-secondary"> <Icon name="circle" /> </span> <span class="switch-icon-b text-primary"> <Icon name="circle" type="filled" /> </span> </button> <button class="switch-icon switch-icon-fade" data-bs-toggle="switch-icon"> <span class="switch-icon-a text-secondary"> <Icon name="heart" /> </span> <span class="switch-icon-b text-red"> <Icon name="heart" type="filled" /> </span> </button> <button class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon"> <span class="switch-icon-a text-secondary"> <Icon name="star" /> </span> <span class="switch-icon-b text-yellow"> <Icon name="star" type="filled" /> </span> </button> <button class="switch-icon switch-icon-flip" data-bs-toggle="switch-icon"> <span class="switch-icon-a text-secondary"> <Icon name="thumb-up" /> </span> <span class="switch-icon-b text-facebook"> <Icon name="thumb-up" type="filled" /> </span> </button> <button class="switch-icon switch-icon-slide-up" data-bs-toggle="switch-icon"> <span class="switch-icon-a text-secondary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /> </svg> </span> <span class="switch-icon-b text-twitter"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /> </svg> </span> </button> <button class="switch-icon switch-icon-slide-left" data-bs-toggle="switch-icon"> <span class="switch-icon-a text-secondary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 12l5 5l10 -10" /> </svg> </span> <span class="switch-icon-b text-red"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> </span> </button> <button class="switch-icon switch-icon-slide-down" data-bs-toggle="switch-icon"> <span class="switch-icon-a text-secondary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="12" y1="5" x2="12" y2="19" /> <line x1="18" y1="13" x2="12" y2="19" /> <line x1="6" y1="13" x2="12" y2="19" /> </svg> </span> <span class="switch-icon-b text-secondary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="12" y1="5" x2="12" y2="19" /> <line x1="18" y1="11" x2="12" y2="5" /> <line x1="6" y1="11" x2="12" y2="5" /> </svg> </span> </button> <button class="switch-icon switch-icon-slide-end" data-bs-toggle="switch-icon"> <span class="switch-icon-a text-secondary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="7" cy="17" r="2" /> <circle cx="17" cy="17" r="2" /> <path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" /> </svg> </span> <span class="switch-icon-b text-secondary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="18" cy="17" r="2" /> <circle cx="6" cy="17" r="2" /> <Line truncated
|
||||
</Example>
|
||||
|
||||
## JavaScript
|
||||
|
||||
Tabler toggles the `active` class on every element with `data-bs-toggle="switch-icon"` on click. This is the code that runs:
|
||||
|
||||
<CodeDocs name="switch-icon-init" file="core/js/src/switch-icon.ts" />
|
||||
@@ -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
|
||||
<Example>
|
||||
<div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs"> <li class="nav-item"> <a href="#tabs-home-ex5" class="nav-link active" data-bs-toggle="tab"> <Icon name="home" /> </a> </li> <li class="nav-item"> <a href="#tabs-profile-ex5" class="nav-link" data-bs-toggle="tab"> <Icon name="user" /> </a> </li> <li class="nav-item"> <a href="#tabs-activity-ex5" class="nav-link" data-bs-toggle="tab"> <Icon name="activity" /> </a> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div class="tab-pane active show" id="tabs-home-ex5"> <h4>Home tab</h4> <div> Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh </div> </div> <div class="tab-pane" id="tabs-profile-ex5"> <h4>Profile tab</h4> <div> Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed </div> </div> <div class="tab-pane" id="tabs-activity-ex5"> <h4>Activity tab</h4> <div> Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## 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:
|
||||
|
||||
<CodeDocs name="tab-init" file="core/js/src/tab.ts" />
|
||||
@@ -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
|
||||
<Example height="42rem">
|
||||
<table class="table"> <thead class="sticky-top"> <tr> <th scope="col">Class</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <th scope="row">Default</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Primary</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Secondary</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Success</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Danger</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Warning</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Info</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Light</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-dark"> <th scope="row">Dark</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Default</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Primary</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Secondary</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Success</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Danger</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Warning</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Info</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Light</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-dark"> <th scope="row">Dark</th> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize tables. The default values are:
|
||||
|
||||
<CodeDocs name="table-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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:
|
||||
|
||||
<CodeDocs name="tag-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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`.
|
||||
<Example height="25rem" centered bg="surface-secondary">
|
||||
<div class="toast-container"> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast" > <div class="toast-header"> <span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/008m.jpg)" ></span> <strong class="me-auto">Dunn Slane</strong> <small>11 mins ago</small> <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close" ></button> </div> <div class="toast-body">Hello, world! This is a toast message.</div> </div> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast" > <div class="toast-header"> <span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/020m.jpg)" ></span> <strong class="me-auto">Mallory Hulme</strong> <small>7 mins ago</small> <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close" ></button> </div> <div class="toast-body">This is another toast message.</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## 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:
|
||||
|
||||
<CodeDocs name="toast-init" file="core/js/src/toast.ts" />
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize toasts. The default values are:
|
||||
|
||||
<CodeDocs name="toast-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example>
|
||||
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" > Tooltip with HTML </button>
|
||||
</Example>
|
||||
|
||||
## JavaScript
|
||||
|
||||
Tabler automatically initializes all elements with `data-bs-toggle="tooltip"` on page load. This is the code that runs:
|
||||
|
||||
<CodeDocs name="tooltip-init" file="core/js/src/tooltip.ts" />
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize tooltips. The default values are:
|
||||
|
||||
<CodeDocs name="tooltip-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example>
|
||||
<div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <Subheader>Status monitoring</Subheader> <div class="ms-auto lh-1"> <div class="dropdown"> <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Current month</a > <div class="dropdown-menu dropdown-menu-end"> <a class="dropdown-item active" href="#">Current month</a> <a class="dropdown-item" href="#">Last month</a> <a class="dropdown-item" href="#">Last 3 months</a> </div> </div> </div> </div> <div class="d-flex align-items-baseline"> <div class="h1 mb-3 me-2">99.5%</div> <div class="me-auto"> <span class="text-green d-inline-flex align-items-center lh-1"> 2% <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="3 17 9 11 13 15 21 7" /> <polyline points="14 7 21 7 21 14" /> </svg> </span> </div> </div> <div class="mt-2"> <div class="tracking"> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize the tracking component. The default values are:
|
||||
|
||||
<CodeDocs name="tracking-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with appended icon links</label> <div class="input-group input-group-flat"> <input type="text" class="form-control" autocomplete="off" /> <span class="input-group-text"> <a href="#" class="link-secondary" title="Clear search" data-bs-toggle="tooltip"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> </a> <a href="#" class="link-secondary ms-2" title="Search settings" data-bs-toggle="tooltip"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="6" cy="10" r="2" /> <line x1="6" y1="4" x2="6" y2="8" /> <line x1="6" y1="12" x2="6" y2="20" /> <circle cx="12" cy="16" r="2" /> <line x1="12" y1="4" x2="12" y2="14" /> <line x1="12" y1="18" x2="12" y2="20" /> <circle cx="18" cy="7" r="2" /> <line x1="18" y1="4" x2="18" y2="5" /> <line x1="18" y1="9" x2="18" y2="20" /> </svg> </a> <a href="#" class="link-secondary ms-2 disabled" title="Add notification" data-bs-toggle="tooltip" > <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /> <path d="M9 17v1a3 3 0 0 0 6 0v-1" /> </svg> </a> </span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize form controls. The default values are:
|
||||
|
||||
<CodeDocs name="input-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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:
|
||||
|
||||
<CodeDocs name="input-mask-init" file="core/js/src/input-mask.ts" />
|
||||
@@ -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.
|
||||
<Example>
|
||||
<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." /> <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize form validation states. The default values are:
|
||||
|
||||
<CodeDocs name="form-validation-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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
|
||||
</div>
|
||||
</header>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize the navbar. The default values are:
|
||||
|
||||
<CodeDocs name="navbar-variables" file="core/scss/_variables.scss" />
|
||||
@@ -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.
|
||||
<Example overflow="visible">
|
||||
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false" >Dropdown</a > <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" aria-disabled="true">Disabled</a> </li> </ul>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize navs and tabs. The default values are:
|
||||
|
||||
<CodeDocs name="nav-variables" file="core/scss/_variables.scss" />
|
||||
@@ -24,6 +24,25 @@ export async function highlightCode(code: string, lang = 'html'): Promise<string
|
||||
return highlighter.codeToHtml(code, { lang, theme: 'github-dark' })
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract the content between `// <marker>-start <name>` and `// <marker>-end <name>`
|
||||
* 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
|
||||
|
||||
Reference in new issue
Block a user