Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/etiennepinchon/aframe-material

🅰️ Inputs, keyboard, buttons, checkboxes, radio buttons, switches, forms, toasts and more for A-Frame
https://github.com/etiennepinchon/aframe-material
Last synced: 1 day ago
JSON representation
🅰️ Inputs, keyboard, buttons, checkboxes, radio buttons, switches, forms, toasts and more for A-Frame
Host: GitHub
URL: https://github.com/etiennepinchon/aframe-material
Owner: etiennepinchon
License: mit
Created: 2017-09-04T02:29:41.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2019-10-31T11:23:41.000Z (about 5 years ago)
Last Synced: 2025-01-16T23:01:57.118Z (9 days ago)
Language: JavaScript
Homepage:
Size: 1.34 MB
Stars: 259
Watchers: 19
Forks: 62
Open Issues: 33
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

vr-resources - A-Frame Materials, Inputs, keyboard, buttons, checkboxes, radio buttons, switches, forms, toasts and more for A-Frame
README

        # 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](https://aframe.io).

It is perfect for room-scale webVR apps. 👌

![](static/screenshot.png)

## Demo

#### [👉👉 Live demo 😎 👈👈](https://etiennepinchon.github.io/aframe-material/)

Looks surreal if you have a headset! :)

## Getting Started

Here is the code from the demo. That is it. Pure html!

```html

  

    

    

    

    

    

    

    

    

  

```

## 👉👉 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.

```html

  

  

  

  

    AFRAME.ASSETS_PATH = "./assets";

  

```

-----------------------------------------------

# Documentation 🙌

# 👉👉 a-keyboard ⌨️🤤

Create a virtual keyboard that works with inputs out of the box.

```html

```

### 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 😉)

```javascript

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

```html

```

### 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).

```html

```

### 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 `` behaviors with ``, ``, ``, ``, ``.

```html

```

-----------------------------------------------

# 👉👉 a-radio

Create a radio button.

```html

```

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

```html

```

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

```html

```

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

```html

```

### 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 😉)

```javascript

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

[👉 github.com/etiennepinchon/aframe-rounded](https://github.com/etiennepinchon/aframe-rounded)

-----------------------------------------------

## Change log

### 0.1.1

* Added `enter` keyboard event.

* Added physical keyboard interaction using the `physical-keyboard` property.

-----------------------------------------------

## 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](http://brew.sh/) to install Node + [npm](https://www.npmjs.com):

    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:

[__http://localhost:3333/__](http://localhost:3333/)

## License

Distributed under an [MIT License](LICENSE).

Made by Etienne Pinchon (@etiennepinchon) - September 2017.