Tabs - IRobot1/ng3-vr-examples GitHub Wiki

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

image

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>
⚠️ **GitHub.com Fallback** ⚠️