Tabs

import { AXTabsModule } from '@acorex/components/tabs';

Tabs component allows users to switch between different sections of content within the same container, organized under labeled tabs. It helps streamline the interface by grouping related information, making it easy to navigate without leaving the current page or view.

Overview

In this section, you can test different options of this component and see the output in real time

My Account

+12

Company

Team Members

Billing

Look

With-line

Location

Bottom

Fit Parent

Disabled

Usage

A simple example of using ax-tabs

Preview

Code

Decoration

Description of AXTabsComponent's feature.

Preview

Code

Custom Template

Description of AXTabsComponent's feature.

Preview

Code

Tab with Content

Description of AXTabsComponent's feature.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-tabs-font-weight	500	Font weight of the tab labels.
--ax-comp-tabs-font-size	0.875rem	Font size of the tab labels.
--ax-comp-tabs-line-height	1.25rem	Line height of the tab labels.
--ax-comp-tabs-text-color	var(--ax-sys-color-on-lightest-surface)	Text color of the tab labels. Inherits from the parent element by default.
--ax-comp-tabs-bg-color	var(--ax-sys-color-lightest-surface)	Background color of the tabs. Inherits from the parent element by default.
--ax-comp-tabs-hover-text-color	var(--ax-sys-color-on-surface)	Text color of the tab labels on hover. Inherits from the parent element by default.
--ax-comp-tabs-hover-bg-color	var(--ax-sys-color-surface)	Background color of the tabs on hover. Inherits from the parent element by default.
--ax-comp-tabs-active-text-color	var(--ax-sys-color-on-surface)	Text color of the active tab label. Inherits from the parent element by default.
--ax-comp-tabs-active-bg-color	var(--ax-sys-color-surface)	Background color of the active tab. Inherits from the parent element by default.
--ax-comp-tabs-disabled-opacity	0.5	Opacity of disabled tabs.
--ax-comp-tabs-default-border-radius	var(--ax-sys-border-radius)	Default border radius of the tabs. Defaults to the system's border radius.
--ax-comp-tabs-border-width	1px	Border width of the tabs in classic look.
--ax-comp-tabs-border-color	var(--ax-sys-color-border-lightest-surface)	Border color of the tabs in classic look. Defaults to the system's border color.
--ax-comp-tabs-indicator-size	2px	Size (thickness) of the tab indicator in the with-line and with-line-color looks.
--ax-comp-tabs-indicator-color	var(--ax-sys-color-primary-surface)	Color of the tab indicator in the with-line and with-line-color looks. Uses the primary color at its 500 shade.