mirror of
https://github.com/tabler/tabler.git
synced 2026-10-21 07:14:30 +04:00
Fill the docs gaps before the 1.7 release (#3338)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
914faea116
commit
d07533c954
15 files changed
+112
-17
No files matched your search
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Updated the 1.7 upgrade guide with the visual changes, the Shape menu entry, `combined` navbar position, flag aliases and `--tblr-kbd-*` variables.
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Typography
|
||||
summary: How Tabler styles headings, paragraphs, semantic text elements, horizontal rules and the text utilities.
|
||||
description: How Tabler styles headings, paragraphs and text elements to keep content readable.
|
||||
css-vars: kbd
|
||||
related: [/ui/base/prose]
|
||||
---
|
||||
import Example from '@components/Example.astro';
|
||||
@@ -184,7 +185,7 @@ Wrap the keys of one shortcut in `.kbd-group` to keep them together on one line
|
||||
|
||||
### Key in a button
|
||||
|
||||
Inside a button, a badge or a tooltip the key takes the colour of the text around it.
|
||||
Inside a button, a badge or a tooltip the key takes the colour of the text around it. The size, the colors and the radius of a key are set by the `--tblr-kbd-*` variables listed at the end of this page.
|
||||
|
||||
<Example>
|
||||
<div class="btn-list">
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Hover gallery
|
||||
summary: A set of images that shows one at a time and switches as the pointer moves across it.
|
||||
description: Show several photos in the space of one with the hover gallery component - a good fit for product cards, portfolios and listings.
|
||||
added-in: '1.7.0'
|
||||
related: [/ui/components/carousel, /ui/components/card]
|
||||
source: core/scss/ui/_hover-gallery.scss
|
||||
css-vars: hover-gallery
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Icon list
|
||||
summary: An icon list replaces the bullets of a list with icons, such as a check mark in a list of features, a plan's benefits or the steps of a setup.
|
||||
description: Show a list with icon markers instead of bullets. Change the icon and the color per list or per entry, or lay the entries out in a row.
|
||||
added-in: '1.7.0'
|
||||
related: [/ui/components/list-group, /ui/components/icon]
|
||||
source: core/scss/ui/_lists.scss
|
||||
css-vars: list-icon
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Image label
|
||||
summary: An image label is a short text or an icon pinned to a corner of an image, such as "AI", "New" or a video length.
|
||||
description: Pin a short label to a corner of an image with the image label component. Change the corner and the color, or add an icon.
|
||||
added-in: '1.7.0'
|
||||
related: [/ui/components/ribbon, /ui/components/badge]
|
||||
source: core/scss/ui/_images.scss
|
||||
css-vars: img-label
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Map
|
||||
summary: A map shows places and markers on an interactive world map. Tabler turns a single element into a themed map, and the map itself is rendered by MapLibre GL JS.
|
||||
description: Show interactive maps with markers, popups and a matching dark mode from plain HTML, using MapLibre GL JS and free map tiles. No account or access token is needed.
|
||||
added-in: '1.7.0'
|
||||
related: [/ui/plugins/vector-map]
|
||||
docs-libs: [maplibre-gl]
|
||||
source: core/scss/vendor/_maplibre.scss
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Mockup browser
|
||||
summary: A mockup browser is a frame that looks like a browser window, with the window dots and an address bar, to show a page preview or a screenshot.
|
||||
description: Show a screenshot or any content inside a browser window frame with the mockup browser component. Add an address, a lock icon or your own colors.
|
||||
added-in: '1.7.0'
|
||||
related: [/ui/components/image-label, /ui/components/card]
|
||||
source: core/scss/ui/_mockup-browser.scss
|
||||
css-vars: mockup-browser
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Text shimmer
|
||||
summary: A highlight that sweeps across a short label while an agent thinks or a task runs.
|
||||
description: Show that something is in progress with the text shimmer - a light band that moves across a label such as "Thinking…" until the result arrives.
|
||||
added-in: '1.7.0'
|
||||
related: [/ui/components/spinner, /ui/components/placeholder, /ui/components/chat]
|
||||
source: core/scss/ui/_text-shimmer.scss
|
||||
css-vars: text-shimmer
|
||||
|
||||
@@ -4,6 +4,7 @@ seoTitle: Form CSS variables
|
||||
order: 11
|
||||
summary: Every form control reads its size, colors and states from CSS variables, so you can restyle inputs, selects, checks and switches at runtime without recompiling Sass.
|
||||
description: Reference of the CSS variables that size and color Tabler form controls, with examples of runtime overrides.
|
||||
added-in: '1.7.0'
|
||||
related: [/ui/forms/elements, /ui/forms/floating-labels, /ui/getting-started/customize]
|
||||
---
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
@@ -4,6 +4,7 @@ seoTitle: Number input (quantity stepper)
|
||||
order: 14
|
||||
summary: A number field with a decrease and an increase button, for a quantity in a cart, a number of seats or any value changed in fixed steps.
|
||||
description: Add a number input with min, max and step, hold-to-repeat buttons, arrow key support and change events.
|
||||
added-in: '1.7.0'
|
||||
related: [/ui/forms/elements, /ui/forms/validation]
|
||||
source: core/scss/ui/forms/_form-number-input.scss
|
||||
css-vars: number-input
|
||||
|
||||
@@ -19,7 +19,7 @@ Tabler includes a small script, [`tabler-theme.js`](https://github.com/tabler/ta
|
||||
| Font family | `data-bs-theme-font` | `sans-serif` | `sans-serif`, `serif`, `monospace`, `comic` |
|
||||
| Primary color | `data-bs-theme-primary` | `blue` | `blue`, `azure`, `indigo`, `purple`, `pink`, `red`, `orange`, `yellow`, `lime`, `green`, `teal`, `cyan`, `inverted` |
|
||||
| Corner radius | `data-bs-theme-radius` | `1` | `0`, `0.5`, `1`, `1.5`, `2` |
|
||||
| Navigation position | `data-bs-navbar-position` | `horizontal` | `horizontal`, `vertical` |
|
||||
| Navigation position | `data-bs-navbar-position` | `horizontal` | `horizontal`, `vertical`, `combined` |
|
||||
| Container width | `data-bs-layout` | `default` | `default`, `fluid`, `boxed` |
|
||||
| Navbar behavior | `data-bs-navbar` | `default` | `default`, `sticky` |
|
||||
| Navigation theme | `data-bs-navbar-theme` | `default` | `default`, `dark`, `primary` |
|
||||
@@ -35,7 +35,7 @@ Each setting only appears on `<html>` when it differs from its default. For exam
|
||||
|
||||
The last five settings change the page layout rather than its colors, and they need the markup described in [Page layouts](/ui/layout/page-layouts):
|
||||
|
||||
- `data-bs-navbar-position` only does something on a page that renders **both** navigations - a vertical `aside.navbar-vertical` and a horizontal navbar, both direct children of `.page`. The CSS shows one and hides the other. A page with a single navbar keeps it, whatever the stored value says, so a stale choice can never leave a page with no navigation.
|
||||
- `data-bs-navbar-position` only does something on a page that renders **both** navigations - a vertical `aside.navbar-vertical` and a horizontal navbar, both direct children of `.page`. The CSS shows one and hides the other, and `combined` keeps both on screen. A page with a single navbar keeps it, whatever the stored value says, so a stale choice can never leave a page with no navigation.
|
||||
- `data-bs-layout` is the attribute form of the `.layout-fluid` and `.layout-boxed` body classes. Use one route or the other, not both.
|
||||
- `data-bs-navbar="sticky"` makes the top navbar stick to the top of the viewport while the page scrolls. On the two-row navbar only the top row sticks.
|
||||
- `data-bs-navbar-theme` colors whichever navigation the page shows, since the vertical sidebar is a navbar too. `default` means "follow the page color mode", not "always light". `dark` gives it the dark palette on a light page - the same result as putting `data-bs-theme="dark"` on the element in your markup. `primary` paints it in the primary color with the dark text palette.
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
---
|
||||
title: Upgrade to 1.7
|
||||
summary: Move a project from Tabler 1.6 to 1.7. The Pricing and Shape components moved from the marketing bundle into the core bundle, so a page that loaded only the marketing stylesheet for them needs one more link.
|
||||
description: Upgrade guide from Tabler 1.6 to 1.7 with the components that moved from the marketing bundle into the core bundle, and what to change in your HTML and Sass imports.
|
||||
summary: Move a project from Tabler 1.6 to 1.7. The Pricing and Shape components moved from the marketing bundle into the core bundle, and buttons, switches, small controls, flags and a few dark mode surfaces look a little different.
|
||||
description: Upgrade guide from Tabler 1.6 to 1.7 with the components that moved from the marketing bundle into the core bundle, the visual changes to check, and what to change in your HTML and Sass imports.
|
||||
added-in: '1.7.0'
|
||||
order: 1
|
||||
related: [/ui/getting-started/upgrade/1-6, /ui/getting-started/customize]
|
||||
---
|
||||
|
||||
Tabler 1.7 is a small update. Every class, custom property, Sass variable and function from 1.6 is still there, and the only change that can touch your code is where two components ship: Pricing and Shape moved from `tabler-marketing.css` into the core `tabler.css`. A page that loads both files, as every marketing page does, needs no change.
|
||||
Tabler 1.7 adds a lot and changes very little. Every class, custom property, Sass variable and function from 1.6 is still there. The one thing that can touch your code is where two components ship. Pricing and Shape moved from `tabler-marketing.css` into the core `tabler.css`. If a page loads both files, and every marketing page does, there's nothing to do.
|
||||
|
||||
Check [Pricing and Shape are in the core bundle](#pricing-and-shape-are-in-the-core-bundle) if you load `tabler-marketing.css` on its own or import its Sass partials one by one.
|
||||
If you load `tabler-marketing.css` on its own, or import its Sass partials one by one, read [Pricing and Shape are in the core bundle](#pricing-and-shape-are-in-the-core-bundle). Then have a look at [Visual changes](#visual-changes). A few components are drawn a little differently now, and if you have custom styles sitting close to them, they may need a small adjustment.
|
||||
|
||||
If you're coming from 1.5 or older, do the [1.6 upgrade](/ui/getting-started/upgrade/1-6) first.
|
||||
|
||||
@@ -20,6 +20,8 @@ If you…|You need to…
|
||||
Load `tabler.css` and `tabler-marketing.css` together|Nothing
|
||||
Load `tabler-marketing.css` without `tabler.css` on a page that uses `.pricing` or `.shape`|Add `tabler.css`, see [Pricing and Shape are in the core bundle](#pricing-and-shape-are-in-the-core-bundle)
|
||||
Import `scss/marketing/pricing` or `scss/marketing/shape` in your own Sass|Import `scss/ui/pricing` or `scss/ui/shape`, see [Sass changes](#sass-changes)
|
||||
Style buttons, switches, small inputs or flags yourself|Check them, see [Visual changes](#visual-changes)
|
||||
Use `.flag-country-afrun`, `-bq-bo`, `-bq-sa`, `-bq-se`, `-kn-sk` or `-unasur`|Nothing now, they're aliases; switch to the new codes before 2.0, see [Flags](#flags)
|
||||
|
||||
## Update the package
|
||||
|
||||
@@ -41,9 +43,9 @@ Or update the CDN links:
|
||||
|
||||
## Pricing and Shape are in the core bundle
|
||||
|
||||
The [Pricing](/ui/components/pricing) component, `.pricing` and its `.pricing-*` parts, and the [Shape](/ui/components/shape) component, `.shape` with its size and color modifiers, used to ship only in `tabler-marketing.css`. They're part of `tabler.css` now, so a dashboard can show plan cards or an icon in a shape without the marketing stylesheet. The class names and the markup are the same.
|
||||
The [Pricing](/ui/components/pricing) component (`.pricing` and its `.pricing-*` parts) and the [Shape](/ui/components/shape) component (`.shape` with its size and color modifiers) used to ship only in `tabler-marketing.css`. They're part of `tabler.css` now. So a dashboard can show plan cards, or an icon in a shape, without loading the marketing stylesheet. The class names and the markup haven't changed.
|
||||
|
||||
`tabler-marketing.css` no longer contains the two components. A page that loads both stylesheets keeps working. A page that loaded only `tabler-marketing.css` for them has to add `tabler.css`, which it needs for the buttons, badges and icons inside them anyway:
|
||||
`tabler-marketing.css` doesn't contain the two components any more. A page that loads both stylesheets keeps working. A page that loaded only `tabler-marketing.css` for them has to add `tabler.css` too. It needs it anyway, for the buttons, badges and icons inside them:
|
||||
|
||||
```diff
|
||||
- <link rel="stylesheet" href="/dist/css/tabler-marketing.min.css" />
|
||||
@@ -51,11 +53,53 @@ The [Pricing](/ui/components/pricing) component, `.pricing` and its `.pricing-*`
|
||||
+ <link rel="stylesheet" href="/dist/css/tabler-marketing.min.css" />
|
||||
```
|
||||
|
||||
The pricing card border also follows the theme now. In 1.6 it was a fixed light gray in dark mode; in 1.7 it uses `--tblr-border-color`.
|
||||
The pricing card border also follows the theme now. In 1.6 it was a fixed light gray, even in dark mode. In 1.7 it uses `--tblr-border-color`.
|
||||
|
||||
## Visual changes
|
||||
|
||||
Nothing in this section needs a change to your markup. The components below are just drawn a little differently in 1.7. If you have a custom style that sits next to one of them, or overrides one of its values, it may end up off by a pixel or two. Worth a quick look.
|
||||
|
||||
### Buttons
|
||||
|
||||
Filled buttons, so `.btn-primary` and the other `.btn-{color}` variants, have a thin border now, a faint top-to-bottom gradient and light inner edges. Outline buttons lose their shadow. The default `.btn` mixes its hover and active tint over `--tblr-bg-surface`, which keeps it opaque. In 1.6 it turned slightly see-through when it was sitting on a colored background.
|
||||
|
||||
`.btn-xl` uses a `1.25rem` font with `1.75rem` icons and the large radius. In 1.6 it used the `h1` size and `2rem` icons, which was a bit much. `.btn-sm` has `0.75rem` of side padding instead of `0.5rem`.
|
||||
|
||||
### Small controls are 32px tall
|
||||
|
||||
`.form-control-sm`, `.form-select-sm`, `.btn-sm` and a small Tom Select are all `32px` tall now. In 1.6 the small input was `28px`, and the small select and the small Tom Select didn't match it anyway. The vertical padding of the small size, `$input-btn-padding-y-sm`, went from `0.3125rem` to `0.4375rem`. That's what makes the three line up in a toolbar. The large sizes didn't change.
|
||||
|
||||
### Switch
|
||||
|
||||
`.form-switch` has a filled gray track when it's off, with a white knob and an even gap around it. In 1.6 the off track was just an outline. The track color comes from the new `$form-switch-bg` variable. `$form-switch-color` is the knob, and it's plain white in both color modes now.
|
||||
|
||||
### Flags
|
||||
|
||||
The flags plugin ships the [Tabler Flags](https://github.com/tabler/tabler-flags) set now. That's 304 flags at a 5:4 ratio instead of 4:3, so a flag is a little narrower for the same height. Six flags got a new code. The old classes keep working as [aliases](/ui/plugins/flags#old-flag-codes), but they go away in 2.0.
|
||||
|
||||
### Dark mode
|
||||
|
||||
A round of contrast fixes changed a few surfaces on a dark page:
|
||||
|
||||
- `--tblr-bg-surface-tertiary` is translucent, so card headers, card footers and striped table rows show on a dark card.
|
||||
- `.input-group-text` has the `--tblr-secondary-color` text color and a translucent background.
|
||||
- Card, alert, dropdown and table borders aren't too bright any more. `$border-color-translucent-dark` was applied to more elements than it should have been.
|
||||
- Nav links, list group headers, toast headers, breadcrumbs, the footer, `.form-control-light` and `.form-help` no longer use fixed grays.
|
||||
|
||||
### Smaller changes
|
||||
|
||||
- `.card-table` rounds only the cells in the four card corners. In 1.6 every row rounded its outer cells.
|
||||
- `.nav-segmented` icons follow the link color on hover, like the text.
|
||||
- Disabled Tom Select fields have rounded corners, and small and large ones a rounded focus ring.
|
||||
- The `.pricing` card border follows the theme, with `--tblr-border-color` instead of a fixed light gray in dark mode.
|
||||
|
||||
## JavaScript
|
||||
|
||||
`tabler.js` is compiled for ES2022 instead of ES2015. Every [supported browser](/ui/getting-started/browser-support) has run ES2022 for years, so for a normal page nothing changes. It only matters if you run `tabler.js` through your own transpiler with an older target. In that case, either drop the override or let the transpiler lower the syntax for you.
|
||||
|
||||
## Sass changes
|
||||
|
||||
Only relevant if you compile the `scss/` sources yourself and import partials one by one. `@use '@tabler/core/scss/tabler'` and `@use '@tabler/core/scss/tabler-marketing'` keep working.
|
||||
This only matters if you compile the `scss/` sources yourself and import partials one by one. `@use '@tabler/core/scss/tabler'` and `@use '@tabler/core/scss/tabler-marketing'` keep working as they are.
|
||||
|
||||
### Moved partials
|
||||
|
||||
@@ -75,7 +119,24 @@ Partial in 1.6|Partial in 1.7
|
||||
|
||||
Besides the changes above, 1.7 adds:
|
||||
|
||||
- [Pricing](/ui/components/pricing) as a documented core component, with a class reference.
|
||||
- [Shape](/ui/components/shape), a rounded container for an icon in several sizes and every theme color, with its CSS variables documented.
|
||||
- [Map](/ui/components/map), an interactive map on MapLibre GL JS with markers, popups, routes, areas and a globe, from plain HTML with `data-bs-toggle="map"`. It ships as the `tabler-map.js` add-on.
|
||||
- [Vector map](/ui/plugins/vector-map), a world map as inline SVG with a value per country, markers, lines and a legend, in `tabler-vector-map.js`.
|
||||
- [Nav overflow](/ui/components/nav-overflow), a `.nav` that moves the items that don't fit into a More dropdown.
|
||||
- [Number input](/ui/forms/number-input), a quantity field with decrease and increase buttons, bounds, hold-to-repeat and keyboard support.
|
||||
- [Hover gallery](/ui/components/hover-gallery), several images in the space of one, switched by the pointer position.
|
||||
- [Image label](/ui/components/image-label), a short text or an icon pinned to a corner of an image.
|
||||
- [Mockup browser](/ui/components/mockup-browser), a browser window frame for a screenshot or a page preview.
|
||||
- [Icon list](/ui/components/icon-list), a list with icons instead of bullets.
|
||||
- [Text shimmer](/ui/components/text-shimmer), a band of light sweeping across a label while something runs.
|
||||
- [List group](/ui/components/list-group) items with media, content, meta and actions slots, selectable and nested items, and `.list-group-sm` and `.list-group-lg` sizes.
|
||||
- [Keyboard keys](/ui/base/typography#keyboard-input), with `<kbd>` as a compact key cap, `.kbd-group` for a shortcut and `--tblr-kbd-*` variables.
|
||||
- [Datagrid](/ui/components/datagrid) with `.datagrid-horizontal` and `.datagrid-cols-{n}`.
|
||||
- [Datepicker](/ui/plugins/date-picker) with `weekNumbers`, `dateFormat` patterns such as `'DD.MM.YYYY'` or `'iso'`, and `boundInput` for ISO form values.
|
||||
- [Form CSS variables](/ui/forms/css-variables), with `--tblr-control-*` on inputs and selects, and their own sets for checks, switches, input group add-ons, floating labels and range inputs.
|
||||
- [Fill colors](/ui/base/colors#fill-colors), four neutral `--tblr-fill-*` tokens and the `.bg-fill-*` utilities behind badges, avatars, code and progress tracks.
|
||||
- A `mist` gray palette for `data-bs-theme-base`, see [Theme base colors](/ui/plugins/theme-base-colors).
|
||||
- `data-bs-navbar-position="combined"` to show the vertical and the horizontal navbar at once, see [Page layouts](/ui/layout/page-layouts#navigation-position).
|
||||
- [Pricing](/ui/components/pricing) and [Shape](/ui/components/shape) as documented core components, each with a class reference.
|
||||
- An [Icon design guide](/icons/design-guide) in the Tabler Icons docs.
|
||||
|
||||
See the [changelog](https://github.com/tabler/tabler/releases) for the full list.
|
||||
@@ -470,10 +470,11 @@ Without the attribute, add the `offcanvas-floating` class to a single panel.
|
||||
|
||||
### Navigation position
|
||||
|
||||
`data-bs-navbar-position` picks which navigation the page shows:
|
||||
`data-bs-navbar-position` picks which navigation the page shows. `horizontal` is the default, `vertical` shows the sidebar instead, and `combined` shows both at once:
|
||||
|
||||
```html
|
||||
<html data-bs-navbar-position="vertical">
|
||||
<html data-bs-navbar-position="combined">
|
||||
```
|
||||
|
||||
This one needs the markup to cooperate. Render **both** navigations as direct children of `.page`, the vertical `aside` first:
|
||||
@@ -486,7 +487,7 @@ This one needs the markup to cooperate. Render **both** navigations as direct ch
|
||||
</div>
|
||||
```
|
||||
|
||||
The CSS then shows one and hides the other, and removes the sidebar's width from the page offset when the sidebar is hidden. Both rules only fire when the other navigation really is on the page, so a page with a single navbar keeps it whatever the stored value says. That is what makes the layout safe to switch at runtime: no stored choice can leave a visitor with no navigation.
|
||||
The CSS then shows one and hides the other, and removes the sidebar's width from the page offset when the sidebar is hidden. `combined` opts out of both rules, so the sidebar and the top navbar stay on screen together, the way a page with both navbars rendered before 1.5. Both rules only fire when the other navigation really is on the page, so a page with a single navbar keeps it whatever the stored value says. That is what makes the layout safe to switch at runtime: no stored choice can leave a visitor with no navigation.
|
||||
|
||||
The demo pages use this: every page renders both navigations, and the layout demos state their own variant with the attribute.
|
||||
|
||||
|
||||
@@ -40,7 +40,7 @@ Add the `flag` class to an element and a country class from the list below.
|
||||
|
||||
The country class is `flag-country-` followed by the two-letter ISO code, for example `.flag-country-ad` for Andorra. Flags of organisations and other flags without an ISO code use a slug instead, for example `.flag-country-african-union`. The full list is at the end of this page.
|
||||
|
||||
The flags come from [Tabler Flags](https://github.com/tabler/tabler-flags), which also ships them as SVG and PNG files and as React, Vue, Preact and Astro components.
|
||||
The flags come from [Tabler Flags](https://github.com/tabler/tabler-flags), which also ships them as SVG and PNG files and as React, Vue, Preact and Astro components. Every flag is drawn at a 5:4 ratio, so a row of flags lines up whatever the countries are.
|
||||
|
||||
<Example centered>
|
||||
<span class="flag flag-country-tg"></span>
|
||||
@@ -50,16 +50,31 @@ The flags come from [Tabler Flags](https://github.com/tabler/tabler-flags), whic
|
||||
|
||||
## Flag sizes
|
||||
|
||||
Add a size class from `flag-xs` to `flag-xl` to scale the flag. The names follow the usual Bootstrap pattern.
|
||||
Add a size class from `flag-xxs` to `flag-2xl` to scale the flag. The sizes are the same as the [avatar](/ui/components/avatar) sizes, so a flag and an avatar in one list line up.
|
||||
|
||||
<Example centered>
|
||||
<span class="flag flag-2xl flag-country-us"></span>
|
||||
<span class="flag flag-xl flag-country-us"></span>
|
||||
<span class="flag flag-lg flag-country-us"></span>
|
||||
<span class="flag flag-md flag-country-us"></span>
|
||||
<span class="flag flag-sm flag-country-us"></span>
|
||||
<span class="flag flag-xs flag-country-us"></span>
|
||||
<span class="flag flag-xxs flag-country-us"></span>
|
||||
</Example>
|
||||
|
||||
## Old flag codes
|
||||
|
||||
A few flags changed their code in Tabler 1.7, when the plugin moved to the Tabler Flags set. The old classes keep working as aliases, so nothing breaks, but they are deprecated and will be removed in 2.0. Switch to the new code when you touch the markup:
|
||||
|
||||
Old class|New class
|
||||
---|---
|
||||
`.flag-country-afrun`|`.flag-country-african-union`
|
||||
`.flag-country-bq-bo`|`.flag-country-bq1`
|
||||
`.flag-country-bq-sa`|`.flag-country-bq2`
|
||||
`.flag-country-bq-se`|`.flag-country-bq3`
|
||||
`.flag-country-kn-sk`|`.flag-country-kn`
|
||||
`.flag-country-unasur`|`.flag-country-south-american-union`
|
||||
|
||||
## Flags list
|
||||
|
||||
All available flags, grouped by category:
|
||||
|
||||
@@ -306,6 +306,10 @@
|
||||
"title": "Segmented control",
|
||||
"url": "/ui/components/segmented-control"
|
||||
},
|
||||
{
|
||||
"title": "Shape",
|
||||
"url": "/ui/components/shape"
|
||||
},
|
||||
{
|
||||
"title": "Signal",
|
||||
"url": "/ui/components/signal"
|
||||
|
||||
Reference in new issue
Block a user