Card - IRobot1/ng3-vr-examples GitHub Wiki

Card with content defined in template

image

Card supports optional dragging

Code

Inputs

Name Type Default Description
width number 1 Width of card in meters
height number 1 Height of card in meters
cardtype string 'card' Optional. Type name for the card. For example, task, bug or story
data any undefined Optional. Data to associated with the card
allowdragging boolean true When true, the card can be dragged. When false, dragging is disabled
showhover boolean true When true, outline appears around card when hovering. When false, hovering is disabled
cardmaterial Material Theme panel material (color black) Panel color. Set to override with 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 button geometry

Outputs

None

Examples

<flat-ui-card [width]="width" [height]="cardheight" [selectable]="selectable" [data]="task">
  <ng-template #card let-parent="parent">
    <ngt-group [appendTo]="parent" [position]="[0, 0, 0.001]">
      <flat-ui-divider [width]="width-listmargin*2" [position]="[0, cardheight/2-0.01, 0]" [dividermaterial]="task.type.material"></flat-ui-divider>

      <flat-ui-material-icon [text]="task.type.icon" [labelmaterial]="task.type.material" [position]="[-width/2+0.05, cardheight/2-0.08, 0]">
      </flat-ui-material-icon>

      <flat-ui-label [text]="task.title" [width]="width-listmargin" [position]="[0.08, cardheight/2-0.08, 0]"></flat-ui-label>
      <flat-ui-avatar [radius]="0.05" [initials]="task.owner.initials" [position]="[width/2-0.1, cardheight/2-0.08, 0]"></flat-ui-avatar>

      <flat-ui-label [text]="task.description" [width]="width-0.01" [aligny]="'top'" [position]="[0, cardheight/2-0.15, 0]"></flat-ui-label>
    </ngt-group>
  </ng-template>
</flat-ui-card>
⚠️ **GitHub.com Fallback** ⚠️