List
A list of items. List item text is shown in a button. Data can be associated with each list item.
Use buttons below the list to move to first item, move to previous item, move to next item and move to last item.
export interface ListItem {
text: string,
data?: any;
}| Name | Type | Default | Description |
|---|---|---|---|
| list | Array | empty | List of text/data items |
| selectedtext | string | blank | Optional text of currently selected list item to highlight |
| selectedindex | number | -1 | Alternatively, optional index of currently selected list item to highlight |
| margin | number | 0.03 | Space around all buttons |
| rowsize | number | 0.1 | Height of each list button |
| rowcount | number | 7 | Number of list buttons to display before pagination is needed |
| rowspacing | number | 0.01 | Space between buttons |
| pagebuttonsize | number | 0.1 | Size of pagination buttons |
| showpaging | boolean | true | When true, pagination is displayed. When false, pagination is hidden |
| enablehover | boolean | false | When true, buttons show outline on hover. When false, hover is disabled |
| width | number | 1 | Width of panel in meters |
| height | number | 1 | Height of panel in meters |
| popupmaterial | Material | Theme popup material (color gray) | Popup panel background color. Set to override custom material |
| listselectedmaterial | Material | Theme list selected material (color white) | Selected indicator color. Set to override custom material |
| outlinematerial | LineBasicMaterial | Theme outline material (color white) | Material used for button outline. Set to override with custom material |
| selectable | InteractiveObjects | undefined | Add to list of objects ray caster can test for overlap |
| geometry | BufferGeoemtry | Rounded rectangle shape | Override to provide your own geometry for list background |
| Name | Type | Description |
|---|---|---|
| change | number | Triggered when list item selected. Event contains new ListItem (text and data) |
| close | void | Triggered when interaction outside of picker |
<flat-ui-list *ngIf="input.showlist" [list]="input.list" [selectedtext]="input.method.text"
[position]="input.position" [rotation]="input.rotation" [selectable]="selectable"
(change)="input.method.text = $event.text;input.showlist=false" (close)="input.showlist=false;input.closeinput()">
</flat-ui-list>