https://github.com/editvr/aframe-dialog-popup-component
Provides a component that constructs a toggle-able dialog with a title, description, image, and close button.
https://github.com/editvr/aframe-dialog-popup-component
aframe aframe-component aframevr vr webvr
Last synced: about 2 months ago
JSON representation
Provides a component that constructs a toggle-able dialog with a title, description, image, and close button.
- Host: GitHub
- URL: https://github.com/editvr/aframe-dialog-popup-component
- Owner: EditVR
- License: gpl-3.0
- Created: 2018-06-29T18:42:24.000Z (almost 7 years ago)
- Default Branch: develop
- Last Pushed: 2018-08-03T19:08:11.000Z (almost 7 years ago)
- Last Synced: 2025-03-28T23:11:08.298Z (2 months ago)
- Topics: aframe, aframe-component, aframevr, vr, webvr
- Language: JavaScript
- Size: 718 KB
- Stars: 11
- Watchers: 0
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## aframe-dialog-popup-component
[](https://npmjs.org/package/aframe-dialog-popup-component)
[](https://npmjs.org/package/@editvr/aframe-dialog-popup-component)
[](https://npmjs.org/package/aframe-dialog-popup-component)
Provides a component that constructs a toggle-able dialog with a title, description, image, and close button.
For [A-Frame](https://aframe.io).
### API
| Property | Description | Default Value |
| ---------------------- | --------------------------- | ----------------------------- |
| title | String containing title. | New Dialog |
| titleColor | Text color of title. | black |
| titleFont | Title font. | mozillavr |
| titleWrapCount | Title entity wrap count. | 24 |
| body | String containing body. | This dialog has no body yet. |
| bodyColor | Text color of body. | black |
| bodyFont | Body font. | mozillavr |
| bodyWrapCount | Body entity wrap count. | 30 |
| openOn | Open/Close event. | click |
| active | Turn dialog on/off. | true |
| openIconImage | Icon image for open button. | None |
| openIconRadius | Radius for open icon. | 0.3 |
| openIconColor | Color for open icon. | white |
| closeIconImage | Icon image for open button. | None |
| closeIconRadius | Radius for close icon. | 0.3 |
| closeIconColor | Color for close icon. | white |
| image | Path to Dialog hero image. | None |
| imageWidth | Dialog hero image width. | 2 |
| imageHeight | Dialog hero image height. | 2 |
| dialogBoxWidth | Dialog box width. | 4 |
| dialogBoxHeight | Dialog box height. | 4 |
| dialogBoxColor | Dialog box background color.| white |
| dialogBoxPadding | Dialog box padding. | 0.2 |
### Installation
#### Browser
Install and use by directly including the [browser files](dist):
```html
My A-Frame Scene
```
#### npm
Install via npm:
```bash
npm install @editvr/aframe-dialog-popup-component
```
Then require and use.
```js
require('aframe');
require('@editvr/aframe-dialog-popup-component');
```
## Example
### Closed
### Opened
