Border

@ExperimentalCoroutinesApi()
interface Border : StyleParams

This context interface offers functions to style the border related CSS properties of a component.

It offers two functions to define the border shape itself (border) and the radius (radius) of the border. Both functions come in two variants:

  • one for the styling for all sides / corners at once

  • another for the individual styling of each side / corner

The actual styling of the borders is done within a specific context that the border and borders functions bring directly or via an intermediate context (have a look at BordersContext) into scope: BorderContext.

The styling for the radius is done by the radius function for all radii at once. For styling each corner or pairs of corner you can use the radii function in order to bring a specific context into the scope: RadiiContext

Last but not least there exist a variant for all four previous functions that enables one to define the styling for the different media devices independently.

Functions

border
Link copied to clipboard
js
open fun border(value: BorderContext.() -> Unit)
This function opens the context for defining the border related properties for all media devices.
open fun border(sm: BorderContext.() -> Unit? = null, md: BorderContext.() -> Unit? = null, lg: BorderContext.() -> Unit? = null, xl: BorderContext.() -> Unit? = null)
This function opens the context for defining the border related properties for each media device independently.
borders
Link copied to clipboard
js
open fun borders(value: BordersContext.() -> Unit)
This function opens the intermediate context for defining the border related properties independently for each side for all media devices.
open fun borders(sm: BordersContext.() -> Unit? = null, md: BordersContext.() -> Unit? = null, lg: BordersContext.() -> Unit? = null, xl: BordersContext.() -> Unit? = null)
This function opens the intermediate context for defining the border related properties independently for each side and for each media device.
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
radii
Link copied to clipboard
js
open fun radii(value: RadiiContext.() -> Unit)
This function opens the context for defining the radius related properties for each corner independently for all media devices.
open fun radii(sm: RadiiContext.() -> Unit? = null, md: RadiiContext.() -> Unit? = null, lg: RadiiContext.() -> Unit? = null, xl: RadiiContext.() -> Unit? = null)
This function opens the context for defining the radius related properties for each corner and for each media device independentlyExample call:
radii(
sm = {
// some functions of [RadiiContext] with appropriate values for *all devices*
},
lg = {
// some functions of [RadiiContext] with appropriate values for *all devices*
}
}
radius
Link copied to clipboard
js
open fun radius(value: ScaledValueProperty)
This function sets the radius property for all media devices.
open fun radius(sm: ScaledValueProperty? = null, md: ScaledValueProperty? = null, lg: ScaledValueProperty? = null, xl: ScaledValueProperty? = null)
This function sets the radius property for each media device independently.
toString
Link copied to clipboard
js
open fun toString(): String

Properties

lgProperties
Link copied to clipboard
js
abstract val lgProperties: StringBuilder
collects the properties for large screens
mdProperties
Link copied to clipboard
js
abstract val mdProperties: StringBuilder
collects the properties for middle-sized screens
smProperties
Link copied to clipboard
js
abstract val smProperties: StringBuilder
collects the properties for small screens
xlProperties
Link copied to clipboard
js
abstract val xlProperties: StringBuilder
collects the properties for extra-large screens

Inheritors

BasicParams
Link copied to clipboard