Class ControlButtonsComponentTouch

ControlButtonsComponentTouch provides customizable touch controls with various icons, colors, and alignment options.

Selector

app-control-buttons-component-touch

Standalone

true

Imports

CommonModule, FontAwesomeModule

Inputs

  • buttons (ButtonTouch[]): Array of button configurations with properties for icon, color, action, and visibility.
  • position ('left' | 'right' | 'middle'): Horizontal alignment of the buttons container. Default is 'left'.
  • location ('top' | 'bottom' | 'center'): Vertical alignment of the buttons container. Default is 'top'.
  • direction ('horizontal' | 'vertical'): Layout direction of buttons. Default is 'horizontal'.
  • buttonsContainerStyle (Partial): Custom styles for the buttons container.
  • showAspect (boolean): Controls the visibility of the buttons container. Default is false.

Methods

  • getAlignmentStyle(): Returns alignment styles based on position, location, and direction inputs.
  • mergeStyles(...styles: any[]): Merges multiple style objects into one for flexible styling.
  • isCustomComponent(comp): Type guard for identifying custom component objects.
  • isFunctionComponent(comp): Type guard for identifying function components.

Example

<app-control-buttons-component-touch
  [buttons]="[
    { name: 'Mute', icon: faMicrophoneSlash, onPress: muteAction, activeColor: 'red' },
    { name: 'Unmute', icon: faMicrophone, onPress: unmuteAction, activeColor: 'green' }
  ]"
  position="right"
  location="bottom"
  direction="vertical"
  [buttonsContainerStyle]="{ backgroundColor: '#333' }"
  [showAspect]="true"
></app-control-buttons-component-touch>

Constructors

constructor

Methods

getAlignmentStyle mergeStyles isCustomComponent isFunctionComponent

Properties

buttons position location direction buttonsContainerStyle showAspect

Constructors

constructor

Methods

getAlignmentStyle

mergeStyles

isCustomComponent

isFunctionComponent

Properties

buttons

buttons: ButtonTouch[] = []

position

position: string = 'left'

location

location: string = 'top'

direction

direction: string = 'horizontal'

buttonsContainerStyle

buttonsContainerStyle: any = {}

showAspect

showAspect: boolean = false

Settings

Member Visibility

On This Page

Constructors
Methods
Properties