Tabs

The tabs component is an interactive UI element that allows users to switch between multiple pieces of content within the same space. Each tab acts as a trigger that reveals its associated content while hiding the others, helping organize information in a clear and structured way.

Examples

Basic Tabs

The first example demonstrates a simple usage of the tabs component. Each tab is linked to a separate content entity containing an image. The component uses default dimensions, styling, and built-in navigation, making it ideal for quick setups or simple image galleries in AR scenes.

import "spatial-design-system/primitives/ar-tabs.js";

<a-entity id="tab-content-1" position="0 1.4 -1" visible="false">
    <a-image src="/first-slide.jpg" width="1.25" height="0.8"></a-image>
</a-entity>
<a-entity id="tab-content-2" position="0 1.4 -1" visible="false">
    <a-image src="/second-slide.jpg" width="1.25" height="0.8"></a-image>
</a-entity>
<a-entity id="tab-content-3" position="0 1.4 -1" visible="false">
    <a-image src="/third-slide.jpg" width="1.25" height="0.8"></a-image>
</a-entity>
<a-ar-tabs
    position="0 2 -1"
    tabitems='[
        {"label": "First", "content": "#tab-content-1"},
        {"label": "Second", "content": "#tab-content-2"},
        {"label": "Third", "content": "#tab-content-3"}
    ]'
></a-ar-tabs>

Custom Content

The second example showcases how the tabs component can be used with fully custom 3D content instead of images. Each tab displays a different 3D primitive (sphere, box, cylinder), demonstrating flexibility in content rendering.

import "spatial-design-system/primitives/ar-tabs.js";

    <!-- Tabs Content -->
    <a-entity id="tab-content-4" position="0 1.2 -1" visible="false">
        <a-sphere color="#6bec6f" position="0 0 -2" radius="0.8"></a-sphere>
    </a-entity>
    <a-entity id="tab-content-5" position="0 1.2 -1" visible="false">
        <a-box color="#f3ff4c" position="0 0 -2" rotation="0 45 0"></a-box>
    </a-entity>
    <a-entity id="tab-content-6" position="0 1.2 -1" visible="false">
        <a-cylinder color="#56a8eb" position="0 0 -2" radius="0.5" height="1" rotation="30 0 0"></a-cylinder>
    </a-entity>

    <a-ar-tabs
        position="0 1.9 -1"
        tabitems='[
            {"label": "Sphere", "content": "#tab-content-4"},
            {"label": "Cube", "content": "#tab-content-5"},
            {"label": "Cylinder", "content": "#tab-content-6"}
        ]'
        activecolor="#03FCC6"
    ></a-ar-tabs>

Props

Property	Type	Default	Description
visible	boolean	true	Determines whether the tabs component is visible in the scene.
position	number[]	0 0 0	Defines the 3D position of the tabs in the format [x, y, z].
opacity	number	1	Defines the transparency of the entire tabs component (0 = fully transparent, 1 = fully visible).
size	enum (small, medium, large, extra-large)	medium	Adjusts the overall size of the tabs component.
color	string (blue, #fff)	#ECECEC	Sets the default background or inactive tab color.
activecolor	string	#00BA92	Defines the color of the currently active tab, helping users identify the selected state.
mode	string (light, dark)	""	Controls the visual theme of the component, supporting either a light or dark mode.
tabitems	array ([{ "label": "Label", "content": "#content" }])	[]	Defines the tabs. Each item includes a label (tab title) and content (selector referencing the content entity to display).

Events

The tabs component emits the following event when the active tab changes:

Event	Parameters	Description
tab-changed	{ value: object }	Emitted whenever a different tab is selected. Returns the active tab item (with its label and content).

Note

You can listen to the tab-changed event to react whenever the user switches tabs.

el.addEventListener("tab-changed", (event) => {
  console.log(event.detail.value);
});