@editvr/aframe-dialog-popup-component
v1.7.3
Published
Provides a component that constructs a toggle-able dialog with a title, description, image, and close button.
Downloads
93
Readme
aframe-dialog-popup-component
Provides a component that constructs a toggle-able dialog with a title, description, image, and close button.
For A-Frame.
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:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/@editvr/[email protected]/dist/aframe-dialog-popup-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity dialog-popup="title: My Title; body: My Body"></a-entity>
</a-scene>
</body>npm
Install via npm:
npm install @editvr/aframe-dialog-popup-componentThen require and use.
require('aframe');
require('@editvr/aframe-dialog-popup-component');Example
Closed
Opened
