## aframe-layout-component
Layout component for [A-Frame](https://aframe.io).
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
```
### Properties
| 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` |
### Usage
#### Browser Installation
Install and use by directly including the [browser files](dist):
```html
My A-Frame Scene
```
#### NPM Installation
Install via NPM:
```bash
npm install aframe-layout-component
```
Then register and use.
```js
require('aframe');
require('aframe-layout-component');
```