Tabs Reference
Collaborate with us
Edit this page on GitHub
Layout and classes
CSS selectors
Element | CSS Class | Description |
---|---|---|
Active Header | .tabs-header-item.active | It's active header (represented as the one with a colored underline) |
Active Tab | .tabs-content-item.active | It's active content |
Advanced
Here are some more advanced use-cases of the widget.
Change the active header style
Write the following CSS in the CSS editor and change the yourcolor
value:
.tabs-header-item.active { border-bottom: var( --border-size-m) solid yourcolor; }
Or using CSS variables: var(--color-yourcolor)
Example:
.tabs-header-item.active { background: border-bottom: var( --border-size-m) solid var(--color-red) }
Add a background color to the tabs
- Enclose the tabs with a container.
- Add the classes
background-blue-lighter text-neutral-0
, this adds a light blue background and force the text to be white. - Publish the application.