Tabs

Tabs organize content into separate views where only one view can be visible at a time.

Tab Group

Each tab's label is shown in the tab header and the active tab's label is underlined.

tab-group code

Inputs

Name	Type	Default	Description
label	string	undefined	Name of the tab to make active
enabled	boolean	true	When true, tabs can be selected. When false, all tabs are disabled.
tabheader	'above' or 'below'	'above'	Position of tabs is either above or below content panel
tabheight	number	0.15	Height of tabs
width	number	1	Width of content panel in meters
height	number	1	Height of content panel in meters
panelmaterial	Material	Theme panel material (color black)	Panel background material. Set to override with custom material
selectable	InteractiveObjects	undefined	Add to list of objects ray caster can test for overlap

Outputs

Name	Type	Description
change	boolean	Triggered when check state changes. True when checked, false when unchecked

Methods

addtab(tab: FlatUITab) // Allows adding a tab at runtime.

removetab(tab: FlatUITab) // Allows removing a tab at runtime

Tab

Must be declared within a tab-group

tab code

Inputs

Name	Type	Default	Description
label	string	'tab'	Name of the tab
text	string	value of label	Text that appears in the tab. Use this for translated text.
overflow	number	24	Number of characters to display before text is truncated
active	boolean	false	Make tab active and show its content
enabled	boolean	true	When true, tab can be selected. When false, selection is disabled
tabwidth	number	0.5	Width of tab button in meters
buttonmaterial	Material	Theme tab button material (color #505050)	Tab button color. Set to override with custom material
disabledmaterial	Material	Theme disabled material (color #666666)	Disabled color. Set to override with custom material
labelmaterial	Material	Theme label material (color white)	Material used for button text. Set to override with custom material
listselectmaterial	Material	Theme list selected material (color white)	Material used for active indicator. Set to override with custom material

Outputs

Name	Type	Description
change	boolean	Triggered when tab is selected

Example

<flat-ui-tab-group [enabled]="true" [tabheader]="'above'" [width]="tabcontentwidth" [height]="tabcontentheight" [selectable]="selectable" [panelmaterial]="blackmaterial.instance.value">

  <flat-ui-tab [label]="'One'" [active]="true" [tabwidth]="0.2">
    <ng-template let-parent="parent">
      <ngt-group [appendTo]="parent" horizontal-layout [margin]="0.02" [position]="[-tabcontentwidth/2, tabcontentheight/2-0.1, 0.001]">
        <flat-ui-button [text]="'Enabled Button'" [width]="0.8" [selectable]="selectable" (pressed)="button($event)"></flat-ui-button>
      </ngt-group>
    </ng-template>
  </flat-ui-tab>

  <flat-ui-tab [label]="'Two'" [tabwidth]="0.3">
    <ng-template let-parent="parent">
      <ngt-group [appendTo]="parent" horizontal-layout [margin]="0.02" [position]="[-tabcontentwidth/2, tabcontentheight/2-0.1, 0.001]">
        <flat-ui-button [text]="'Disabled Button'" [enabled]="false" [width]="0.8"></flat-ui-button>
      </ngt-group>
    </ng-template>
  </flat-ui-tab>

  <flat-ui-tab [label]="'Disabled'" [tabwidth]="0.4" [enabled]="false">
    <ng-template let-parent="parent">
      <ngt-group [appendTo]="parent" horizontal-layout [margin]="0.02" [position]="[-tabcontentwidth/2, tabcontentheight/2, 0.001]">
        <!-- empty -->
      </ngt-group>
    </ng-template>
  </flat-ui-tab>

  <flat-ui-tab [label]="'Four'" [tabwidth]="0.3">
    <ng-template let-parent="parent">
      <ngt-group [appendTo]="parent" horizontal-layout [margin]="0.02" [position]="[-tabcontentwidth/2, tabcontentheight/2-0.1, 0.001]">
        <flat-ui-button [text]="'Tab four content'" [width]="0.6" [selectable]="selectable"></flat-ui-button>
      </ngt-group>
    </ng-template>
  </flat-ui-tab>

</flat-ui-tab-group>