spatial-design-system v1.3.1

AR Design System

A set of reusable components and styles for AR and VR applications. Primary focus is on the web but general guidelines are applicable also to mobile technologies and goggles.

Publishing to npm (for repo owners only)

First update package version in package.json. If you're unsure, read about semantic versioning.

Recommended: before publishing, double-check the files in package.json that will be published to npm registries. For instance, these listed files will be part of package:

{
  "files": [
    "/components",
    "/primitives",
    "/utils",
    "/.gitignore"
  ],
}

You can test the package before publishing to registries.

If everything is correct, navigate to project root and publish (NOTE: you must be logged in npm account.):

npm publish

Primitives

Menu

Example with circle layout:

<a-ar-menu 
        visible="true" 
        color="blue"
        items="[{icon: '#dollar', title: 'Buy'}]"
        variant="filled"
        layout="circle"
></a-ar-menu>

Row, column

One dimensional layout elements. Both use list component.

Examples:

<a-ar-row>
  <a-box color="red"></a-box>
  <a-box color="blue"></a-box>
  <a-box color="yellow"></a-box>
</a-ar-row>

<a-ar-column>
    <a-box color="red"></a-box>
    <a-box color="blue"></a-box>
    <a-box color="yellow"></a-box>
</a-ar-column>

Button

A rectangle button with a text and an icon.

Example:

<a-ar-button
    primary="red"
    position="-1 1 -2"
    size="medium"
    content="Click me"
    prependicon="/public/home.png"
    textcolor="white"
    variant=""
></a-ar-button>

Switch

A rounded switch button with a value emit.

Example:

<a-ar-switch
    id="a-ar-switch-1"
    position="0.2 1 -2"
    size="medium"
    circlecolor="white"
    toggleoncolor="#4CAF50"
    toggleoffcolor="#FF5252"
    value="false"    
></a-ar-switch>

Checkbox

A squared checkbox with a value emit.

Example:

<a-ar-checkbox
    id="a-ar-checkbox-1"
    position="1 1 -2"
    size="medium"
    primary=""
    toggleoncolor=""
    bordercolor="#000000"
    checkmarkcolor="#000000"
    value="false"
></a-ar-checkbox>

Textbox

An input component activated when clicked on. Each textbox is using its own virtualKeyboard component to create a custom 3D keyboard.

Example:

<a-ar-textbox
    id="ar-textbox-1"
    position="2.4 1 -2"
    size="medium"
    bordercolor="black"
    textcolor="black"
    label="Name"
    isactivated="false"
></a-ar-textbox>

Components

Grid

Creates a classic two dimensional layout. Grid item's width can be increased, when item's width is explicitly set. It works as a grow factor.

Example:

<a-entity 
  geometry="primitive: plane; width: 2; height: 2;" 
  grid="rows: 2; columns: 2; spacing: 0.2;"
>
    <a-box color="red" width="2"></a-box>
    <a-box color="blue"></a-box>
    <a-box color="yellow"></a-box>
    <a-box color="green" width="2"></a-box>
</a-entity>

Circle

Creates a circle (pie) layout.

Example:

<a-entity circle>
  <a-entity material="color: blue">
    <a-entity text="value: Hello World;"></a-entity>
  </a-entity>
  <a-entity material="color: red"></a-entity>
  <a-entity material="color: yellow"></a-entity>
  <a-entity material="color: green"></a-entity>
</a-entity>

Children of circle must be plain entities because they are converted to parts of the circle.

List

Grid-based layout, creates a one dimensional layout - row or column.

Example:

<a-entity 
  list="direction: row; width: 3; height: 1;" 
>
    <a-box color="red"></a-box>
    <a-box color="blue"></a-box>
    <a-box color="yellow"></a-box>
</a-entity>

Auto Position

Aligns the element inside its parent node.

<a-plane 
  width="5" 
  height="5" 
  position="0 0 -5" 
  color="orange"
>
  <a-box color="green" auto-position></a-box>
</a-plane>

Auto Scale

Scales the element so it has always the appropriate size in the scene based on the distance between the camera.

<a-box color="red" auto-scale="factor: 0.8"></a-box>

Billboard

Creates the billboard effect so element's always watching towards camera (user).

<a-plane 
  color="black" 
  text="value: Hello, World!; width: 2; align: center;" 
  billboard 
  auto-scale
></a-plane>

Follow Camera

Element follows the user (camera) so it doesn't matter where the camera's located/watching, the element will be always in camera's FOV. Use controls to see the effect.

<a-sphere color="blue" follow-camera="angle: 20"></a-sphere>

Flexbox

Creates a one-dimensional layout, similar to CSS Flexbox.

<a-box
    color="#018A6C"
    position="0 1.6 -3"
    width="2"
    height="2"
    flexbox="
        direction: row; 
        padding: 0 0;
        hAlign: space-around;
        vAlign: center;
        wrap: false;
        gap: 0;
    "
>
  <a-plane color="#03FCC6"></a-plane>
  <a-plane color="#03FCC6"></a-plane>
  <a-plane color="#03FCC6"></a-plane>
  <a-plane color="#03FCC6"></a-plane>
</a-box>

Implementation notes:

• The container must be either a box or a plane.

• By default, items always fit within the width/height of the container unless the wrap property is set.

• Flexbox doesn't support properties like flex-grow, flex-shrink, flex-basis or flex.