{"id":13733265,"url":"https://github.com/etiennepinchon/aframe-material","last_synced_at":"2025-05-07T15:07:09.865Z","repository":{"id":143961349,"uuid":"102310503","full_name":"etiennepinchon/aframe-material","owner":"etiennepinchon","description":"🅰️ Inputs, keyboard, buttons, checkboxes, radio buttons, switches, forms, toasts and more for A-Frame","archived":false,"fork":false,"pushed_at":"2019-10-31T11:23:41.000Z","size":1405,"stargazers_count":259,"open_issues_count":33,"forks_count":62,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-02-19T00:14:10.005Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/etiennepinchon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-09-04T02:29:41.000Z","updated_at":"2024-11-15T17:42:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"58195c13-0b2c-4a36-8bb8-3d77f9d26245","html_url":"https://github.com/etiennepinchon/aframe-material","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etiennepinchon%2Faframe-material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etiennepinchon%2Faframe-material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etiennepinchon%2Faframe-material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etiennepinchon%2Faframe-material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etiennepinchon","download_url":"https://codeload.github.com/etiennepinchon/aframe-material/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240777649,"owners_count":19855881,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T03:00:40.259Z","updated_at":"2025-02-26T02:18:39.984Z","avatar_url":"https://github.com/etiennepinchon.png","language":"JavaScript","funding_links":[],"categories":["Web-Based Frameworks"],"sub_categories":["Motion Controllers inside Unity!"],"readme":"# A-Frame Material Kit 👽\n\nThis is real! WebVR is getting even better!\nInputs, keyboard, buttons, checkboxes, radio buttons, switches, forms, toasts and more - following the Google Material design guideline for [A-Frame](https://aframe.io).\nIt is perfect for room-scale webVR apps. 👌\n\n![](static/screenshot.png)\n\n## Demo\n\n#### [👉👉 Live demo 😎 👈👈](https://etiennepinchon.github.io/aframe-material/)\n\nLooks surreal if you have a headset! :)\n\n## Getting Started\n\nHere is the code from the demo. That is it. Pure html!\n\n```html\n\u003ca-entity laser-controls=\"hand: right\"\u003e\u003c/a-entity\u003e\n\n\u003c!-- BEGIN INPUTS/KEYBOARD --\u003e\n\u003ca-keyboard\u003e\u003c/a-keyboard\u003e\n\u003ca-input position=\"-0.7 1 -2.5\" placeholder=\"Username\" color=\"black\" width=\"1\"\u003e\u003c/a-input\u003e\n\u003ca-input position=\"-0.7 0.8 -2.5\" type=\"password\" placeholder=\"Password\" color=\"black\" width=\"1\"\u003e\u003c/a-input\u003e\n\u003c!-- END INPUTS/KEYBOARD --\u003e\n\n\u003c!-- BEGIN FORM --\u003e\n\u003ca-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\"\u003e\n  \u003ca-form\u003e\n    \u003ca-switch position=\"0.2 2.7 0\" enabled=\"true\"\u003e\u003c/a-switch\u003e\n    \u003ca-radio position=\"0.2 2.4 0\" width=\"3\" name=\"food\" label=\"Burger with fries and pizza\" value=\"pizza\"\u003e\u003c/a-radio\u003e\n    \u003ca-radio position=\"0.2 2.1 0\" width=\"3\" name=\"food\" label=\"Veggies\" checked=\"true\" disabled=\"true\"\u003e\u003c/a-radio\u003e\n    \u003ca-radio position=\"0.2 1.8 0\" width=\"3\" name=\"food\" label=\"Ice cream\"\u003e\u003c/a-radio\u003e\n    \u003ca-checkbox position=\"0.2 1.5 0\" width=\"3\" name=\"stuff\" label=\"I am a checkbox\" checked=\"true\"\u003e\u003c/a-checkbox\u003e\n    \u003ca-checkbox position=\"0.2 1.2 0\" width=\"3\" name=\"stuff\" label=\"And I am another one\" checked=\"true\" disabled=\"true\"\u003e\u003c/a-checkbox\u003e\n    \u003ca-button position=\"0.2 0.8 0\" name=\"stuff\" value=\"Click me\" type=\"raised\"\u003e\u003c/a-button\u003e\n    \u003ca-button position=\"0.2 0.35 0\" width=\"3\" name=\"stuff\" value=\"You cannot click me\" disabled=\"true\"\u003e\u003c/a-button\u003e\n  \u003c/a-form\u003e\n\u003c/a-rounded\u003e\n\u003c!-- END FORM --\u003e\n\n\u003c!-- BEGIN TOAST --\u003e\n\u003ca-toast message=\"This is a toast\" action=\"Got it\"\u003e\u003c/a-toast\u003e\n\u003c!-- END TOAST --\u003e\n```\n\n## 👉👉 Install 👈👈\n\n## Option 1:\nDownload the `boilerplate` and follow the readme (super easy).\n\n## Option 2:\nSince 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.\n\n```html\n\u003chead\u003e\n  \u003c!--  \n    ... MORE HEAD STUFF ...\n  --\u003e\n  \u003cscript src=\"https://aframe.io/releases/0.6.1/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"./js/aframe-material.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    AFRAME.ASSETS_PATH = \"./assets\";\n  \u003c/script\u003e\n\u003c/head\u003e\n```\n\n-----------------------------------------------\n\n# Documentation 🙌\n\n# 👉👉 a-keyboard ⌨️🤤\n\nCreate a virtual keyboard that works with inputs out of the box.\n\n```html\n\u003ca-keyboard\u003e\u003c/a-keyboard\u003e\n```\n\n### Attributes\n\n| Name | Description | Type | Default |\n| --- | --- | --- | --- |\n| is-open | Whether or not the keyboard should be open | boolean | false |\n| physical-keyboard | Whether or not the physical keyboard should be respond to key press. (Great for debugging) | boolean | false |\n\n### Methods\n\n| Name | Description |\n| --- | --- |\n| show() | Display the keyboard without any animations. |\n| hide() | Hide the keyboard without any animations. |\n| open() | Open the keyboard smoothly. |\n| dismiss() | Close the keyboard smoothly. |\n| destroy() | Remove the keyboard from the scene. |\n\n### Events\n\n| Name | Description |\n| --- | --- |\n| didopen | Triggered when the keyboard did open. |\n| diddismiss | Triggered when the keyboard did close. |\n| input | Triggered when a key is pressed. |\n| backspace | Triggered when the backspace key is pressed. |\n| enter | Triggered when the enter is pressed. |\n\n### Custom example (just in case 😉)\n\n```javascript\nlet keyboard = document.querySelector(\"a-keyboard\");\nkeyboard.open();\nkeyboard.addEventListener('input', (e)=\u003e{\n  str += e.detail;\n  console.log(str);\n});\nkeyboard.addEventListener('enter', (e)=\u003e{\n  console.log(\"Enter key pressed!\")\n})\nkeyboard.addEventListener('dismiss', (e)=\u003e{\n  console.log(\"Dismiss: \", e);\n  keyboard.dismiss();\n});\nkeyboard.addEventListener('backspace', (e)=\u003e{\n  str = str.slice(0, -1);\n  console.log(str);\n});\n```\n\n-----------------------------------------------\n\n# 👉👉 a-input\n\nCreate a single line text input that work with the `\u003ca-keyboard\u003e`.\n\n```html\n\u003ca-input position=\"-1.25 2.1 -5\" placeholder=\"Username\" color=\"black\" scale=\"2 2 2\" width=\"1\"\u003e\u003c/a-input\u003e\n```\n\n### Attributes\n\n| Name | Description | Type | Default |\n| --- | --- | --- | --- |\n| value | Value of the field. | string | \"\" |\n| name | Name of the field. | string | \"\" |\n| disabled | Whether or not the input should be disabled. | boolean | false |\n| color | Text color. | color | \"#000\" |\n| font | Text font | string. | \"default\" |\n| opacity | Input opacity. | number | 1 |\n| placeholder | Value of the placeholder. | string | \"\" |\n| placeholder-color | Text color of the placeholder. | color | \"#AAA\" |\n| max-length | Limit the number of characters. | int | 0 (Infinite) |\n| type | Can be either \"text\" or \"password\". | string | \"text\" |\n| width | Width of the input. | number | 1 |\n| cursor-width | Width of the cursor. | number | 0.01 |\n| cursor-height | Height of the cursor. | number | 0.08 |\n| cursor-color | Color of the cursor. | color | \"#007AFF\" |\n| background-color | Color of the field. | color | \"#FFF\" |\n| background-opacity | Opacity of the field background only. | number | 1 |\n\n### Methods\n\n| Name | Description |\n| --- | --- |\n| focus() | Focus the input. |\n| blur() | Blur the input. |\n\n### Events\n\n| Name | Description |\n| --- | --- |\n| focus | Triggered when the input is focused. |\n| blur | Triggered when the input is blurred. |\n| change | Triggered when the value of the input changed. |\n\n-----------------------------------------------\n\n# 👉👉 a-button\n\nCreate a button (can be raised of flat).\n\n```html\n\u003ca-button position=\"0 0.8 2\" value=\"Click me\" type=\"raised\"\u003e\u003c/a-button\u003e\n```\n\n### Attributes\n\n| Name | Description | Type | Default |\n| --- | --- | --- | --- |\n| value | Value of the button. | string | \"Button\" |\n| name | Name of the button. | string | \"\" |\n| disabled | Whether or not the button should be disabled. | boolean | false |\n| type | Can be either \"raised\" or \"flat\". | string | \"raised\" |\n| color | Text color. | color | \"#FFF\" |\n| button-color | Color of the button. | color | \"#4076fd\" |\n| font | Text font | string. | \"default\" |\n| opacity | Input opacity. | number | 1 |\n| width | Width of the input. | number | 1 |\n\n### Events\n\n| Name | Description |\n| --- | --- |\n| change:width | Triggered when the width of the button changed. |\n\n## a-form\n\nCreate a form to get the same html `\u003cform\u003e` behaviors with `\u003ca-input\u003e`, `\u003ca-radio\u003e`, `\u003ca-button\u003e`, `\u003ca-switch\u003e`, `\u003ca-checkbox\u003e`.\n\n```html\n\u003ca-form\u003e\u003c/a-form\u003e\n```\n\n-----------------------------------------------\n\n# 👉👉 a-radio\n\nCreate a radio button.\n\n```html\n\u003ca-radio position=\"0 0.8 2\" width=\"3\" name=\"food\" label=\"Burger with fries and pizza\" value=\"pizza\"\u003e\u003c/a-radio\u003e\n```\n\n### Attributes\n\n| Name | Description | Type | Default |\n| --- | --- | --- | --- |\n| checked | Whether or not the radio button should be checked. | boolean | false |\n| value | Value of the radio button. | string | \"\" |\n| name | Name of the radio button. | string | \"\" |\n| disabled | Whether or not the button should be disabled. | boolean | false |\n| label | Text following the radio button (totally optional). | string | \"\" |\n| color | Text color of the label. | color | \"#757575\" |\n| radio-button | Color of the radio button when unchecked. | color | \"#757575\" |\n| radio-color-checked | Color of the radio button when checked. | color | \"#4076fd\" |\n| font | Text font | string. | \"default\" |\n| opacity | Input opacity. | number | 1 |\n| width | Width of the input. | number | 1 |\n\n### Events\n\n| Name | Description |\n| --- | --- |\n| change | Triggered when the value of the radio button changed. |\n\n-----------------------------------------------\n\n# 👉👉 a-checkbox\n\nCreate a checkbox.\n\n```html\n\u003ca-checkbox position=\"0 0.8 2\" width=\"3\" name=\"stuff\" label=\"I am a checkbox\" checked=\"true\"\u003e\u003c/a-checkbox\u003e\n```\n\n### Attributes\n\n| Name | Description | Type | Default |\n| --- | --- | --- | --- |\n| checked | Whether or not the checkbox should be checked. | boolean | false |\n| value | Value of the checkbox. | string | \"\" |\n| name | Name of the checkbox. | string | \"\" |\n| disabled | Whether or not the checkbox should be disabled. | boolean | false |\n| label | Text following the checkbox (totally optional). | string | \"\" |\n| color | Text color of the label. | color | \"#757575\" |\n| radio-button | Color of the checkbox when unchecked. | color | \"#757575\" |\n| radio-color-checked | Color of the checkbox when checked. | color | \"#4076fd\" |\n| font | Text font | string. | \"default\" |\n| opacity | Input opacity. | number | 1 |\n| width | Width of the input. | number | 1 |\n\n### Events\n\n| Name | Description |\n| --- | --- |\n| change | Triggered when the value of the checkbox changed. |\n\n-----------------------------------------------\n\n# 👉👉 a-switch\n\nCreate a switch button that can be toggle on/off.\n\n```html\n\u003ca-switch position=\"0 0.8 2\" enabled=\"true\"\u003e\u003c/a-switch\u003e\n```\n\n### Attributes\n\n| Name | Description | Type | Default |\n| --- | --- | --- | --- |\n| enabled | Whether or not the switch should be enabled. | boolean | false |\n| name | Name of the checkbox. | string | \"\" |\n| disabled | Whether or not the switch should be disabled. | boolean | false |\n| fill-color | Color of the fill when off. | color | \"#bababa\" |\n| knob-color | Color of the knob when off. | color | \"#f5f5f5\" |\n| fill-color-enabled | Color of the fill when on. | color | \"#80a8ff\" |\n| knob-color-enabled | Color of the knob when on. | color | \"#4076fd\" |\n| fill-color-disabled | Color of the fill when disabled. | color | \"#939393\" |\n| knob-color-disabled | Color of the knob when disabled. | color | \"#a2a2a2\" |\n\n### Events\n\n| Name | Description |\n| --- | --- |\n| change | Triggered when the switch is toggled. |\n\n-----------------------------------------------\n\n# 👉👉 a-toast\n\nCreate a toast to alert the user of something.\n\n```html\n\u003ca-toast message=\"This is a toast\" action=\"Got it\"\u003e\u003c/a-toast\u003e\n```\n\n### Attributes\n\n| Name | Description | Type | Default |\n| --- | --- | --- | --- |\n| message | Text shown by the toast. | string | \"You are cool\" |\n| action | Text of the button (optional). | string | \"\" |\n| color | Text color. | color | \"#FFF\" |\n| background-color | Color of the toast. | color | \"#4076fd\" |\n| font | Text font | string. | \"default\" |\n| width | Width of the input. | number | 1 |\n| duration | Duration of the toast | number | 2000 (2sec) |\n| autoshow | Whether the toast should show right away. | boolean | true |\n\n### Events\n\n| Name | Description |\n| --- | --- |\n| actionclick | Triggered when the action is clicked. |\n\n### Custom example (just in case 😉)\n\n```javascript\nlet button = document.querySelector('a-button');\nlet toast = document.querySelector('a-toast');\ntoast.addEventListener('actionclick', ()=\u003e{\n  toast.hide();\n})\nbutton.addEventListener('click', ()=\u003e {\n  toast.show();\n})\n```\n\n-----------------------------------------------\n\n# 👉👉 a-rounded\n\nCreate a rounded rectangle, useful to create beautiful interfaces 😁.\n\n[👉 github.com/etiennepinchon/aframe-rounded](https://github.com/etiennepinchon/aframe-rounded)\n\n-----------------------------------------------\n\n## Change log\n\n### 0.1.1\n\n* Added `enter` keyboard event.\n* Added physical keyboard interaction using the `physical-keyboard` property.\n\n-----------------------------------------------\n\n## Want to make some changes to it?\n\n### Installation\n\nFirst make sure you have Node installed.\n\nOn Mac OS X, it's recommended to use [Homebrew](http://brew.sh/) to install Node + [npm](https://www.npmjs.com):\n\n    brew install node\n\nTo install the Node dependencies:\n\n    npm install\n\n### Local Development\n\nTo serve the site from a simple Node development server:\n\n    npm start\n\nThen launch the site from your favorite browser:\n\n[__http://localhost:3333/__](http://localhost:3333/)\n\n## License\n\nDistributed under an [MIT License](LICENSE).\n\nMade by Etienne Pinchon (@etiennepinchon) - September 2017.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetiennepinchon%2Faframe-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetiennepinchon%2Faframe-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetiennepinchon%2Faframe-material/lists"}