Easily create accessible, fully customizable tab interfaces.
Tabs are built using the
x-tab:group,
x-tab, and
x-tab:panel components. By
default, no tab is selected, and clicking on any tab or
selecting it with the keyboard will activate the corresponding
panel.
<div x-tab:group>
<nav>
<button x-tab x-nui:target="1">1</button>
<button x-tab x-nui:target="2">2</button>
</nav>
<div>
<div x-tab:panel x-nui:id="1">
Content 1
</div>
<div x-tab:panel x-nui:id="1">
Content 2
</div>
</div>
</div>
Options can be passed as a block or individually using the
x-nui
directive.
Be sure to change the case type of the option name from "camelCase" to "kebab-case" when passing the options individually.
In block
<div x-nui="{expose:'data'}"></div>Individually
<div x-nui:expose="data"></div>| name | type | default | description |
|---|---|---|---|
expose
|
null,string |
null
|
Exposes the component api.
Receives the name of the variable where the component
api will be exposed.
|
Note: only applicable individually
| name | type | default | description |
|---|---|---|---|
target
|
string |
|
Is the id (only valid within the
component) of the target panel. If not set, the element
immediately after the one specified in its parent's
child list nextElementSibling will
be taken.
|
Note: only applicable individually
| name | type | default | description |
|---|---|---|---|
id
|
string |
|
Is a unique identifier within the component associated with toggle |
open
|
string |
|
When present, it specifies that the panel should be visible (open) to the user. |
The component API is an
object
that contains the following properties:
| name | type | description |
|---|---|---|
main
|
element |
Element where it is found: x-tab
|
active
|
null,element | Currently open panel element |
items
|
object[] |
Elements of toggles and panels associated like this:
{button:element,panel:element}
|
CSS classes that are added to describe a state.
| name | description |
|---|---|
show
|
Set to x-tab and
x-tab:panel when is visible.
|