Aframe-material-snickell NPM

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. 👌

npm.io

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();
})