GridTemplateContext

@ExperimentalCoroutinesApi()
class GridTemplateContext(styleParams: StyleParams, target: StringBuilder) : StyleParams

This context class enables to set the template properties for rows, columns and their corresponding automatic variants for dynamically added rows or columns (have a look at Auto placement documentation) in a flexible yet comfortable way.

This class exposes two variants of the repeat function in order so specify the amount of rows or columns of a grid layout. One is specialized for integer based amounts of repetition of row or column appearance rules, the other enables the usage of custom or predefined rules also included as properties of this context, like autoFill for example.

It offers also the minmax function in order to use this as parameter to repeat.

example calls:

// assuming both calls within some [GridTemplateContext]

columns { /* it == GridTemplateContext.() -> Unit */
repeat(9) { "9fr" }
repeat(autoFill) { "9fr" }
}

autoRows { /* it == GridTemplateContext.() -> Unit */
minmax("100px", auto)
}

Constructors

GridTemplateContext
Link copied to clipboard
js
fun GridTemplateContext(styleParams: StyleParams, target: StringBuilder)

Functions

equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
minmax
Link copied to clipboard
js
fun minmax(min: Property, max: Property): String
Function to create the CSS minmax function.
repeat
Link copied to clipboard
js
fun repeat(count: Int, value: GridTemplateContext.() -> Property): String
Function to create the CSS repeat function.
fun repeat(count: Property, value: GridTemplateContext.() -> Property): String
Function to create the CSS repeat function.
toString
Link copied to clipboard
js
open fun toString(): String

Properties

auto
Link copied to clipboard
js
val auto: Property
Predefined value for the minmax() related CSS value and predefined value for the minmax() related CSS value
autoFill
Link copied to clipboard
js
val autoFill: Property
Predefined value for the minmax() related CSS value
autoFit
Link copied to clipboard
js
val autoFit: Property
Predefined value for the minmax() related CSS value
lgProperties
Link copied to clipboard
js
open override val lgProperties: StringBuilder
collects the properties for large screens
maxContent
Link copied to clipboard
js
val maxContent: Property
Predefined value for the minmax() related CSS value and predefined value for the minmax() related CSS value
mdProperties
Link copied to clipboard
js
open override val mdProperties: StringBuilder
collects the properties for middle-sized screens
minContent
Link copied to clipboard
js
val minContent: Property
Predefined value for the minmax() related CSS value and predefined value for the minmax() related CSS value
smProperties
Link copied to clipboard
js
open override val smProperties: StringBuilder
collects the properties for small screens
xlProperties
Link copied to clipboard
js
open override val xlProperties: StringBuilder
collects the properties for extra-large screens