Skip to content

Provides a component that constructs a toggle-able dialog with a title, description, image, and close button.

License

Notifications You must be signed in to change notification settings

EditVR/aframe-dialog-popup-component

Repository files navigation

aframe-dialog-popup-component

Version CircleCI License

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/aframe-dialog-popup-component@1.7.2/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-component

Then require and use.

require('aframe');
require('@editvr/aframe-dialog-popup-component');

Example

Closed

Closed

Opened

Open

About

Provides a component that constructs a toggle-able dialog with a title, description, image, and close button.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published