Tabs

import {Tab} from 'cx/widgets';

Tabs are commonly used to organize content into a single container. In Cx, tabs behave similarly to radio buttons. Tabs are selected on click and only one tab may be active at a time.

Tab 1 Tab 2 Tab 3 Tab 4

Tab 1

Tabs

<div style="margin:10px">
   <Tab tab="tab1" value-bind="$page.tab" default>Tab 1</Tab>
   <Tab tab="tab2" value-bind="$page.tab">Tab 2</Tab>
   <Tab tab="tab3" value-bind="$page.tab">Tab 3</Tab>
   <Tab tab="tab4" value-bind="$page.tab" disabled>Tab 4</Tab>
</div>
<div style="margin:10px">
   <Tab tab="tab1" value-bind="$page.tab" mod="line">Tab 1</Tab>
   <Tab tab="tab2" value-bind="$page.tab" mod="line">Tab 2</Tab>
   <Tab tab="tab3" value-bind="$page.tab" mod="line">Tab 3</Tab>
   <Tab tab="tab4" value-bind="$page.tab" mod="line" disabled>Tab 4</Tab>
</div>
<div style="margin:10px">
   <div style="padding-left:10px;white-space:nowrap;">
      <Tab tab="tab1" value-bind="$page.tab" mod="classic">Tab 1</Tab>
      <Tab tab="tab2" value-bind="$page.tab" mod="classic">Tab 2</Tab>
      <Tab tab="tab3" value-bind="$page.tab" mod="classic">Tab 3</Tab>
      <Tab tab="tab4" value-bind="$page.tab" mod="classic" disabled>Tab 4</Tab>
   </div>
   <div style="border: 1px solid lightgray; background: white; padding: 20px">
      <div visible-expr="{$page.tab}=='tab1'">Tab 1</div>
      <div visible-expr="{$page.tab}=='tab2'">Tab 2</div>
      <div visible-expr="{$page.tab}=='tab3'">Tab 3</div>
      <div visible-expr="{$page.tab}=='tab4'">Tab 4</div>
   </div>
</div>

Copied!Cx Fiddle

Configuration

Property	Description	Type
default	Set to `true` to set the default tab.	boolean
disabled	Set to `true` to disable selection.	string
tab	A value to be written to the `value` property if the tab is clicked.	string/number
value	Value of the currently selected tab. If `value` is equal to `tab`, the tab appears active.	string
autoFocus	Set to `true` to automatically focus the element when mounted.	boolean
baseClass	Base CSS class to be applied to the element. No class is applied by default.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
focusOnMouseDown	Determines if tab should receive focus on `mousedown` event. Default is `false`, which means that focus can be set only using the keyboard `Tab` key.	boolean
innerHtml html	HTML to be injected into the element.	string
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
tag	Name of the HTML element to be rendered. Default is `div`.	string
text innerText	Inner text contents.	string
tooltip	Tooltip configuration. For more info see Tooltips.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Tabs