aframe-layout-component

aframe-layout-component

Layout component for A-Frame.

!Layout

Automatically positions child entities in 3D space, with several layouts to
choose from. Define the layout on the parent entity:

``html





`

And then the positions will automatically be calculated and set:

`html





`

As entities are added or removed, the layout component will trigger a reflow on
the positions.

We move then entire group around while maintaining the layout:

`html





`

$3

| Property | Description | Default Value |
|----------------|-----------------------------------------------------------------------------------------------------|---------------|
| type | Type of layout. Can be one of box, circle, cube, dodecahedron, line, pyramid. | line |
| columns | Number of columns (for type box). | 1 |
| margin | Margin in meters (for type box, line). | 1 |
| marginColumn | Margin in meters just for the columns (for type box). Defaults to margin value. | 1 |
| marginRow | Margin in meters just for the rows (for type box). Defaults to margin value. | 1 |
| orderAttribute | Attribute name used to explicitly order the children versus relying on inherent DOM order. | '' |
| plane | Which plane direction for 2D layout. Can be xy, yz, or xz (for type box, circle, line) | xy |
| radius | Radius in meters (for type circle, cube, dodecahedron, pyramid. | 1 |
| reverse | Whether to reverse direction of layout. | false |
| angle | For type circle, set this to position items angle degrees apart | false |
| align | Alignment of the center of layout (for type box, line). Can be one of start, center, end. | start |

$3

#### Browser Installation

Install and use by directly including the browser files:

`html




















`

#### NPM Installation

Install via NPM:

`bash
npm install aframe-layout-component
`

Then register and use.

`js
require('aframe');
require('aframe-layout-component');
``