Card Actions

When hovering over card, action buttons that appear around the card. Auto hide after delay or when one is clicked.

Code

Actions can be defined in code or declaratively using <

export interface CardAction {
  position: NgtTriple;
  materialicon: string;
  label?: string;
  data?: any;
}

Inputs

Name	Type	Default	Description
actions	Array	empty	List of card actions
buttonwidth	number	0.1	Width of button in meters
buttonheight	number	0.1	Height of button in meters
iconsize	number	0.1	Size of icon within the button
showlabels	boolean	false	Show label under the button
closedelay	number	2	Seconds after which the buttons are hidden
selectable	InteractiveObjects	undefined	Add to list of objects ray caster can test for overlap

Outputs

Name	Type	Description
action	CardAction	Triggered when button clicked

Examples

<flat-ui-card-actions [actions]="actions" [showlabels]="true" [selectable]="selectable"
                      [buttonwidth]="buttonwidth" [buttonheight]="buttonheight"
                      (action)="doaction('actions', $event)">
  <flat-ui-card-action [position]="[-cardsize/2-buttonwidth/2-padding, cardsize/2-buttonheight*0.5, 0]" [materialicon]="'open_with'" [label]="'Translate'">
  </flat-ui-card-action>
  <flat-ui-card-action [position]="[-cardsize/2-buttonwidth/2-padding, cardsize/2-buttonheight*1.5-padding, 0]" [materialicon]="'sync'" [label]="'Rotate'">
  </flat-ui-card-action>
  <flat-ui-card-action [position]="[-cardsize/2-buttonwidth/2-padding, cardsize/2-buttonheight*2.5-padding*2, 0]" [materialicon]="'zoom_out_map'" [label]="'Scale'">
  </flat-ui-card-action>
</flat-ui-card-actions>