A-Frame Material Kit ๐ฝ
This is real! WebVR is getting even better!
Inputs, keyboard, buttons, checkboxes, radio buttons, switches, forms, toasts and more - following the Google Material design guideline for A-Frame.
It is perfect for room-scale webVR apps.
Demo
๐ ๐ Live demo ๐ ๐ ๐
Looks surreal if you have a headset! :)
Getting Started
Here is the code from the demo. That is it. Pure html!
<a-entity laser-controls="hand: right"></a-entity>
<!-- BEGIN INPUTS/KEYBOARD -->
<a-keyboard></a-keyboard>
<a-input position="-0.7 1 -2.5" placeholder="Username" color="black" width="1"></a-input>
<a-input position="-0.7 0.8 -2.5" type="password" placeholder="Password" color="black" width="1"></a-input>
<!-- END INPUTS/KEYBOARD -->
<!-- BEGIN FORM -->
<a-rounded position="0.5 0.5 -2.5" width="4" height="3.1" radius="0.05" rotation="0 -20 0" scale="0.3 0.3 0.3">
<a-form>
<a-switch position="0.2 2.7 0" enabled="true"></a-switch>
<a-radio position="0.2 2.4 0" width="3" name="food" label="Burger with fries and pizza" value="pizza"></a-radio>
<a-radio position="0.2 2.1 0" width="3" name="food" label="Veggies" checked="true" disabled="true"></a-radio>
<a-radio position="0.2 1.8 0" width="3" name="food" label="Ice cream"></a-radio>
<a-checkbox position="0.2 1.5 0" width="3" name="stuff" label="I am a checkbox" checked="true"></a-checkbox>
<a-checkbox position="0.2 1.2 0" width="3" name="stuff" label="And I am another one" checked="true" disabled="true"></a-checkbox>
<a-button position="0.2 0.8 0" name="stuff" value="Click me" type="raised"></a-button>
<a-button position="0.2 0.35 0" width="3" name="stuff" value="You cannot click me" disabled="true"></a-button>
</a-form>
</a-rounded>
<!-- END FORM -->
<!-- BEGIN TOAST -->
<a-toast message="This is a toast" action="Got it"></a-toast>
<!-- END TOAST -->๐ ๐ Install ๐ ๐
Option 1:
Download the boilerplate and follow the readme (super easy).
Option 2:
Since this kit is using assets (icons and sounds) you need to download the git project and copy the assets folder to the location of your choice and specify the path in the head of the html page.
<head>
<!--
... MORE HEAD STUFF ...
-->
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="./js/aframe-material.js"></script>
<script type="text/javascript">
AFRAME.ASSETS_PATH = "./assets";
</script>
</head>Documentation ๐
๐ ๐ a-keyboard โจ๏ธ ๐คค
Create a virtual keyboard that works with inputs out of the box.
<a-keyboard></a-keyboard>Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| is-open | Whether or not the keyboard should be open | boolean | false |
| physical-keyboard | Whether or not the physical keyboard should be respond to key press. (Great for debugging) | boolean | false |
Methods
| Name | Description |
|---|---|
| show() | Display the keyboard without any animations. |
| hide() | Hide the keyboard without any animations. |
| open() | Open the keyboard smoothly. |
| dismiss() | Close the keyboard smoothly. |
| destroy() | Remove the keyboard from the scene. |
Events
| Name | Description |
|---|---|
| didopen | Triggered when the keyboard did open. |
| diddismiss | Triggered when the keyboard did close. |
| input | Triggered when a key is pressed. |
| backspace | Triggered when the backspace key is pressed. |
| enter | Triggered when the enter is pressed. |
Custom example (just in case ๐ )
let keyboard = document.querySelector("a-keyboard");
keyboard.open();
keyboard.addEventListener('input', (e)=>{
str += e.detail;
console.log(str);
});
keyboard.addEventListener('enter', (e)=>{
console.log("Enter key pressed!")
})
keyboard.addEventListener('dismiss', (e)=>{
console.log("Dismiss: ", e);
keyboard.dismiss();
});
keyboard.addEventListener('backspace', (e)=>{
str = str.slice(0, -1);
console.log(str);
});๐ ๐ a-input
Create a single line text input that work with the <a-keyboard>.
<a-input position="-1.25 2.1 -5" placeholder="Username" color="black" scale="2 2 2" width="1"></a-input>Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| value | Value of the field. | string | "" |
| name | Name of the field. | string | "" |
| disabled | Whether or not the input should be disabled. | boolean | false |
| color | Text color. | color | "#000" |
| font | Text font | string. | "default" |
| opacity | Input opacity. | number | 1 |
| placeholder | Value of the placeholder. | string | "" |
| placeholder-color | Text color of the placeholder. | color | "#AAA" |
| max-length | Limit the number of characters. | int | 0 (Infinite) |
| type | Can be either "text" or "password". | string | "text" |
| width | Width of the input. | number | 1 |
| cursor-width | Width of the cursor. | number | 0.01 |
| cursor-height | Height of the cursor. | number | 0.08 |
| cursor-color | Color of the cursor. | color | "#007AFF" |
| background-color | Color of the field. | color | "#FFF" |
| background-opacity | Opacity of the field background only. | number | 1 |
Methods
| Name | Description |
|---|---|
| focus() | Focus the input. |
| blur() | Blur the input. |
Events
| Name | Description |
|---|---|
| focus | Triggered when the input is focused. |
| blur | Triggered when the input is blurred. |
| change | Triggered when the value of the input changed. |
๐ ๐ a-button
Create a button (can be raised of flat).
<a-button position="0 0.8 2" value="Click me" type="raised"></a-button>Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| value | Value of the button. | string | "Button" |
| name | Name of the button. | string | "" |
| disabled | Whether or not the button should be disabled. | boolean | false |
| type | Can be either "raised" or "flat". | string | "raised" |
| color | Text color. | color | "#FFF" |
| button-color | Color of the button. | color | "#4076fd" |
| font | Text font | string. | "default" |
| opacity | Input opacity. | number | 1 |
| width | Width of the input. | number | 1 |
Events
| Name | Description |
|---|---|
| change:width | Triggered when the width of the button changed. |
a-form
Create a form to get the same html <form> behaviors with <a-input>, <a-radio>, <a-button>, <a-switch>, <a-checkbox>.
<a-form></a-form>๐ ๐ a-radio
Create a radio button.
<a-radio position="0 0.8 2" width="3" name="food" label="Burger with fries and pizza" value="pizza"></a-radio>Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| checked | Whether or not the radio button should be checked. | boolean | false |
| value | Value of the radio button. | string | "" |
| name | Name of the radio button. | string | "" |
| disabled | Whether or not the button should be disabled. | boolean | false |
| label | Text following the radio button (totally optional). | string | "" |
| color | Text color of the label. | color | "#757575" |
| radio-button | Color of the radio button when unchecked. | color | "#757575" |
| radio-color-checked | Color of the radio button when checked. | color | "#4076fd" |
| font | Text font | string. | "default" |
| opacity | Input opacity. | number | 1 |
| width | Width of the input. | number | 1 |
Events
| Name | Description |
|---|---|
| change | Triggered when the value of the radio button changed. |
๐ ๐ a-checkbox
Create a checkbox.
<a-checkbox position="0 0.8 2" width="3" name="stuff" label="I am a checkbox" checked="true"></a-checkbox>Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| checked | Whether or not the checkbox should be checked. | boolean | false |
| value | Value of the checkbox. | string | "" |
| name | Name of the checkbox. | string | "" |
| disabled | Whether or not the checkbox should be disabled. | boolean | false |
| label | Text following the checkbox (totally optional). | string | "" |
| color | Text color of the label. | color | "#757575" |
| radio-button | Color of the checkbox when unchecked. | color | "#757575" |
| radio-color-checked | Color of the checkbox when checked. | color | "#4076fd" |
| font | Text font | string. | "default" |
| opacity | Input opacity. | number | 1 |
| width | Width of the input. | number | 1 |
Events
| Name | Description |
|---|---|
| change | Triggered when the value of the checkbox changed. |
๐ ๐ a-switch
Create a switch button that can be toggle on/off.
<a-switch position="0 0.8 2" enabled="true"></a-switch>Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| enabled | Whether or not the switch should be enabled. | boolean | false |
| name | Name of the checkbox. | string | "" |
| disabled | Whether or not the switch should be disabled. | boolean | false |
| fill-color | Color of the fill when off. | color | "#bababa" |
| knob-color | Color of the knob when off. | color | "#f5f5f5" |
| fill-color-enabled | Color of the fill when on. | color | "#80a8ff" |
| knob-color-enabled | Color of the knob when on. | color | "#4076fd" |
| fill-color-disabled | Color of the fill when disabled. | color | "#939393" |
| knob-color-disabled | Color of the knob when disabled. | color | "#a2a2a2" |
Events
| Name | Description |
|---|---|
| change | Triggered when the switch is toggled. |
๐ ๐ a-toast
Create a toast to alert the user of something.
<a-toast message="This is a toast" action="Got it"></a-toast>Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| message | Text shown by the toast. | string | "You are cool" |
| action | Text of the button (optional). | string | "" |
| color | Text color. | color | "#FFF" |
| background-color | Color of the toast. | color | "#4076fd" |
| font | Text font | string. | "default" |
| width | Width of the input. | number | 1 |
| duration | Duration of the toast | number | 2000 (2sec) |
| autoshow | Whether the toast should show right away. | boolean | true |
Events
| Name | Description |
|---|---|
| actionclick | Triggered when the action is clicked. |
Custom example (just in case ๐ )
let button = document.querySelector('a-button');
let toast = document.querySelector('a-toast');
toast.addEventListener('actionclick', ()=>{
toast.hide();
})
button.addEventListener('click', ()=> {
toast.show();
})๐ ๐ a-rounded
Create a rounded rectangle, useful to create beautiful interfaces
Change log
0.1.1
- Added
enterkeyboard event. - Added physical keyboard interaction using the
physical-keyboardproperty.
Want to make some changes to it?
Installation
First make sure you have Node installed.
On Mac OS X, it's recommended to use Homebrew to install Node + npm:
brew install node
To install the Node dependencies:
npm install
Local Development
To serve the site from a simple Node development server:
npm start
Then launch the site from your favorite browser:
License
Distributed under an MIT License.
Made by Etienne Pinchon (@etiennepinchon) - September 2017.