components/dev.fritz2.components/StackComponent

StackComponent

abstract class StackComponent : Component<Div> , EventProperties<HTMLDivElement>

This base component class for stacking components offer some configuration properties.

It enables to configure the following features:

switching the default order of rendering (top -> bottom to bottom -> top for stackUps and left -> right to right -> left for lineUps)
defining the spacing between the items. For details have a look at dev.fritz2.styling.theme.Theme.space
adding arbitrary items like HTML elements or other components

You can combine both kind of stacking components to realize a simple layou for example:

`lineUp` for structure "menu" and "content" parts
`stackUp` for alignment of menu items

       <- lineUp                                  ->
    ^  +----------+--------------------------------+
    |  | Menu:    |  ** Item 2 **                  |
    S  | - Item1  |                                |
    t  | -*Item2* |  This is the content of Item 2 |
    a  | - Item3  |                                |
    c  | - Item4  |                                |
    k  |          |                                |
    U  |          |                                |
    p  |          |                                |
    |  |          |                                |
    v  +----------+--------------------------------+

This could be expressed via composition in such a way:

lineUp {
    items {
        // Stack *two* items horizontally:
        // Menu on the left side
        stackUp {
            items {
                // Heading and menu items vertical stacked
                h1 {+"Menu:"}
                ul {
                    li { +"Item1" }
                    li { +"Item2" }
                    li { +"Item3" }
                    li { +"Item4" }
                }
            }
        }
        // Content on the right side
        box {
            h1 { +"Item 2" }
            p { +"This is the content of Item 2" }
        }
    }
}