Skip to content

Commit

Permalink
Update xr-mode-ui.md (#5420)
Browse files Browse the repository at this point in the history
* Update xr-mode-ui.md

Corrected default values for enterVREnabled and enterAREnabled. Added examples to clarify customization options. Seperated out "one of" into seperate column for greater clarity.

* Updated formatting and removed extra sections.

* Updated the general description
  • Loading branch information
Omegahed authored Jan 12, 2024
1 parent f5c7080 commit 298b1c9
Showing 1 changed file with 13 additions and 15 deletions.
28 changes: 13 additions & 15 deletions docs/components/xr-mode-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,9 @@ parent_section: components
source_code: src/components/scene/xr-mode-ui.js
---

The xr-mode-ui component allows configuring and disabling of UI such as the enter VR / AR button, compatibility
modal, and orientation modal for mobile. The xr-mode-ui component applies only
The xr-mode-ui component configures or disables the enter VR and AR buttons. Buttons only display if the browser supports the corresponding modes (AR or VR). The xr-mode-ui component applies only
to the [`<a-scene>` element][scene]. If we wish to simply toggle the UI, use CSS instead.


## Example

```html
Expand All @@ -19,22 +17,22 @@ to the [`<a-scene>` element][scene]. If we wish to simply toggle the UI, use CSS

## Properties

| Property | Description | Default Value |
|-----------------------|---------------------------------------------------------------------|---------------|
| cardboardModeEnabled | Enables the now deprecated cardboard mode. | false |
| enabled | Whether or not to display UI related to entering VR. | true |
| enterVRButton | Selector to a custom VR button. On click, the button will enter VR. | '' |
| enterVREnabled | If the VR button is displayed when applicable | false |
| enterARButton | Selector to a custom AR button. On click, the button will enter AR. | '' |
| enterAREnabled | If the AR button is displayed when applicable | false |
| XRMode | If the AR, VR button or both will be displayed. One of 'ar', 'vr' or 'xr'.| vr |
| Property | Description | Default Value |
| - | - | - |
| cardboardModeEnabled | Enables the now deprecated cardboard mode. | false |
| enabled | Whether or not to display UI related to entering VR. | true |
| enterVRButton | Selector to a custom VR button. On click, the button will enter VR. | '' |
| enterVREnabled | If the VR button is displayed when applicable.| true |
| enterARButton | Selector to a custom AR button. On click, the button will enter AR. | '' |
| enterAREnabled | If the AR button is displayed when applicable. | true |
| XRMode | If the AR button, VR button, or both buttons will be displayed. | vr |

### Specifying a Custom Enter VR Button
### Specifying Custom Enter VR and AR Buttons

```html
<a-scene
xr-mode-ui="enterVRButton: #myEnterVRButton; enterARButton: #myEnterARButton">
<!-- Style the button with images or whatever. -->
xr-mode-ui="enterVRButton: #myEnterVRButton; enterARButton: #myEnterARButton; XRMode: xr;">
<!-- Style the button with images and/or custom CSS. -->
<a id="myEnterVRButton" href="#"></a>
<a id="myEnterARButton" href="#"></a>
</a-scene>
Expand Down

0 comments on commit 298b1c9

Please sign in to comment.