Card

Card with content defined in template

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>