{"id":13733381,"url":"https://github.com/binzume/aframe-xylayout","last_synced_at":"2025-08-31T23:32:23.320Z","repository":{"id":44734612,"uuid":"149087363","full_name":"binzume/aframe-xylayout","owner":"binzume","description":"Flexbox like 2D layout + UI components for A-Frame.","archived":false,"fork":false,"pushed_at":"2023-11-16T11:02:50.000Z","size":1506,"stargazers_count":32,"open_issues_count":0,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-23T13:35:52.312Z","etag":null,"topics":["aframe","oculus-quest","vr","webvr"],"latest_commit_sha":null,"homepage":"","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/binzume.png","metadata":{"files":{"readme":"README.en.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":"2018-09-17T07:39:51.000Z","updated_at":"2024-11-02T13:59:59.000Z","dependencies_parsed_at":"2023-11-16T12:25:10.847Z","dependency_job_id":"3201fe1b-8c04-4b63-8913-cc4e3dce4e02","html_url":"https://github.com/binzume/aframe-xylayout","commit_stats":{"total_commits":262,"total_committers":3,"mean_commits":87.33333333333333,"dds":0.007633587786259555,"last_synced_commit":"0175625ae3fe02575d80bfe79193af06e63b64a0"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binzume%2Faframe-xylayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binzume%2Faframe-xylayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binzume%2Faframe-xylayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/binzume%2Faframe-xylayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/binzume","download_url":"https://codeload.github.com/binzume/aframe-xylayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231639032,"owners_count":18404265,"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":["aframe","oculus-quest","vr","webvr"],"created_at":"2024-08-03T03:00:42.148Z","updated_at":"2024-12-28T14:49:09.749Z","avatar_url":"https://github.com/binzume.png","language":"JavaScript","funding_links":[],"categories":["Web-Based Frameworks"],"sub_categories":["Motion Controllers inside Unity!"],"readme":"# xyLayout\n\nFlexbox like layout + UI components for [A-Frame](https://aframe.io/).\n\n- [Flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout) like layout system.\n- Lightweight. (Size of [xylayout-all.min.js](./dist/xylayout-all.min.js) : 35KB)\n- Works with AFrame 1.0 or later.\n\n## Examples\n\nLive demos:\n\n- [Flexbox like layout](https://binzume.github.io/aframe-xylayout/examples/layout.html)\n- [UI Components](https://binzume.github.io/aframe-xylayout/examples/widgets.html) (including multi byte characters support)\n- [Virtual keyboard](https://binzume.github.io/aframe-xylayout/examples/keyboard.html) (Japanese input method is available)\n- [CSS example](https://binzume.github.io/aframe-xylayout/examples/css-style.html)\n\n![Layout example](./examples/layout.png)\n![UI example](./examples/ui.png)\n\n## Usage\n\nInclude [xylayout-all.min.js](./dist/xylayout-all.min.js) after the AFrame.\n\n```html\n\u003cscript src=\"https://aframe.io/releases/1.1.0/aframe.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://binzume.github.io/aframe-xylayout/dist/xylayout-all.min.js\"\u003e\u003c/script\u003e\n...\n\u003ca-xycontainer direction=\"column\" spacing=\"0.1\" padding=\"0.2\"\u003e\n    \u003ca-xylabel value=\"ABC123漢字\" width=\"2\" height=\"0.5\"\u003e\u003c/a-xylabel\u003e\n    \u003ca-xybutton label=\"Button\"\u003e\u003c/a-xybutton\u003e\n    \u003ca-xyselect values=\"abc,123,Foo,Bar\" select=\"1\"\u003e\u003c/a-xyselect\u003e\n    \u003ca-xytoggle value=\"true\"\u003e\u003c/a-xytoggle\u003e\n    \u003ca-xyrange width=\"4\" height=\"0.5\" value=\"20\"\u003e\u003c/a-xyrange\u003e\n    \u003ca-xycontainer direction=\"row\" spacing=\"0.2\"\u003e\n        \u003ca-box color=\"blue\"\u003e\u003c/a-box\u003e\n        \u003ca-box color=\"red\"\u003e\u003c/a-box\u003e\n        \u003ca-box color=\"green\"\u003e\u003c/a-box\u003e\n    \u003c/a-xycontainer\u003e\n\u003c/a-xycontainer\u003e\n```\n\n## Building xylayout-all.min.js\n\n```bash\nnpm install\nnpm run dist\n```\n\n## Primitives\n\n| Primitive     | Components            | Description |\n| ------------- | --------------------- | ----------- |\n| a-xycontainer | xycontainer           | Layout container |\n| a-xylabel     | xylabel               | Text label  |\n| a-xybutton    | xybutton, xylabel     | Button      |\n| a-xytoggle    | xytoggle              | Toggle button |\n| a-xyrange     | xyrange               | Slider      |\n| a-xyselect    | xyselect              | Option selector |\n| a-xyscroll    | xyscroll, xyclipping  | Scroll      |\n| a-xywindow    | xywindow, xycontainer | Window      |\n| a-xyinput     | xyinput, xylabel      | Text input field |\n| a-xykeyboard  | xykeyboard, (xyime)   | Screen keyboard |\n\n- In addition, `xyrect` will also be attached.\n- There are `xyitem`, `xylist` and `xydraggable` as components that are not associated with primitives.\n- The default size of UI objects may be too large, so adjust it by `scale`. \n- See [examples](./examples).\n\n## Components\n\n### xycontainer\n\nA component that layouts 3D objects on the XY plane.\nThis supports [CSS Flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout)-like layout algorithm.\n\n#### Properties:\n\n| Name | Default Value | Description | Values |\n| ---- | ------- | ---- | ------ |\n| direction    | column | Defining the main axis | 'row', 'column' ('horizontal', 'vertical') |\n| justifyItems | start  | layout mode for along the main axis | 'center', 'start', 'end', 'space-between', 'space-around', 'stretch'|\n| alignItems   | none   | layout mode for along the cross axis  |'none', 'center', 'start', 'end', 'stretch'|\n| alignContent | none   | layout mode for lines, if wrap |'none', 'center', 'start', 'end', 'stretch'|\n| spacing      | 0      | spacing between items | number |\n| padding      | 0      | padding around items | number |\n| wrap         | nowrap | wrap mode | wrap, nowrap |\n| reverse      | false  | Reverse the layout direction |  |\n\n### xyitem\n\nA component that controls how child elements are placed in a `xycontainer`.\nThe properties of this component take precedence over the parameters specified in the parent container.\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| align  | align   | none  | see xycontainer.alignItems |\n| grow   | number  | 1     | stretch factor for growing |\n| shrink | number  | 1     | stretch factor for shrinking |\n| fixed  | boolean | false | ignore layout if set to true |\n\n### xyrect\n\nA component that provide element sizes and pivots for `xycontainer`.\nBy default, xycontainer uses the width and height attributes of the element. \nIf width and height do not represent the actual size of the object (e.g. `a-sphere`), we need to be specified in this component.\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| width  | number | -1  | width of element. use size of geometry if set to -1 |\n| height | number | -1  | height of element. use size of geometry if set to -1 |\n| pivot  | vec2   | (0.5, 0.5) | pivot position. bottom left is `0 0`. Most primitive of a-frame have their origin at the center(`0.5 0.5`). |\n\n#### Events:\n\n| name | event.detail | Description |\n| ---- | ------------ | ---- |\n| xyresize | {xyrect} | Resize event |\n\n### xywindow\n\nDraggable window with title bar and close button.\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| title    | string   |      | title of window |\n| closable | boolean  | true | closable |\n| background | boolean  | true | background plane |\n\n### xylabel\n\nAn alternative to the text component.\nThis component will fallback to rendering with Canvas if `value` contains multibyte characters.\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| value         | string |       | text |\n| color         | color  | white | Text color |\n| align         | string | left  | text alignment |\n| wrapCount     | int    | 0     | characters for wrapping |\n| xOffset       | number | 0     | X-offset |\n| zOffset       | number | 0.01  | Z-offset |\n| renderingMode | string | auto  | `canvas`: always use canvas for rendering. `auto`: use [text](https://aframe.io/docs/1.1.0/components/text.html) if possible |\n| resolution    | number | 32    | Canvas height |\n\nsee [text](https://aframe.io/docs/1.1.0/components/text.html)\n\n### xybutton\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| color | color | | button surface color |\n| hoverColor | color | | hover color |\n| labelColor | color | | label color |\n\n#### Events:\n\n| name | event.detail | Description |\n| ---- | ------------ | ---- |\n| click |   | Click event |\n\n### xytoggle\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| value | boolean | false | state of the toggle |\n\nNOTE: This component defines `value` property into the DOM element.\n\n#### Events:\n\n| name | event.detail | Description |\n| ---- | ------------ | ---- |\n| change | {value: boolean} | changed event |\n\n### xyrange\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| min       | number | 0   | min value |\n| max       | number | 100 | max value |\n| value     | number | 0   | current value. between `min` and `max`. |\n| step      | number | 0   | step of value |\n| color1    | color  | white | background color |\n| color2    | color  | #06f  | active color |\n| thumbSize | number | 0.4 | Thumb size |\n| barHeight | number | 0.08 | Height of progress bar |\n\nNOTE: This component defines `value` property into the DOM element.\n\n#### Events:\n\n| name | event.detail | Description |\n| ---- | ------------ | ---- |\n| change | {value: number} | changed event |\n\n### xyselect\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| values | array | []    | choices |\n| select | int   | 0     | selected index for the choices |\n| label  | string |       | Fixed label. If omitted, the selected value is displayed. |\n| toggle | boolean | false | If set to true, the value will toggle with each click instead of displaying the choices |\n\n#### Events:\n\n| name | event.detail | Description |\n| ---- | ------------ | ---- |\n| change | {value: string, index: int} | changed event |\n\n### xylist\n\nList component that supports element recycling.\nIntended to be used as a child element of xyscroll.\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| itemWidth  | number | -1 | width of a item |\n| itemHeight | number | -1 | height of a item |\n\n#### Events:\n\n| name | event.detail | Description |\n| ---- | ------------ | ---- |\n| clickitem | {index: int} | click item event |\n\n#### Methods:\n\nNeeds to be initialized by `xylist.setAdapter()` and `xylist.setContents()`.\nSee [list example](https://binzume.github.io/aframe-xylayout/examples/list.html).\n\n- setAdapter({createFunc, bindFunc}): set creating list elements and binding content.\n- setContents(data, optional_count): set contents of list.\n- setLayout({sizeFunc, targetsFunc, layoutFunc}): set custom layout (optional)\n\n\n### xyscroll\n\nA component that makes element scrollable.\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| scrollbar | boolean | true | Show scrollbar |\n\n#### Events:\n\n| name | event.detail | Description |\n| ---- | ------------ | ---- |\n| xyviewport | [t, b, l, r]| viewport change event |\n\n- Make sure xyscroll has only one child. If there are multiple children, only the first one will be scrolled.\n- This component treats the bottom left as the origin.\n- The scroll bar can only be used vertically.\n### xyclipping\n\nA component that clips UI rendering. Intended to be used with xyscroll.\n\nThe outside of the area represented by xyrect will no longer be rendered. \n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| clipTop    | boolean  | true  | Clip top |\n| clipBottom | boolean  | true  | Clip bottom |\n| clipLeft   | boolean  | false | Clip left |\n| clipRight  | boolean  | false | Clip right |\n| exclude    | selector |       | excluded elements |\n\nKnown issue: It doesn't work properly except with the standard Three.js shader. (e.g. a-text )\n\n\n### xyinput\n\nText input field.\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| value | string |  | text |\n| type | string |  | '', 'number', 'password' |\n| placeholder | string |  | Text for placeholder |\n| caretColor  | color | | Caret color |\n| bgColor  | color | white | Background color |\n\nNOTE: This component defines `value` property into the DOM element.\n\n### xykeyboard\n\nA component displays screen keyboard.\n\n#### Properties:\n\n| Name | Type | Default Value | Description |\n| ---- | ---- | ------------- | ----------- |\n| ime  | boolean | false | Enable Japanese input method |\n\n#### Events:\n\nSends [KeyboardEvent](https://developer.mozilla.org/docs/Web/API/KeyboardEvent) to the focused element.\n\n| Event | Description |\n| ----- | ----------- |\n| keypress | `KeyboardEvent` |\n| keydown | `KeyboardEvent` |\n\n### xyime\n\nA component used internally by `xykeyboard`.\n\n# CSS style component\n\nUsing `style` component, you can apply CSS styles.\n\n```html\n  \u003ca-entity style=\"width:10cm;height:10cm;background-color: #f0f\"\u003e\u003c/a-entity\u003e\n```\n\n- visibility\n- width\n- height\n- background-color\n- background-image\n- border-color\n- border-width\n- border-radius\n- border-style\n- border-top-left-radius\n- border-top-right-radius\n- border-bottom-right-radius\n- border-bottom-left-radius\n\n- transform\n- transition (Not supported in WebXR session)\n- animation (Not supported in WebXR session)\n- pointer-events\n\nxylabel:\n\n- text-align\n- color\n\nxyinput:\n\n- caret-color\n\nxycontainer:\n\n- flex-direction\n- flex-wrap\n- column-gap\n- align-content\n- align-items\n- justify-items\n- justify-content\n\nxyitem:\n\n- position: fixed\n- flex-grow\n- flex-shrink\n\n\n# License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinzume%2Faframe-xylayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbinzume%2Faframe-xylayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinzume%2Faframe-xylayout/lists"}