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" }
}
}
}

Constructors

StackComponent
Link copied to clipboard
js
fun StackComponent()

Types

Companion
Link copied to clipboard
js
object Companion

Functions

equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
render
Link copied to clipboard
js
open override fun render(context: RenderContext, styling: BoxParams.() -> Unit, baseClass: StyleClass?, id: String?, prefix: String): Div
Central method that should do the actual rendering of a component.
toString
Link copied to clipboard
js
open fun toString(): String

Properties

events
Link copied to clipboard
js
open override val events: ComponentProperty<WithEvents<HTMLDivElement>.() -> Unit>
This property enables the client to access all events offered by the underlying HTML element.
items
Link copied to clipboard
js
val items: ComponentProperty<RenderContext.() -> Unit>
reversed
Link copied to clipboard
js
val reversed: ComponentProperty<Boolean>
spacing
Link copied to clipboard
js
val spacing: ComponentProperty<ScaledValueProperty>
stackStyles
Link copied to clipboard
js
abstract val stackStyles: Style<FlexParams>

Inheritors

StackUpComponent
Link copied to clipboard
LineUpComponent
Link copied to clipboard