Note: This documentation is for the old 0.2.0 version of A-Frame. Check out the documentation for the current 0.8.0 version
Mixins provide a way to compose and reuse commonly-used sets of component properties. They are defined using the
<a-mixin> element and are placed in
<a-assets>. Mixins should be set with an
id, and when an entity sets that
id as its
mixin attribute, the entity will absorb all of the mixin’s attributes.
The entity with
red cube will take the properties from the
red mixin and the
cube mixin in that order. Likewise with the
blue cube. Conceptually, the entities above expand to:
<a-entity material="color: red" geometry="primitive: box"></a-entity>
Properties of a multi-property component will merge if defined by multiple mixins and/or the entity. For example:
All of the geometry component properties will merge since they are included as mixins and defined on the entity. The entity would then be equivalent to:
<a-entity geometry="primitive: box; height: 10; depth: 2; width: 10"></a-entity>
When an entity includes multiple mixins that define the same component
properties, the right-most mixin takes precedence. In the example below, the
entity includes both
blue mixins, and since the
blue mixin is
included last, the final color of the cube will be blue.
If an entity itself defines a property that is already defined by a mixin, the entity’s definition takes precedence. In the example below, the entity includes both
blue mixins and also defines a green color. Since the entity directly defines its own color, the final color of the cube will be green.