aframe Components A-Frame's component schema property types
Example
Property types primarily define how the schema parses incoming data from the
DOM for each property. The parsed data will then be available via the data
property on the component's prototype. Below are A-Frame's built-in property
types:
| Property Type | Description | Default Value |
|---|---|---|
| array | Parses comma-separated values to array (i.e., "1, 2, 3" to ['1', '2', '3']). | [] |
| asset | For URLs pointing to general assets. Can parse URL out of a string in the form of url(<url>). If the value is an element ID selector (e.g., #texture), this property type will call getElementById and getAttribute('src') to return a URL. The asset property type may or may not change to handle XHRs or return MediaElements directly (e.g., <img> elements). | '' |
| audio | Same parsing as the asset property type. Will possibly be used by the A-Frame Inspector to present audio assets. | '' |
| boolean | Parses string to boolean (i.e., "false" to false, everything else truthy). | false |
| color | Currently doesn't do any parsing. Primarily used by the A-Frame Inspector to present a color picker. Also, it is required to use color type for color animations to work. | #FFF |
| int | Calls parseInt (e.g., "124.5" to 124). | 0 |
| map | Same parsing as the asset property type. Will possibly be used bt the A-Frame Inspector to present texture assets. | '' |
| model | Same parsing as the asset property type. Will possibly be used bt the A-Frame Inspector to present model assets. | '' |
| number | Calls parseFloat (e.g., '124.5' to '124.5'). | 0 |
| selector | Calls querySelector (e.g., "#box" to <a-entity id="box">). | null |
| selectorAll | Calls querySelectorAll and converts NodeList to Array (e.g., ".boxes" to [<a-entity class="boxes", ...]), | null |
| string | Doesn't do any parsing. | '' |
| vec2 | Parses two numbers into an {x, y} object (e.g., 1 -2 to {x: 1, y: -2}. | {x: 0, y: 0} |
| vec3 | Parses three numbers into an {x, y, z} object (e.g., 1 -2 3 to {x: 1, y: -2, z: 3}. | {x: 0, y: 0, z: 0} |
| vec4 | Parses four numbers into an {x, y, z, w} object (e.g., 1 -2 3 -4.5 to {x: 1, y: -2, z: 3, w: -4.5}. | {x: 0, y: 0, z: 0, w: 0} |
The schema will try to infer a property type given only a default value:
schema: {default: 10} // type: "number"
schema: {default: "foo"} // type: "string"
schema: {default: [1, 2, 3]} // type: "array"
The schema will set a default value if not provided, given the property type:
schema: {type: 'number'} // default: 0
schema: {type: 'string'} // default: ''
schema: {type: 'vec3'} // default: {x: 0, y: 0, z: 0}
We can also define our own property type or parser by providing a parse
function in place of a type:
schema: {
// Parse slash-delimited string to an array
// (e.g., `foo="myProperty: a/b"` to `['a', 'b']`).
myProperty: {
default: [],
parse: function (value) {
return value.split('/');
}
}
}
