Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/binzume/aframe-xylayout
Flexbox like 2D layout + UI components for A-Frame.
https://github.com/binzume/aframe-xylayout
aframe oculus-quest vr webvr
Last synced: 27 days ago
JSON representation
Flexbox like 2D layout + UI components for A-Frame.
- Host: GitHub
- URL: https://github.com/binzume/aframe-xylayout
- Owner: binzume
- License: mit
- Created: 2018-09-17T07:39:51.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-16T11:02:50.000Z (about 1 year ago)
- Last Synced: 2024-11-10T22:42:28.406Z (about 1 month ago)
- Topics: aframe, oculus-quest, vr, webvr
- Language: JavaScript
- Homepage:
- Size: 1.44 MB
- Stars: 32
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.en.md
- License: LICENSE
Awesome Lists containing this project
- vr-resources - A-Frame-xy-layout, Flexbox like 2D layout + UI components for A-Frame
README
# xyLayout
Flexbox like layout + UI components for [A-Frame](https://aframe.io/).
- [Flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout) like layout system.
- Lightweight. (Size of [xylayout-all.min.js](./dist/xylayout-all.min.js) : 35KB)
- Works with AFrame 1.0 or later.
## Examples
Live demos:
- [Flexbox like layout](https://binzume.github.io/aframe-xylayout/examples/layout.html)
- [UI Components](https://binzume.github.io/aframe-xylayout/examples/widgets.html) (including multi byte characters support)
- [Virtual keyboard](https://binzume.github.io/aframe-xylayout/examples/keyboard.html) (Japanese input method is available)
- [CSS example](https://binzume.github.io/aframe-xylayout/examples/css-style.html)
## Usage
Include [xylayout-all.min.js](./dist/xylayout-all.min.js) after the AFrame.
```html
...
```
## Building xylayout-all.min.js
```bash
npm install
npm run dist
```
## Primitives
| Primitive | Components | Description |
| ------------- | --------------------- | ----------- |
| a-xycontainer | xycontainer | Layout container |
| a-xylabel | xylabel | Text label |
| a-xybutton | xybutton, xylabel | Button |
| a-xytoggle | xytoggle | Toggle button |
| a-xyrange | xyrange | Slider |
| a-xyselect | xyselect | Option selector |
| a-xyscroll | xyscroll, xyclipping | Scroll |
| a-xywindow | xywindow, xycontainer | Window |
| a-xyinput | xyinput, xylabel | Text input field |
| a-xykeyboard | xykeyboard, (xyime) | Screen keyboard |
- In addition, `xyrect` will also be attached.
- There are `xyitem`, `xylist` and `xydraggable` as components that are not associated with primitives.
- The default size of UI objects may be too large, so adjust it by `scale`.
- See [examples](./examples).
## Components
### xycontainer
A component that layouts 3D objects on the XY plane.
This supports [CSS Flexbox](https://developer.mozilla.org/docs/Web/CSS/CSS_Flexible_Box_Layout)-like layout algorithm.
#### Properties:
| Name | Default Value | Description | Values |
| ---- | ------- | ---- | ------ |
| direction | column | Defining the main axis | 'row', 'column' ('horizontal', 'vertical') |
| justifyItems | start | layout mode for along the main axis | 'center', 'start', 'end', 'space-between', 'space-around', 'stretch'|
| alignItems | none | layout mode for along the cross axis |'none', 'center', 'start', 'end', 'stretch'|
| alignContent | none | layout mode for lines, if wrap |'none', 'center', 'start', 'end', 'stretch'|
| spacing | 0 | spacing between items | number |
| padding | 0 | padding around items | number |
| wrap | nowrap | wrap mode | wrap, nowrap |
| reverse | false | Reverse the layout direction | |
### xyitem
A component that controls how child elements are placed in a `xycontainer`.
The properties of this component take precedence over the parameters specified in the parent container.
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| align | align | none | see xycontainer.alignItems |
| grow | number | 1 | stretch factor for growing |
| shrink | number | 1 | stretch factor for shrinking |
| fixed | boolean | false | ignore layout if set to true |
### xyrect
A component that provide element sizes and pivots for `xycontainer`.
By default, xycontainer uses the width and height attributes of the element.
If width and height do not represent the actual size of the object (e.g. `a-sphere`), we need to be specified in this component.
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| width | number | -1 | width of element. use size of geometry if set to -1 |
| height | number | -1 | height of element. use size of geometry if set to -1 |
| 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`). |
#### Events:
| name | event.detail | Description |
| ---- | ------------ | ---- |
| xyresize | {xyrect} | Resize event |
### xywindow
Draggable window with title bar and close button.
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| title | string | | title of window |
| closable | boolean | true | closable |
| background | boolean | true | background plane |
### xylabel
An alternative to the text component.
This component will fallback to rendering with Canvas if `value` contains multibyte characters.
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| value | string | | text |
| color | color | white | Text color |
| align | string | left | text alignment |
| wrapCount | int | 0 | characters for wrapping |
| xOffset | number | 0 | X-offset |
| zOffset | number | 0.01 | Z-offset |
| renderingMode | string | auto | `canvas`: always use canvas for rendering. `auto`: use [text](https://aframe.io/docs/1.1.0/components/text.html) if possible |
| resolution | number | 32 | Canvas height |
see [text](https://aframe.io/docs/1.1.0/components/text.html)
### xybutton
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| color | color | | button surface color |
| hoverColor | color | | hover color |
| labelColor | color | | label color |
#### Events:
| name | event.detail | Description |
| ---- | ------------ | ---- |
| click | | Click event |
### xytoggle
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| value | boolean | false | state of the toggle |
NOTE: This component defines `value` property into the DOM element.
#### Events:
| name | event.detail | Description |
| ---- | ------------ | ---- |
| change | {value: boolean} | changed event |
### xyrange
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| min | number | 0 | min value |
| max | number | 100 | max value |
| value | number | 0 | current value. between `min` and `max`. |
| step | number | 0 | step of value |
| color1 | color | white | background color |
| color2 | color | #06f | active color |
| thumbSize | number | 0.4 | Thumb size |
| barHeight | number | 0.08 | Height of progress bar |
NOTE: This component defines `value` property into the DOM element.
#### Events:
| name | event.detail | Description |
| ---- | ------------ | ---- |
| change | {value: number} | changed event |
### xyselect
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| values | array | [] | choices |
| select | int | 0 | selected index for the choices |
| label | string | | Fixed label. If omitted, the selected value is displayed. |
| toggle | boolean | false | If set to true, the value will toggle with each click instead of displaying the choices |
#### Events:
| name | event.detail | Description |
| ---- | ------------ | ---- |
| change | {value: string, index: int} | changed event |
### xylist
List component that supports element recycling.
Intended to be used as a child element of xyscroll.
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| itemWidth | number | -1 | width of a item |
| itemHeight | number | -1 | height of a item |
#### Events:
| name | event.detail | Description |
| ---- | ------------ | ---- |
| clickitem | {index: int} | click item event |
#### Methods:
Needs to be initialized by `xylist.setAdapter()` and `xylist.setContents()`.
See [list example](https://binzume.github.io/aframe-xylayout/examples/list.html).
- setAdapter({createFunc, bindFunc}): set creating list elements and binding content.
- setContents(data, optional_count): set contents of list.
- setLayout({sizeFunc, targetsFunc, layoutFunc}): set custom layout (optional)
### xyscroll
A component that makes element scrollable.
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| scrollbar | boolean | true | Show scrollbar |
#### Events:
| name | event.detail | Description |
| ---- | ------------ | ---- |
| xyviewport | [t, b, l, r]| viewport change event |
- Make sure xyscroll has only one child. If there are multiple children, only the first one will be scrolled.
- This component treats the bottom left as the origin.
- The scroll bar can only be used vertically.
### xyclipping
A component that clips UI rendering. Intended to be used with xyscroll.
The outside of the area represented by xyrect will no longer be rendered.
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| clipTop | boolean | true | Clip top |
| clipBottom | boolean | true | Clip bottom |
| clipLeft | boolean | false | Clip left |
| clipRight | boolean | false | Clip right |
| exclude | selector | | excluded elements |
Known issue: It doesn't work properly except with the standard Three.js shader. (e.g. a-text )
### xyinput
Text input field.
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| value | string | | text |
| type | string | | '', 'number', 'password' |
| placeholder | string | | Text for placeholder |
| caretColor | color | | Caret color |
| bgColor | color | white | Background color |
NOTE: This component defines `value` property into the DOM element.
### xykeyboard
A component displays screen keyboard.
#### Properties:
| Name | Type | Default Value | Description |
| ---- | ---- | ------------- | ----------- |
| ime | boolean | false | Enable Japanese input method |
#### Events:
Sends [KeyboardEvent](https://developer.mozilla.org/docs/Web/API/KeyboardEvent) to the focused element.
| Event | Description |
| ----- | ----------- |
| keypress | `KeyboardEvent` |
| keydown | `KeyboardEvent` |
### xyime
A component used internally by `xykeyboard`.
# CSS style component
Using `style` component, you can apply CSS styles.
```html
```
- visibility
- width
- height
- background-color
- background-image
- border-color
- border-width
- border-radius
- border-style
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
- transform
- transition (Not supported in WebXR session)
- animation (Not supported in WebXR session)
- pointer-events
xylabel:
- text-align
- color
xyinput:
- caret-color
xycontainer:
- flex-direction
- flex-wrap
- column-gap
- align-content
- align-items
- justify-items
- justify-content
xyitem:
- position: fixed
- flex-grow
- flex-shrink
# License
MIT License