5.3.0 • Published 5 years ago

aframe-layout-component v5.3.0

Weekly downloads
583
License
MIT
Repository
github
Last release
5 years ago

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:

<a-entity layout="type: line; margin: 2">
  <a-box></a-box>
  <a-box></a-box>
  <a-box></a-box>
</a-entity>

And then the positions will automatically be calculated and set:

<a-entity layout="type: line; margin: 2">
  <a-box position="0 0 0"></a-box>
  <a-box position="2 0 0"></a-box>
  <a-box position="4 0 0"></a-box>
</a-entity>

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:

<a-entity layout="type: line; margin: 2" position="0 5 -5">
  <a-box position="0 0 0"></a-box>
  <a-box position="2 0 0"></a-box>
  <a-box position="4 0 0"></a-box>
</a-entity>

Properties

PropertyDescriptionDefault Value
typeType of layout. Can be one of box, circle, cube, dodecahedron, line, pyramid.line
columnsNumber of columns (for type box).1
marginMargin in meters (for type box, line).1
marginColumnMargin in meters just for the columns (for type box). Defaults to margin value.1
marginRowMargin in meters just for the rows (for type box). Defaults to margin value.1
orderAttributeAttribute name used to explicitly order the children versus relying on inherent DOM order.''
planeWhich plane direction for 2D layout. Can be xy, yz, or xz (for type box, circle, line)xy
radiusRadius in meters (for type circle, cube, dodecahedron, pyramid.1
reverseWhether to reverse direction of layout.false
angleFor type circle, set this to position items angle degrees apartfalse
alignAlignment 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:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-layout-component@4.3.1/dist/aframe-layout-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity layout="type: circle; radius: 10">
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
    </a-entity>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm install aframe-layout-component

Then register and use.

require('aframe');
require('aframe-layout-component');
5.3.0

5 years ago

5.2.0

6 years ago

5.1.0

6 years ago

5.0.1

6 years ago

5.0.0

6 years ago

4.3.1

6 years ago

4.3.0

6 years ago

4.2.0

7 years ago

4.1.0

7 years ago

4.0.2

7 years ago

4.0.1

7 years ago

4.0.0

7 years ago

3.0.1

8 years ago

3.0.0

8 years ago

1.2.3

8 years ago

1.2.2

8 years ago

1.2.1

8 years ago

1.2.0

8 years ago

1.1.0

8 years ago