UI/UX Components

Modules

cap-uix-switch ⇐ ui-switch

A toggle switch that allows the user to choose between two states, typically on or off. This primitive uses the ui-switch component.

cap-uix-layout ⇐ layout

A layout container that arranges its children in a specific layout, such as a box, circle, or grid. This primitive uses the layout component with default type box.

cap-uix-slider ⇐ ui-slider

A slider that allows the user to select a value from a range. This primitive uses the ui-slider component.

cap-uix-icon ⇐ troika-text

An icon that can be used to represent various actions or objects. This primitive uses the troika-text component with default settings for a close icon.

cap-uix-card ⇐ uix-card

A rectangular container with rounded corners, typically used to display content in a visually appealing way. This primitive uses the uix-card component.

cap-uix-text ⇐ troika-text

Displays text in 3D space. This primitive uses the troika-text component.

cap-uix-button ⇐ ui-btn

A clickable button that can be used to trigger actions or navigate to different parts of an experience. This primitive uses the ui-btn component and is styled with the rounded component.

cap-line ⇐ line2

Draws a line in 3D space. This primitive uses the line2 component.

cap-box-rounded ⇐ uix-box-rounded

A box with rounded corners. This primitive uses the uix-box-rounded component.

cap-trigger ⇐ geometry

A trigger component that can be used to detect interactions in a 3D space. This primitive uses the geometry, body, and trigger components.

cap-uix-switch ⇐ ui-switch

A toggle switch that allows the user to choose between two states, typically on or off. This primitive uses the ui-switch component.

Extends: ui-switch Properties

Name	Type	Description
value	boolean	Value of the switch.
disabled	boolean	Whether the switch is disabled.

Example

<cap-uix-switch value="true"></cap-uix-switch>

cap-uix-layout ⇐ layout

A layout container that arranges its children in a specific layout, such as a box, circle, or grid. This primitive uses the layout component with default type box.

Extends: layout Properties

Name	Type	Description
type	'box' | 'circle' | 'cube' | 'dodecahedron' | 'line' | 'pyramid' | string	Type of layout. (default: box)
radius	number	Radius of the layout.
angle	number	Angle of the layout.
columns	number	Number of columns in the layout.
margin-column	number	Margin between columns.
margin-row	number	Margin between rows.
order-attribute	string	Attribute to order elements.
plane	boolean	Whether the layout is planar.
reverse	boolean	Whether to reverse the layout.
fill	boolean	Whether to fill the layout.
align	string	Alignment of the layout.

Example

<cap-uix-layout type="circle" radius="1">
 <a-entity geometry="primitive: box"></a-entity>
 <a-entity geometry="primitive: sphere"></a-entity>
</cap-uix-layout>

cap-uix-slider ⇐ ui-slider

A slider that allows the user to select a value from a range. This primitive uses the ui-slider component.

Extends: ui-slider Properties

Name	Type	Description
value	number	Value of the slider.
disabled	boolean	Whether the slider is disabled.
width	number	Width of the slider.
height	number	Height of the slider.
rail-radius	number	Radius of the slider rail.
handle-radius	number	Radius of the slider handle.

Example

<cap-uix-slider value="0.5"></cap-uix-slider>

cap-uix-icon ⇐ troika-text

An icon that can be used to represent various actions or objects. This primitive uses the troika-text component with default settings for a close icon.

Extends: troika-text Properties

Name	Type	Description
icon	string	Icon value. (You can use all material-symbols-rounded Icon name from Google Font Icons)
color	string	Color of the icon.
size	number	Size of the icon.

Example

<cap-uix-icon icon="home" color="red"></cap-uix-icon>

cap-uix-card ⇐ uix-card

A rectangular container with rounded corners, typically used to display content in a visually appealing way. This primitive uses the uix-card component.

Extends: uix-card Properties

Name	Type	Description
height	number	Height of the card.
width	number	Width of the card.
color	string	Color of the card.
radius	number	Radius of the card corners.
opacity	number	Opacity of the card.
border-color	string	Color of the card border.
render-order	number	Render order of the card.
border-width	number	Width of the card border.
border-opacity	number	Opacity of the card border.

Example

<cap-uix-card width="1" height="1" color="red">
  <cap-uix-text value="Hello World!"></cap-uix-text>
</cap-uix-card>

cap-uix-text ⇐ troika-text

Displays text in 3D space. This primitive uses the troika-text component.

Extends: troika-text Properties

Name	Type	Description
align	string	Alignment of the text.
anchor	string	Anchor point of the text.
baseline	string	Baseline alignment of the text.
clip-rect	string	Clip rectangle of the text.
color	string	Color of the text.
depth-offset	number	Depth offset of the text.
font	string	Font of the text.
font-size	number	Font size of the text.
letter-spacing	number	Letter spacing of the text.
line-height	number	Line height of the text.
max-width	number	Maximum width of the text.
outline-color	string	Outline color of the text.
outline-width	number	Outline width of the text.
overflow-wrap	string	Overflow wrap of the text.
render-order	number	Render order of the text.
side	string	Side of the text.
tone-mapped	boolean	Whether the text is tone-mapped.
value	string	Value of the text.
white-space	string	White space handling of the text.
y-offset	number	Y offset of the text.
z-offset	number	Z offset of the text.

Example

<cap-uix-text value="Hello World!" color="red" font-size="0.5"></cap-uix-text>

cap-uix-button ⇐ ui-btn

A clickable button that can be used to trigger actions or navigate to different parts of an experience. This primitive uses the ui-btn component and is styled with the rounded component.

Extends: ui-btn Mixes: rounded Properties

Name	Type	Description
height	number	Height of the button.
width	number	Width of the button.
color	string	Color of the button.
radius	number	Radius of the button corners.
disabled	boolean	Whether the button is disabled.
tooltip-text	string	Tooltip Text.

Example

<cap-uix-button value="Click Me!" color="red" width="1" height="0.5"></cap-uix-button>

cap-line ⇐ line2

Draws a line in 3D space. This primitive uses the line2 component.

Extends: line2 Properties

Name	Type	Description
color	string	Color of the line.
width	number	Width of the line.
start	string	Starting point of the line.
end	string	Ending point of the line.

Example

<cap-line start="0 0 0" end="1 1 1" color="red" width="0.1"></cap-line>

cap-box-rounded ⇐ uix-box-rounded

A box with rounded corners. This primitive uses the uix-box-rounded component.

Extends: uix-box-rounded Properties

Name	Type	Description
depth	number	Depth of the box.
height	number	Height of the box.
width	number	Width of the box.
color	string	Color of the box.
transparent	boolean	Whether the box is transparent.
opacity	number	Opacity of the box.
radius	number	Radius of the box Border.

Example

<cap-box-rounded width="1" height="1" depth="1" color="red" radius="0.2"></cap-box-rounded>

cap-trigger ⇐ geometry

A trigger component that can be used to detect interactions in a 3D space. This primitive uses the geometry, body, and trigger components.

Extends: geometry, body, trigger Emits: collide - Event triggered when a collision occurs,event: regardless of local-trigger setting., beginCollide - Event triggered when a collision begins.event: Respects local-trigger setting., endCollide - Event triggered when a collision ends.event: Respects local-trigger setting. Properties

Name	Type	Description
geometry	Object	Geometry component settings.
geometry.primitive	string	The type of geometry primitive.
body	Object	Physics body component settings.
body.type	string	The type of physics body.
body.isTrigger	boolean	Whether the body is a trigger.
local-trigger	boolean	Only interactions from local Objects.
visible	boolean	For Debug show the Collider Geometry Mesh.

Example

<cap-trigger
  visible="false"
  local-trigger="true"
   ‌@beginCollide=${(e) => {
    console.info(e.target)
  }}
   ‌@endCollide=${(e) => {
    console.info(e.target)
  }}
  geometry="primitive:box;width:8;height:8;depth:8;">
</cap-trigger>