GridContext

@ExperimentalCoroutinesApi()
class GridContext(styleParams: StyleParams, selfAlignment: SelfAlignment, target: StringBuilder) : StyleParams, SelfAlignment

This context interface offers functions to stylegrid layout(https://developer.mozilla.org/en/docs/Web/CSS/CSS_Grid_Layout)-cells / child elements.

It does not configure the grid template / container itself. This should be done by GridLayout functions!

This interface offers all the inherited functions of SelfAlignment that corresponds to the CSS alignment module.

This class offers methods for binding a cell or a group of cells to the area template of the grid layout. This is done in two general ways:

  • provide specific names for a cell via the area function

  • provide patterns with start and end values referring to either names or counting values. This can be done by column or row.

You can define the position of a cell within the grid layout as follows:

// always need a component as child element like ``box``

// named cell approach
box({
grid { /* it == GridContext.() */
area { "CONTENT" }
}
})

// pattern approach (
box({
grid { /* it == GridContext.() */
row {
start { "CONTENT".start } // start at the beginning of the "content" area
end { "CONTENT".end } // occupy all of the "content" area
}
column {
start { "0" } // start at the beginning of the columns
end { span(2) } // occupy two columns
}
}
})

Parameters

selfAlignment

common alignment functions for child elements

styleParams

basic context scope interface

target

the defined output StringBuilder to write the generated CSS into

Constructors

GridContext
Link copied to clipboard
js
fun GridContext(styleParams: StyleParams, selfAlignment: SelfAlignment, target: StringBuilder)
basic context scope interface

Functions

alignSelf
Link copied to clipboard
js
open override fun alignSelf(value: SelfAlignItemsValues.() -> SelfAlignItemProperty)
This function sets the self-align propertyExample call:
self-align { flexStart }
area
Link copied to clipboard
js
fun area(value: () -> Property)
This function is used to set the name of an area part of the grid layout via the grid-area property.
column
Link copied to clipboard
js
fun column(value: GridRowColumnContext.() -> Unit)
This function is used to define the position within the columns of a grid for a child element using the grid-column property.
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
row
Link copied to clipboard
js
fun row(value: GridRowColumnContext.() -> Unit)
This function is used to define the position within the rows of a grid for a child element using the grid-row property.
toString
Link copied to clipboard
js
open fun toString(): String

Properties

lgProperties
Link copied to clipboard
js
open override val lgProperties: StringBuilder
collects the properties for large screens
mdProperties
Link copied to clipboard
js
open override val mdProperties: StringBuilder
collects the properties for middle-sized screens
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