Row, column

If you need a one dimensional layout, you can use row or column container. Both use grid component.

Example

Below is an example of using row layout, a-ar-row. The column layout differs in direction (it is vertical) and it has tag name a-ar-column, props are the same.

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

<a-ar-row width="3" position="0 1.5 -3">
    <a-box color="#018A6C"></a-box>
    <a-box color="#00C170"></a-box>
    <a-box color="#03FCC6"></a-box>
</a-ar-row>

Props

Property	Type	Default	Description
visible	boolean	true	Shows or hides the container.
width	number	1	Container's width.
height	number	1	Container's height.
position	number[]	0 0 0	Sets container position.
spacing	number	0	Sets spacing between items.
opacity	number	1	Sets container's opacity.