5.0 KiB
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
autoand 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 todata-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 guide, with a before and after example for each one.