Card Actions - IRobot1/ng3-vr-examples GitHub Wiki

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

image

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