Class ControlButtonsAltComponent

ControlButtonsAltComponent provides configurable button controls with custom icons, colors, and positioning options.

Selector

app-control-buttons-alt-component

Standalone

true

Imports

CommonModule, FontAwesomeModule

Inputs

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

Methods

  • getAlignmentStyle(): Returns alignment styles based on position, location, and direction.
  • getContainerStyle(): Combines container styles, alignment styles, and visibility settings.
  • getButtonStyle(button: AltButton): Applies style to each button based on its properties.
  • getTextStyle(button: AltButton): Sets text styles for button labels.
  • isCustomComponent(comp): Type guard to identify custom component objects.
  • isFunctionComponent(comp): Type guard to identify function components.

Example

<app-control-buttons-alt-component
 [buttons]="[
   { name: 'Pause', icon: faPause, onPress: pauseAction, activeColor: 'blue' },
   { name: 'Play', icon: faPlay, onPress: playAction, color: 'green' }
 ]"
[position]="'middle'"
[location]="'bottom'"
[direction]="'vertical'"
[buttonsContainerStyle]="{ backgroundColor: '#333' }"
[showAspect]="true">
</app-control-buttons-alt-component>

Constructors

constructor

Methods

getAlignmentStyle getContainerStyle getButtonStyle getTextStyle isCustomComponent isFunctionComponent

Properties

buttons position location direction buttonsContainerStyle showAspect styles

Constructors

constructor

Methods

getAlignmentStyle

getContainerStyle

getButtonStyle

  • getButtonStyle(button): {
        backgroundColor: string;
        display: string;
        alignItems: string;
        padding: string;
        borderRadius: string;
        marginLeft: string;
        marginRight: string;
        cursor: string;
        flexDirection?: string;
    }

  • Parameters

    Returns {
        backgroundColor: string;
        display: string;
        alignItems: string;
        padding: string;
        borderRadius: string;
        marginLeft: string;
        marginRight: string;
        cursor: string;
        flexDirection?: string;
    }

    • backgroundColor: string
    • display: string
    • alignItems: string
    • padding: string
    • borderRadius: string
    • marginLeft: string
    • marginRight: string
    • cursor: string
    • OptionalflexDirection?: string

getTextStyle

isCustomComponent

isFunctionComponent

Properties

buttons

buttons: AltButton[] = []

position

position: "left" | "right" | "middle" = 'left'

location

location: "center" | "bottom" | "top" = 'top'

direction

direction: "horizontal" | "vertical" = 'horizontal'

buttonsContainerStyle

buttonsContainerStyle: any = {}

showAspect

showAspect: boolean = false

styles

styles: {
    container: {
        marginTop: string;
        marginBottom: string;
        zIndex: number;
    };
    buttonContainer: {
        display: string;
        alignItems: string;
        padding: string;
        borderRadius: string;
        marginLeft: string;
        marginRight: string;
        cursor: string;
    };
    verticalButton: {
        flexDirection: string;
    };
    buttonText: {
        fontSize: string;
        marginTop: string;
    };
} = ...

Settings

Member Visibility

On This Page

Constructors
Methods
Properties