Stack Panel

Class: FxStackPanel · Tag: <fx-stack-panel>

The <fx-stack-panel> component is a core structural layout element modeled after the WPF/Avalonia StackPanel. It arranges nested child elements sequentially in a single line, either vertically or horizontally, simplifying HMI console layout construction.

Installation

import '@salsafx/ui';

Interactive preview of the main variants:

Vertical

Horizontal

Basic Usage

1. Vertical Stack (Default)

Arranges components vertically with specified spacing:

<fx-stack-panel
    spacing="16px"
    padding="20px"
>
    <fx-push-button label="System Start" background-color="#06b6d4"></fx-push-button>
    <fx-push-button label="Calibration" background-color="#3b82f6"></fx-push-button>
    <fx-push-button label="Emergency Stop" background-color="#ef4444"></fx-push-button>
</fx-stack-panel>

2. Horizontal Stack

Arranges components horizontally:

<fx-stack-panel
    orientation="horizontal"
    spacing="24px"
>
    <fx-push-button
        label="Power"
        background-color="#06b6d4"
        shape="round"
    ></fx-push-button>
    <fx-push-button
        label="Ignition"
        background-color="#fdba74"
        shape="round"
    ></fx-push-button>
    <fx-push-button
        label="E-Stop"
        background-color="#ef4444"
        shape="round"
    ></fx-push-button>
</fx-stack-panel>

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
`orientation`	`orientation`	`String`	`"vertical"`	Flow direction of the stacked elements (`"vertical"` or `"horizontal"`).
`spacing`	`spacing`	`String`	`"0px"`	Spacing gap between child elements.
`alignX`	`align-x`	`String`	`"center"`	Horizontal content alignment (`"left"`, `"center"`, `"right"`, `"stretch"`).
`alignY`	`align-y`	`String`	`"center"`	Vertical content alignment (`"top"`, `"center"`, `"bottom"`, `"stretch"`).
`width`	`width`	`String`	`""`	Optional width override.
`height`	`height`	`String`	`""`	Optional height override.
`padding`	`padding`	`String`	`""`	Padding inside the panel.

Slots

Name	Description
—	Default slot for nested children to stack.

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxContainerElement
    class FxContentElement
    class FxStackPanel

    FxElement <|-- FxContainerElement
    FxContainerElement <|-- FxContentElement
    FxContentElement <|-- FxStackPanel