{"id":13731906,"url":"https://github.com/rdub80/aframe-gui","last_synced_at":"2025-05-08T06:30:44.368Z","repository":{"id":54279777,"uuid":"95265403","full_name":"rdub80/aframe-gui","owner":"rdub80","description":"Graphical User Interface Component Framework for A-Frame VR","archived":false,"fork":false,"pushed_at":"2024-08-27T20:44:35.000Z","size":120558,"stargazers_count":282,"open_issues_count":31,"forks_count":64,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-11-09T14:50:22.720Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rdub80.github.io/aframe-gui/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rdub80.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-24T00:19:03.000Z","updated_at":"2024-11-01T16:33:19.000Z","dependencies_parsed_at":"2024-06-18T21:38:50.178Z","dependency_job_id":null,"html_url":"https://github.com/rdub80/aframe-gui","commit_stats":{"total_commits":203,"total_committers":7,"mean_commits":29.0,"dds":0.5862068965517242,"last_synced_commit":"effd8459edf85472ab65655ca1b2d4fd6b1d1f24"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rdub80%2Faframe-gui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rdub80%2Faframe-gui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rdub80%2Faframe-gui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rdub80%2Faframe-gui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rdub80","download_url":"https://codeload.github.com/rdub80/aframe-gui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224707539,"owners_count":17356349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T02:01:41.157Z","updated_at":"2025-05-08T06:30:44.349Z","avatar_url":"https://github.com/rdub80.png","language":"JavaScript","readme":"# aframe-gui\n\nA graphical User Interface framework for [A-Frame](https://aframe.io).\n\n\n![](examples/images/overview.png)\n\nThe `aframe-gui` components provide layout and gui widgets that can be used\nto create a user interface in an A-Frame scene. \n\nThe `dist/aframe-gui.js` file defines the following components:\n\n| Component             | Primitive                | Description |\n| --------------------  | ------------------------ | -------------------------------------------------------  |\n| gui-flex-container    | a-gui-flex-container     | Layout container with flexbox-inspired                   |\n| gui-item              | \u003cnone\u003e                   | Used by other components for common properties like height and width    |\n| gui-interactable      | \u003cnone\u003e                   | Used by other components to define onclick behavior      |\n| gui-cursor            | a-gui-cursor             | Cursor used to interact with GUI elements.               |\n| gui-button            | a-gui-button             | Standard button component with text label                |\n| gui-icon-button       | a-gui-icon-button        | Button with icon label instead of text                   |\n| gui-icon-label-button | a-gui-icon-label-button  | Button with both icon and text labels                    |\n| gui-radio             | a-gui-radio              | Radio button                                             |\n| gui-toggle            | a-gui-toggle             | Toggle button                                            |\n| gui-slider            | a-gui-slider             | Slider component                                         |\n| gui-vertical-slider   | a-gui-slider             | Vertical slider component                                |\n| gui-input             | a-gui-input              | Text input field                                         |\n| gui-label             | a-gui-label              | Text label                                               |\n| gui-progress-bar      | a-gui-progress-bar       | Progress bar                                             |\n| gui-circle-loader     | a-gui-circle-loader      | Circular progress meter                                  |\n| gui-circle-timer      | a-gui-circle-timer       | Circular progress meter with timer                       |\n\n\nkey_orange       | '#ed5b21' |\nkey_orange_light | '#ef8c60' |\nkey_grey         | '#22252a' |\nkey_grey_dark    | '#2c3037' |\nkey_grey_light   | '#606876' |\nkey_offwhite     | '#d3d3d4' |\nkey_white        | '#ffffff' |\n\n\n\n\n## Examples\n\nExamples are available at:\n\n[https://rdub80.github.io/aframe-gui/examples/index.html](https://rdub80.github.io/aframe-gui/examples/index.html) \n\n\n## Use in your AFrame project\n\nInclude the following Javascript in the head of the page containing your AFrame scene:\n\n`https://rawgit.com/rdub80/aframe-gui/master/dist/aframe-gui.min.js`\n\n\n## Building\n\nRun the following to build to the examples/js folder:\n\n`npm run dist-example`\n\n`npm run dist-example-min`\n\n\n## Run locally\n\nRun the following start the webpack-dev-server:\n\n`npm start`\n\nThe webpack-dev-server should now be running at http://localhost:8080\n\n\n## Components\n\n### a-gui-flex-container Component\n#### Properties\n\n| Property         | Description                                            | Default Value |\n| --------         | ----------------------------------------------------   | ------------- |\n| flex-direction   | property specifies how flex items are placed in the flex container defining the main axis and the direction: 'row', 'column'                                       | 'row'         |\n| justify-content  | property defines distributed space between and around content items along the main axis of their container: 'flexStart','center','flexEnd'                         | 'flexStart'   |\n| align-items      | property defines distributed space between and around flex items along the cross-axis of their container. Like justify-content but in the perpendicular direction. | 'flexStart'   |\n| item-padding     | Padding between items                                                                                                                                              | 0.0           |\n| opacity          | Transparency of the flex-conntainer                                                                                                                                | 0.0           |\n| is-top-container | Setting background of the flex-container                                                                                                                           | false         |\n| panel-color      | Background color of the flex-container                                                                                                                             | #22252a       |\n| panel-rounded    | flex-container panel rounding radius                                                                                                                               | 0.05          |\n\n```html\n\u003ca-gui-flex-container \n    flex-direction=\"column\" justify-content=\"center\" align-items=\"normal\" component-padding=\"0.1\" opacity=\"0.7\" width=\"3.5\" height=\"4.5\" \n    panel-color=\"#072B73\" \n    panel-rounded=\"0.2\"\n\tposition=\"0 2.5 -6\" rotation=\"0 0 0\"\n\u003e\n... gui items here...\n\n\u003c/a-gui-flex-container\u003e\n```\n\n### a-gui-cursor Component\n#### Properties\n\n| Property    | Description                                               | Default Value |\n| --------    | -------------------------------------------------------   | ------------- |\n| color       | Cursor initial color                                      | #ffffff       |\n| hover-color | Cursor hover color                                        | #ffffff       |\n| active-color| Cursor selection/active color                             | #ed5b21       |\n| distance    | distance of the pointer from the camera                   | -1            |\n| design      | choose a design: 'dot', 'ring', 'cross' or 'reticle'      | 'dot'         |\n\n```html\n\t\t\u003c!-- Camera + cursor. --\u003e\n\t\t\u003ca-entity id=\"cameraRig\" position=\"0 1.6 0\"\u003e\n\t\t\t\u003ca-camera look-controls wasd-controls position=\"0 0 0\"\u003e\n\t\t\t\t\u003ca-gui-cursor id=\"cursor\"\n\t\t\t\t\t\t  raycaster=\"objects: [gui-interactable]\"\n\t\t\t\t\t\t  fuse=\"true\" fuse-timeout=\"2000\"\n\t\t\t\t\t\t  color=\"#ECEFF1\"\n\t\t\t\t\t\t  hover-color=\"#CFD8DC\"\n\t\t\t\t\t\t  active-color=\"#607D8B\"\n\t\t\t\t\t\t  design=\"ring\" \u003e \u003c!-- dot, ring, reticle, cross  --\u003e\n\t\t\t\t\u003c/a-gui-cursor\u003e \u003c!-- /cursor --\u003e\n\t\t\t\u003c/a-camera\u003e \u003c!-- /camera --\u003e\n\t\t\u003c/a-entity\u003e\t\t\n```\n\n#### Example without fuse/gaze trigger (click trigger):\n\n```html\n\t\t\u003c!-- Camera + cursor. --\u003e\n\t\t\u003ca-entity id=\"cameraRig\" position=\"0 1.6 0\"\u003e\n\t\t\t\u003ca-camera look-controls wasd-controls position=\"0 0 0\"\u003e\n\t\t\t\t\u003ca-gui-cursor id=\"cursor\"\n\t\t\t\t\t\t  raycaster=\"objects: [gui-interactable]\"\n\t\t\t\t\t\t  fuse=\"false\"\n\t\t\t\t\u003e\n\t\t\t\t\u003c/a-gui-cursor\u003e \u003c!-- /cursor --\u003e\n\t\t\t\u003c/a-camera\u003e \u003c!-- /camera --\u003e\n\t\t\u003c/a-entity\u003e\n```\n\n\n### a-gui-button Component\n#### Properties\n\n| Property           | Description                                               | Default Value |\n| --------           | -------------------------------------------------------   | ------------- |\n| on                 | Event that triggers onclick action                        | click         |\n| value              | Text of button label                                      |               |\n| font-size          | Font size for button                                      | 0.2           |\n| font-family        | Font family for button                                    | ''            |\n| font-color         | Text color for button label                               | #d3d3d4       |\n| border-color       | Border color of button                                    | #d3d3d4       |\n| focus-color        | Focus color of button                                     | #ef8c60       |\n| background-color   | Background color of button                                | #22252a       |\n| hover-color        | Background color when button is in hover state            | #2c3037       |\n| active-color       | Background color when button is pressed down              | #ed5b21       |\n| toggle             | If true, button acts as toggle button with on/off state   | false         |\n| toggle-state       | Setting the toggle button on/off state                    | false         |\n\n| width              | Width of button                                           | 1             |\n| height             | Height of button                                          | 1             |\n| depth              | Depth of button                                           | 0.02          |\n| base-depth         | Depth of the base of the button                           | 0.01          |\n| gap                | Gap between button and base                               | 0.025         |\n| margin             | Margin around button                                      | 0 0 0 0       |\n\n| bevel              | If true, button bevel is enabled                          | false         |\n| bevel-segments     | Segments of the button bevel                              | 5             |\n| steps              | Steps of the button bevel                                 | 2             |\n| bevel-size         | Size of the button bevel                                  | 0.1           |\n| bevel-offset       | Offset of the button bevel                                | 0             |\n| bevel-thickness    | Thickness of the button bevel                             | 0.1           |\n\n```html\n\t\u003ca-gui-button\n\t\twidth=\"2.5\" \n\t\theight=\"0.7\" \n\t\tbase-depth=\"0.025\" \n\t\tdepth=\"0.1\"\n\t\tgap=\"0.1\"\n\n\t\tonclick=\"buttonActionFunction\" key-code=\"32\"\n\t\tvalue=\"Sample Button\"\n\t\tfont-family=\"assets/fonts/PermanentMarker-Regular.ttf\"\t\n\t\tfont-size=\"0.25\"\n\t\tmargin=\"0 0 0.05 0\"\n\n\t\tfont-color=\"black\"\n\t\tactive-color=\"red\"\n\t\thover-color=\"yellow\"\n\t\tborder-color=\"white\"\n\t\tfocus-color=\"black\"\n\t\tbackground-color=\"orange\"\n\n\t\tbevel=\"true\"\n\t\u003e\n\t\u003c/a-gui-button\u003e\n```\n\n### a-gui-circle-loader Component\n#### Properties\n\n| Property           | Description                                               | Default Value |\n| --------           | -------------------------------------------------------   | ------------- |\n| active-color       | Color of ring that indicates loading progress             | #ed5b21       |\n| background-color   | Background color of item                                  | #22252a       |\n| loaded             | Initial percentage progress value                         | 0.5           |\n| font-color         | Text color for progress percentage text                   | #d3d3d4       |\n| font-family        | Font family for progress percentage text                  | ''            |\n| font-size          | Font size for progress percentage text                    | 0.2           |\n| height             | Height of item                                            | 1             |\n| width              | Width of item                                             | 1             |\n| margin             | Margin around item                                        | 0 0 0 0       |\n\n```html\n\t\u003ca-gui-circle-loader\n\t\theight=\"0.75\"\n\t\tfont-family=\"assets/fonts/Plaster-Regular.ttf\"\t\t\t\t\t\n\t\tfont-size=\"0.2\"\n\t\tloaded=\"0.3456\"\t\t\n\t\tmargin=\"0 0 0.1 0\"\n\t\tbackground-color=\"#999\"\n\t\u003e\n\t\u003c/a-gui-circle-loader\u003e\t\n```\n\n### a-gui-circle-timer Component\n#### Properties\n\n| Property           | Description                                               | Default Value |\n| --------           | -------------------------------------------------------   | ------------- |\n| font-size          | Font size for countdown text                              | 0.2           |\n| font-family        | Font family for progress countdown text                   | ''            |\n| font-color         | Text color for progress countdown text                    | #d3d3d4       |\n| border-color       | Color of indicators that show 25/50/75/100 progress       | #22252a       |\n| background-color   | Background color of item                                  | #22252a       |\n| active-color       | Color of ring that indicates countdown progress           | #ed5b21       |\n\n| count-down         | Initial countdown value in seconds                        | 0             |\n| callback           | callback function that fires when countdown expires       | ''            |\n\n| width              | Width of item                                             | 1             |\n| height             | Height of item                                            | 1             |\n| margin             | Margin around item                                        | 0 0 0 0       |\n\n```html\n\u003ca-gui-circle-timer\n\theight=\"0.75\"\n\tcount-down=\"60\"\n\tcallback=\"timedout\"\n\tfont-family=\"assets/fonts/PermanentMarker-Regular.ttf\"\t\t\t\t\n\tmargin=\"0 0 0.1 0\"\n\u003e\n\u003c/a-gui-circle-timer\u003e\n```\n\n### a-gui-icon-button Component\n#### Properties\n\n| Property           | Description                                               | Default Value |\n| --------           | -------------------------------------------------------   | ------------- |\n| on                 | Event that triggers onclick action                        | click         |\n\n| icon               | \t\t\t                                                 | ''            |\n| icon-active        | \t\t\t                                                 | ''            |\n| icon-font          | Icon font family                                          | 'assets/fonts/fa-regular-400.ttf'            |\n| icon-font-size     | Icon Font size for button                                 | 0.4           |\n\n| font-color         | Text color for button label                               | #d3d3d4       |\n| border-color       | Border color of button                                    | #d3d3d4       |\n| background-color   | Background color of item                                  | #22252a       |\n| hover-color        | Background color when button is in hover state            | #2c3037       |\n| active-color       | Background color when button is pressed down              | #ed5b21       |\n| toggle             | Toggle status                                             | false         |\n| toggle-state       | Setting the toggle button on/off state                    | false         |\n\n| height             | Height of item                                            | 1             |\n| width              | Width of item                                             | 1             |\n| margin             | Margin around item                                        | 0 0 0 0       |\n\n```html\n\u003ca-gui-icon-button\n\theight=\"0.75\"\n\tonclick=\"buttonActionFunction\" key-code=\"32\"\n\ticon=\"f09b\"\n\ticon-font=\"assets/fonts/fa-brands-400.ttf\"\n\tmargin=\"0 0 0.05 0\"\n\u003e\n\u003c/a-gui-icon-button\u003e\n```\n\n### a-gui-icon-label-button Component\n#### Properties\n\n| Property         | Description                                            | Default Value |\n| --------         | ----------------------------------------------------   | ------------- |\n| on               | Event that triggers onclick action                     | click         |\n\n| icon             | icon char                                              | ''            |\n| icon-active      | icon char for the active state                         | ''            |\n| icon-font        | Icon font family                                       | 'assets/fonts/fa-regular-400.ttf'            |\n| icon-font-size   | Icon Font size for button                              | 0.35          |\n\n| font-color       | Text color for button label                            | #d3d3d4       |\n| value            |  \t\t\t                                            | ''            |\n| font-family      | Font family for button                                 | ''            |\n| font-size        | Font size for button                                   | 0.2           |\n| font-color       | Text color for button label                            | #d3d3d4       |\n| border-color     | Border color of button                                 | #d3d3d4       |\n| background-color | Background color of button                             | #22252a       |\n| hover-color      | Background color when button is in hover state         | #2c3037       |\n| active-color     | Background color when button is pressed down           | #ed5b21       |\n| toggle           | Toggle status                                          | false         |\n| toggle-state     | Setting the toggle button on/off state                 | false         |\n\n| height           | Height of button                                       | 1             |\n| width            | Width of button                                        | 1             |\n| margin           | Margin around button                                   | 0 0 0 0       |\n\n```html\n\u003ca-gui-icon-label-button\n\twidth=\"2.5\" height=\"0.75\"\n\tonclick=\"buttonActionFunction\"\n\ticon=\"f2b9\"\n\ticon-font=\"assets/fonts/fa-solid-900.ttf\"\n\tvalue=\"icon label\"\n\tfont-family=\"assets/fonts/PressStart2P-Regular.ttf\"\n\tfont-size=\"0.16\"\n\tmargin=\"0 0 0.05 0\"\n\u003e\n\u003c/a-gui-icon-label-button\u003e\n```\n\n### a-gui-input Component\n#### Properties\n\n| Property           | Description                                           | Default Value  |\n| --------           | ----------------------------------------------------  | -------------  |\n| onclick            | Function to call on click event                       |                |\n| onhover            | Function to call on hover event                       |                |\n| value              | Input text value                                      |                |\n\n| font-size          | Font size for input                                   | 0.2            |\n| font-family        | Font family for input                                 | ''             |\n| font-color         | Text input color                                      | #2c3037        |\n| border-color       | Border color of input                                 | #2c3037        |\n| background-color   | Background color of input                             | #22252a        |\n| border-hover-color | Border color when input is in hover state             | #22252a        |\n| hover-color        | Background color when input is in hover state         | #2c3037        |\n\n| margin             | Margin around item                                    | 0 0 0 0        |\n| height             | Height of item                                        | 1              |\n| width              | Width of item                                         | 1              |\n\n```html\n\u003ca-gui-input\n\twidth=\"2.5\" height=\"0.75\"\n\tonclick=\"inputActionFunction\"\n\tfont-family=\"assets/fonts/PermanentMarker-Regular.ttf\"\t\n\tfont-size=\"0.2\"\n\tvalue=\"Hello Wor_\"\n\tmargin=\"0 0 0.05 0\"\n\u003e\n\u003c/a-gui-input\u003e\n```\n\n\n### a-gui-label Component\n#### Properties\n\n| Property         | Description                                             | Default Value  |\n| --------         | ------------------------------------------------------- | -------------  |\n| value            |  \t\t\t                                             | ''             |\n| align            | text-align: 'left','center','right' \t\t             | 'center'       |\n| anchor           | text anchor position: 'left','center','right' \t         | 'center'       |\n| lineHeight       | line-height of the label                                | 0.2            |\n| font-size        | Font size for input                                     | 0.2            |\n| font-family      | Font family for input                                   | ''             |\n| font-color       | Text input color                                        | #2c3037        |\n| background-color | Background color of label                               | #d3d3d4        |\n\n| text-depth       | distance from the text to label background              | 0.01           |\n| height           | Height of item                                          | 1              |\n| width            | Width of item                                           | 1              |\n| margin           | Margin around item                                      | 0 0 0 0        |\n\n\n```html\n\u003ca-gui-label\n\twidth=\"2.5\" height=\"0.75\"\n\tvalue=\"test label\"\n\tfont-family=\"assets/fonts/DiplomataSC-Regular.ttf\"\n\tfont-size=\"0.35\"\n\tline-height=\"0.8\"\n\tletter-spacing=\"0\"\n\tmargin=\"0 0 0.05 0\"\n\u003e\n\u003c/a-gui-label\u003e\n```\n\n\n### a-gui-progress-bar Component\n#### Properties\n\n| Property         | Description                                               | Default Value |\n| --------         | -------------------------------------------------------   | ------------- |\n| background-color | Background color of progress bar                          | #22252a       |\n| active-color     | Color for indicating progress level                       | #ed5b21       |\n| height           | Height of item                                            | 1             |\n| width            | Width of item                                             | 1             |\n| margin           | Margin around item                                        | 0 0 0 0       |\n\n\n```html\n\u003ca-gui-progressbar \n\twidth=\"2.5\" height=\"0.25\"\n\tmargin=\"0 0 0.05 0\"\n\u003e\n\u003c/a-gui-progressbar\u003e\n```\n\n\n### a-gui-radio Component\n#### Properties\n\n| Property         | Description                                               | Default Value  |\n| --------         | -------------------------------------------------------   | -------------- |\n| on               | Event that triggers onclick action                        | click          |\n| checked          |                                                           | false          |\n| active           |                                                           | true           |\n| toggle           | Toggle status                                             | false          |\n| toggle-state     | Setting the radio button on/off state                     | false          |\n\n| value            |  \t\t\t                                               | ''             |\n| font-family      | Font family for radio button                              | ''             |\n| font-size        | Font size for radio button                                | 0.2            |\n| font-color       | Text color for radio button label                         | #2c3037        |\n| border-width     |                                                           | 1              |\n| border-color     | Border color of radio button                              | #ffffff        |\n| background-color | Background color of radio button                          | #d3d3d4        |\n| hover-color      | Background color when radio button is in hover state      | #606876        |\n| handle-color     |                                                           | #22252a        |\n| active-color     | Background color when radio button is pressed down        | #ed5b21        |\n\n| height           | Height of radio button                                    | 1              |\n| width            | Width of radio button                                     | 1              |\n| margin           | Margin around radio button                                | 0 0 0 0        |\n\n```html\n\u003ca-gui-radio\n\twidth=\"2.5\" height=\"0.75\"\n\tonclick=\"toggleActionFunction\"\n\tvalue=\"radio label\"\n\tfont-size=\"0.3\"\n\tmargin=\"0 0 0.05 0\"\n\u003e\n\u003c/a-gui-radio\u003e\n```\n\n\n### a-gui-slider Component\n#### Properties\n\n| Property            | Description                                               | Default Value  |\n| --------            | -------------------------------------------------------   | -------------  |\n| active-color        |                                                           | #ed5b21        |\n| background-color    |                                                           | #d3d3d4        |\n| border-color        |                                                           | #22252a        |\n| handle-color        |                                                           | #ffffff        |\n| handle-outer-radius |                                                           | '0.17'         |\n| handle-inner-radius |                                                           | '0.13'         |\n| handle-outer-depth  |                                                           | '0.04'         |\n| handle-inner-depth  |                                                           | '0.02'         |\n| height              | Height of item                                            | 1              |\n| hover-color         |                                                           | #606876        |\n| left-right-padding  |                                                           | '0.25'         |\n| margin              | Margin around item                                        | 0 0 0 0        |\n| onclick             | Javascript function to execute on click                   |               |\n| onhover             | Javascript function to execute on click                   |               |\n| percent             |                                                           | '0.5'          |\n| slider-bar-depth    |                                                           | '0.03'         |\n| slider-bar-height   |                                                           | '0.05'         |\n| top-bottom-padding  |                                                           | '0.125'        |\n| width               | Width of item                                             | 1              |\n\n```html\n\u003ca-gui-slider \t\n\twidth=\"2.5\" height=\"0.75\"\n\tonclick=\"slideActionFunction\"\n\tpercent=\"0.29\"\n\tmargin=\"0 0 0.05 0\"\n\u003e\n\u003c/a-gui-slider\u003e\n```\n\n\n### a-gui-toggle Component\n#### Properties\n\n| Property         | Description                                               | Default Value  |\n| --------         | -------------------------------------------------------   | -------------- |\n| on               | Event that triggers onclick action                        | click          |\n| checked          |                                                           | false          |\n| active           |                                                           | false          |\n| toggle           | Toggle status                                             | false          |\n| toggle-state     | Setting the toggle toggle button on/off state             | false          |\n\n| value            |  \t\t\t                                               | ''             |\n| font-family      | Font family for toggle button                             | ''             |\n| font-size        | Font size for toggle button                               | 0.2            |\n| font-color       | Text color for toggle button label                        | #d3d3d4        |\n| border-width     |                                                           | 1              |\n| border-color     | Border color of toggle button                             | #d3d3d4        |\n| background-color | Background color of toggle button                         | #22252a        |\n| hover-color      | Background color when toggle button is in hover state     | #2c3037        |\n| handle-color     |                                                           | #d3d3d4        |\n| active-color     | Background color when toggle button is pressed down       | #ed5b21        |\n\n| height           | Height of toggle button                                   | 1              |\n| width            | Width of toggle button                                    | 1              |\n| margin           | Margin around toggle button                               | 0 0 0 0        |\n\n```html\n\u003ca-gui-toggle\n\twidth=\"2.5\" height=\"0.75\"\n\tonclick=\"testToggleAction\"\n\tvalue=\"toggle label\"\n\tfont-family=\"assets/fonts/Plaster-Regular.ttf\"\n\tfont-size=\"0.2\"\n\tmargin=\"0 0 0.05 0\"\n\u003e\n\u003c/a-gui-toggle\u003e\n```\n\n### a-gui-vertical-slider Component\n#### Properties\n\n| Property            | Description                                               | Default Value  |\n| --------            | -------------------------------------------------------   | -------------  |\n| active-color        |                                                           | #ed5b21        |\n| background-color    |                                                           | #d3d3d4        |\n| border-color        |                                                           | #22252a        |\n| handle-color        |                                                           | #ffffff        |\n| handle-outer-radius |                                                           | 0.17           |\n| handle-inner-radius |                                                           | 0.13           |\n| handle-outer-depth  |                                                           | 0.04           |\n| handle-inner-depth  |                                                           | 0.02           |\n| hover-color         |                                                           | #606876        |\n| hover-font-size     | Font size of label indicating where user is hovering      | 0.2            |\n| hover-height        |  Height of label indicating where user is hovering        | 1.0            |\n| hover-margin        |  Margin of label indicating where user is hovering        | 1.0            |\n| hover-percent       | Current percentage where user is hovering                 |                |\n| hover-width         | Width of label indicating where user is hovering          | 1.0            |\n| left-right-padding  |                                                           | 0.25           |\n| margin              | Margin around item                                        | '0 0 0 0'      |\n| onclick             | Javascript function to execute on click                   |                |\n| onhover             | Javascript function to execute on click                   |                |\n| opacity             | Transparency of the vertical slider background            | 1.0            |\n| output-font-size    |  Font size of label indicating output value               | 0.2            |\n| output-function     |  Name of function to calculate output value from percent  |                |\n| output-height       |   Height of label indicating output value                 | 1.0            |\n| output-margin       |  Margin of label indicating output value                  | '0 0 0 0'      |\n| output-width        |  Width of label indicating output value                   | 1.0            |\n| percent             |  Current selected slider value, from 0.0 to 1.0           | 0.5            |\n| slider-bar-depth    |                                                           | 0.03           |\n| slider-bar-height   |                                                           | 0.05           |\n| top-bottom-padding  |                                                           | 0.125          |\n| height              | Height of item                                            | 1              |\n| width               | Width of item                                             | 1              |\n\n```html\n\u003ca-gui-slider \t\n\twidth=\"2.5\" height=\"0.75\"\n\tonclick=\"slideActionFunction\"\n\tpercent=\"0.29\"\n\tmargin=\"0 0 0.05 0\"\n\u003e\n\u003c/a-gui-slider\u003e\n```\n\n","funding_links":[],"categories":["JavaScript","Web-Based Frameworks"],"sub_categories":["Motion Controllers inside Unity!"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frdub80%2Faframe-gui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frdub80%2Faframe-gui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frdub80%2Faframe-gui/lists"}