<commit_before>## UI widgets for [A-Frame](https://aframe.io).

### [Give it a whirl!](https://caseyyee.github.io/aframe-ui-widgets/examples/)

![A-Frame UI Widgets](https://raw.githubusercontent.com/caseyyee/aframe-ui-widgets/master/img/preview.gif)

Works with HTC VIVE and Oculus touch in a WebVR enabled browser.


### Basic usage

````html
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>

  <!-- Include component script into your project along with A-Frame. -->
  <script src="https://rawgit.com/caseyyee/aframe-ui-widgets/master/dist/ui-widgets.min.js"></script>
</head>

<body>
  <a-scene>
    <!-- Adds hand controls -->
    <a-entity hand-controls="left"></a-entity>
    <a-entity hand-controls="right"></a-entity>

    <!-- Can also be controlled used with cursor -->
    <a-camera>
      <a-cursor></a-cursor>
    </a-camera>

    <!-- Adds UI button widget -->
    <a-entity id="mybutton" ui-button></a-entity>
  </a-scene>
  <script>
  var mybutton = document.querySelector('#mybutton');
  mybutton.addEventListener('pressed', function () {
    // do stuff here.
  });
  </script>
</body>


````

### UI Components

#### Button

````html
<a-entity ui-button></a-entity>
````

##### Events
| Event         | Description
| ------------- | -------------
| buttondown | Emitted when button is pushed down.
| buttonup | Emitted when button is released.
| pressed | Emitted when button has been has been pushed down and released.<commit_msg>skinning docs<commit_after>## UI widgets for [A-Frame](https://aframe.io).

### [Give it a whirl!](https://caseyyee.github.io/aframe-ui-widgets/examples/)

![A-Frame UI Widgets](https://raw.githubusercontent.com/caseyyee/aframe-ui-widgets/master/img/preview.gif)

Works with HTC VIVE and Oculus touch in a WebVR enabled browser.


### Basic usage

````html
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>

  <!-- Include component script into your project along with A-Frame. -->
  <script src="https://rawgit.com/caseyyee/aframe-ui-widgets/master/dist/ui-widgets.min.js"></script>
</head>

<body>
  <a-scene>
    <!-- Adds hand controls -->
    <a-entity hand-controls="left"></a-entity>
    <a-entity hand-controls="right"></a-entity>

    <!-- Can also be controlled used with cursor -->
    <a-camera>
      <a-cursor></a-cursor>
    </a-camera>

    <!-- Adds UI button widget -->
    <a-entity id="mybutton" ui-button></a-entity>
  </a-scene>
  <script>
  var mybutton = document.querySelector('#mybutton');
  mybutton.addEventListener('pressed', function () {
    // do stuff here.
  });
  </script>
</body>


````

### UI Components

#### Button

````html
<a-entity ui-button></a-entity>
````
##### Properties
| Property      | Description
| ------------- | -------------
| base | mixins to use for button base.
| top | mixins to use for button top.
| pressed | mixins to use for when button is pressed (added to top).

##### Skinning buttons with custom styles

````html
<a-assets>
  <a-mixin id="beveled-square" geometry="primitive: cone; radiusTop: 0.15; radiusBottom: 0.19; height: 0.02; segmentsRadial: 4; segmentsHeight: 1" rotation="0 45 0"></a-mixin>
  <a-mixin id="square" geometry="primitive: box; width: 0.18; height: 0.025; depth: 0.18;" position="0 0.02 0"></a-mixin>
  <a-mixin id="blue" material="color: #1E2768;"></a-mixin>
  <a-mixin id="darkgreen" material="color: #22FF90;"></a-mixin>
  <a-mixin id="yellow" material="color: #FFF88E;"></a-mixin>
  <a-mixin id="offset" position="0 0.01 0"></a-mixin>
</a-assets>

<a-entity id="button" ui-button="base: beveled-square, blue; top: square, darkgreen; pressed: yellow, offset"></a-entity>
````

##### Events
| Event         | Description
| ------------- | -------------
| buttondown | Emitted when button is pushed down.
| buttonup | Emitted when button is released.
| pressed | Emitted when button has been has been pushed down and released.
{'fraction_non_alphanumeric': 0.2022022022022022, 'fraction_numerical': 0.013013013013013013, 'mean_word_length': 3.2611940298507465, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 79, 'https://': 10, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1477451', 'n_tokens_mistral': 1402, 'n_tokens_neox': 1320, 'n_words': 329}