ControlButtonsComponentTouch provides customizable touch controls with various icons, colors, and alignment options.
app-control-buttons-component-touch
true
CommonModule, FontAwesomeModule
buttons
position
location
direction
buttonsContainerStyle
showAspect
getAlignmentStyle()
mergeStyles(...styles: any[])
isCustomComponent(comp)
isFunctionComponent(comp)
<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> Copy
<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>
Rest
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
(PartialshowAspect
(boolean): Controls the visibility of the buttons container. Default is false.Methods
getAlignmentStyle()
: Returns alignment styles based onposition
,location
, anddirection
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