Layout

@ExperimentalCoroutinesApi()

This context interface offers different functions to define or affect the fundamental layout of the whole page, a container within the page or an element itself.

There are always two variants of the same function; one for applying to all media devices at once and another to specify the functionality for each media device independently.

Functions

css

open fun css(value: Property): StringBuilder

This function passes raw CSS code into the underlying model without modification by fritz2 for all media devices at once.

open fun css(sm: Property? = null, md: Property? = null, lg: Property? = null, xl: Property? = null)

This function passes raw CSS code into the underlying model without modification by fritz2 for each media device independently.

display

open fun display(value: DisplayValues.() -> DisplayProperty)

This function sets the display property of a component for all media devices.

open fun display(sm: DisplayValues.() -> DisplayProperty? = null, md: DisplayValues.() -> DisplayProperty? = null, lg: DisplayValues.() -> DisplayProperty? = null, xl: DisplayValues.() -> DisplayProperty? = null)

This function sets the display property of a component for each media device independently.

flex

open fun flex(value: FlexItemContext.() -> Unit)

This function opens the context for defining the flex layout related properties for a flex layout child component for all media devices.

open fun flex(sm: FlexItemContext.() -> Unit? = null, md: FlexItemContext.() -> Unit? = null, lg: FlexItemContext.() -> Unit? = null, xl: FlexItemContext.() -> Unit? = null)

This function opens the context for defining the flex layout related properties for a flex layout child component for all media devices.

grid

open fun grid(value: GridContext.() -> Unit)

This function opens the context for defining the grid layout related properties for a grid layout child component for all media devices.

open fun grid(sm: GridContext.() -> Unit? = null, md: GridContext.() -> Unit? = null, lg: GridContext.() -> Unit? = null, xl: GridContext.() -> Unit? = null)

This function opens the context for defining the grid layout related properties for a grid layout child component for each media device independently.

height

open fun height(value: SizesProperty)

This function sets the height property of a component for all media devices.

open fun height(sm: SizesProperty? = null, md: SizesProperty? = null, lg: SizesProperty? = null, xl: SizesProperty? = null)

This function sets the height property of a component for each media device independently.

maxHeight

open fun maxHeight(value: SizesProperty)

This function sets the max-height property of a component for all media devices.

open fun maxHeight(sm: SizesProperty? = null, md: SizesProperty? = null, lg: SizesProperty? = null, xl: SizesProperty? = null)

This function sets the max-height property of a component for all media devices.

maxWidth

open fun maxWidth(value: SizesProperty)

This function sets the max-width property of a component for all media devices.

open fun maxWidth(sm: SizesProperty? = null, md: SizesProperty? = null, lg: SizesProperty? = null, xl: SizesProperty? = null)

This function sets the max-width property of a component for all media devices.

minHeight

open fun minHeight(value: SizesProperty)

This function sets the min-height property of a component for all media devices.

open fun minHeight(sm: SizesProperty? = null, md: SizesProperty? = null, lg: SizesProperty? = null, xl: SizesProperty? = null)

This function sets the min-height property of a component for all media devices.

minWidth

open fun minWidth(value: SizesProperty)

This function sets the min-width property of a component for all media devices.

open fun minWidth(sm: SizesProperty? = null, md: SizesProperty? = null, lg: SizesProperty? = null, xl: SizesProperty? = null)

This function sets the min-width property of a component for all media devices.

overflow

open fun overflow(value: OverflowValues.() -> OverflowProperty)

This function sets the overflow property of a component for all media devices.

open fun overflow(sm: OverflowValues.() -> OverflowProperty? = null, md: OverflowValues.() -> OverflowProperty? = null, lg: OverflowValues.() -> OverflowProperty? = null, xl: OverflowValues.() -> OverflowProperty? = null)

This function sets the overflow property of a component for each media device independently.

overflowX

open fun overflowX(value: OverflowXValues.() -> OverflowProperty)

This function sets the overflow-x property of a component for all media devices.

open fun overflowX(sm: OverflowXValues.() -> OverflowProperty? = null, md: OverflowXValues.() -> OverflowProperty? = null, lg: OverflowXValues.() -> OverflowProperty? = null, xl: OverflowXValues.() -> OverflowProperty? = null)

This function sets the overflow-x property of a component for all media devices.

overflowY

open fun overflowY(value: OverflowYValues.() -> OverflowProperty)

This function sets the overflow-y property of a component for all media devices.

open fun overflowY(sm: OverflowYValues.() -> OverflowProperty? = null, md: OverflowYValues.() -> OverflowProperty? = null, lg: OverflowYValues.() -> OverflowProperty? = null, xl: OverflowYValues.() -> OverflowProperty? = null)

This function sets the overflow-y property of a component for all media devices.

size

open fun size(value: SizesProperty)

This convenience function sets the width and height of a component at once for all media devices.

open fun size(sm: SizesProperty? = null, md: SizesProperty? = null, lg: SizesProperty? = null, xl: SizesProperty? = null)

This convenience function sets the width and height of a component at once for all media devices.

verticalAlign

open fun verticalAlign(value: VerticalAlignValues.() -> VerticalAlignProperty)

This function sets the vertical-align property of a component for all media devices.

open fun verticalAlign(sm: VerticalAlignValues.() -> VerticalAlignProperty? = null, md: VerticalAlignValues.() -> VerticalAlignProperty? = null, lg: VerticalAlignValues.() -> VerticalAlignProperty? = null, xl: VerticalAlignValues.() -> VerticalAlignProperty? = null)

This function sets the vertical-align property of a component for each media device independently.

width

open fun width(value: SizesProperty)

This function sets the width property of a component for all media devices.

open fun width(sm: SizesProperty? = null, md: SizesProperty? = null, lg: SizesProperty? = null, xl: SizesProperty? = null)

This function sets the width property of a component for each media device independently.

Properties

lgProperties

abstract val lgProperties: StringBuilder

collects the properties for large screens

mdProperties

abstract val mdProperties: StringBuilder

collects the properties for middle-sized screens

smProperties

abstract val smProperties: StringBuilder

collects the properties for small screens

xlProperties

abstract val xlProperties: StringBuilder

collects the properties for extra-large screens

Layout

Functions

Properties

Inheritors