mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
70 lines
5.0 KiB
Markdown
70 lines
5.0 KiB
Markdown
<picture>
|
|
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.5.0-cover-dark.png">
|
|
<img alt="Tabler 1.5" src="https://raw.githubusercontent.com/tabler/tabler/dev/.github/release-notes/1.5.0-cover.png">
|
|
</picture>
|
|
|
|
Tabler 1.5 is out. It's the biggest release we've done, with more than 250 changes across the framework, the demo pages and the docs. The sidebar folds now. Cards can have gradients, backgrounds can have patterns, charts got seven new types, and the demo comes with two new dashboards. Bootstrap also moved into the Tabler source tree, and that's where a lot of the smaller changes in this release come from.
|
|
|
|
## Folded sidebar
|
|
|
|
|
|
|
|
The vertical sidebar can fold down to a narrow strip of icons with `navbar-folded`. With `navbar-folded-hover` it stays folded and opens when you hover over it. Submenus open as flyouts next to the icon, and there's a pin toggle if you want to keep the sidebar open.
|
|
|
|
Two smaller things came with it. Section titles in the sidebar (`nav-section-title`) turn into short separators while it's folded, so you don't lose the grouping. And there's a new `navbar-footer` zone for the user block at the bottom. The navigation scrolls between the pinned brand and the pinned footer.
|
|
|
|
The sidebar is also light and `16rem` wide by default now.
|
|
|
|
## Layout settings
|
|
|
|
|
|
|
|
The theme panel does more than light and dark now. It also switches the layout, through four attributes you can set on `<html>` yourself: `data-bs-layout` for the container width (`default`, `fluid`, `boxed`), `data-bs-navbar-position` for whether the page shows the vertical or the horizontal navigation, `data-bs-navbar` for a sticky top bar, and `data-bs-navbar-theme` for coloring the navigation `dark` or `primary`. The folded sidebar has its own `data-bs-sidebar`.
|
|
|
|
The panel itself was redesigned around them, with an illustrated intro, color scheme presets and thumbnail tiles for most settings. A Customize entry in the sidebar footer and in the navbar opens it.
|
|
|
|
## Gradient cards
|
|
|
|
|
|
|
|
`.card-gradient` gives a card a gradient background. There are variants for each theme color, modifiers for the direction, and an animated version.
|
|
|
|
The gradient stops are plain utilities, so you can use them anywhere else too. `.bg-gradient-from-*`, `-via-*` and `-to-*` now also take `transparent` and `-inverted`.
|
|
|
|
There's a new Card gradients page in the demo with all the combinations.
|
|
|
|
## Background patterns
|
|
|
|
|
|
|
|
Backgrounds can have a pattern now. Dots, grids, stripes and a few more, through a set of `.bg-pattern-*` utilities.
|
|
|
|
You can also control how strong the pattern is. `--tblr-pattern-opacity-factor` scales the opacity globally, and `.bg-pattern-opacity-*` sets it per element.
|
|
|
|
## New chart types
|
|
|
|
|
|
|
|
Seven chart types joined the demo and the docs: radar, polar area, treemap, timeline, box plot, bubble and funnel. There's also a new Advanced charts page for the harder cases, with two y-axes, annotations, a zoom brush and synced chart groups.
|
|
|
|
Chart colors aren't hardcoded per chart any more. There's a `--tblr-chart-1` through `--tblr-chart-5` palette wired into the ApexCharts theme tokens, so charts generally follow the current color mode on their own. ApexCharts itself went from 3.54.1 to 7.0.0.
|
|
|
|
## New dashboard pages
|
|
|
|
Two dashboards joined the demo. One is a CRM dashboard built from reusable cards, the other a crypto dashboard with a portfolio overview, market data and order history.
|
|
|
|
There's also an onboarding page, a task list and a pay page, plus four new modals: change password, confirm delete, edit profile and new task.
|
|
|
|
## Upgrading
|
|
|
|
Bootstrap 5.3.8 now lives in the Tabler source tree as Sass modules and TypeScript components, so Tabler doesn't depend on the Bootstrap package any more. A few other things changed along the way:
|
|
|
|
- The npm package ships TypeScript declarations, so `import { Modal } from "@tabler/core"` is typed.
|
|
- The default color mode is `auto` and follows the system setting.
|
|
- Tabler doesn't bundle a web font any more. The default stack is the system one, so nothing gets downloaded.
|
|
- Components accept `data-tblr-*` attributes next to `data-bs-*`.
|
|
- The supported browsers are now Chrome 123, Firefox 128 and Safari 17.5, which is what the CSS actually needs.
|
|
- The Turbo integration is gone, along with a number of unused Sass variables.
|
|
|
|
Every breaking change is in the [Upgrade to 1.5](https://docs.tabler.io/ui/getting-started/upgrade/) guide, with a before and after example for each one.
|