styling/dev.fritz2.styling.params/RadiiContext

RadiiContext

@ExperimentalCoroutinesApi

class RadiiContext(val styleParams: StyleParams, target: StringBuilder) : StyleParams

This context class is used to provide a scope for styling the four radii of a border independently.

It offers the four functions topLeft, topRight, bottomRight and bottomLeft to set the radius property for each corner independently. There are also convenience functions to handle the radii of one side at once, like right and left or top and bottom. Those are most useful for pairwise usage of course.

The theme offers predefined values as ScaledValueProperty via its dev.fritz2.styling.theme.Theme.radii property.

This usage enables border styling for each side like this:

radii { /* it == RadiiContext.() -> Property */
        topLeft { small } // predefined values only for _circles_!
        topRight { small }
        bottomRight { big }
        bottomLeft { "1em 2em" } // provide a custom property for _ellipsis_
    }
    // or with a pair of convenience functions:
    radii {
        top { small }
        bottom { large }
    }

Parameters

styleParams

basic context scope interface

target

the defined output StringBuilder to write the generated CSS into

Constructors

RadiiContext

fun RadiiContext(styleParams: StyleParams, target: StringBuilder)

Functions

bottom

fun bottom(value: ScaledValueProperty)

This convenience function enables the definition of the border radius for the bottom left and bottom right corners of a block at once via the border-bottom-left-radius and border-bottom-right-radius CSS properties.

bottomLeft

fun bottomLeft(value: ScaledValueProperty)

This function enables the definition of the border radius for the bottom left corner of a block via the border-bottom-left-radius CSS property.

bottomRight

fun bottomRight(value: ScaledValueProperty)

This function enables the definition of the border radius for the bottom right corner of a block via the border-bottom-right-radius CSS property.

left

fun left(value: ScaledValueProperty)

This convenience function enables the definition of the border radius for the top left and bottom left corners of a block at once via the border-top-left-radius and border-bottom-left-radius CSS properties.

right

fun right(value: ScaledValueProperty)

This convenience function enables the definition of the border radius for the top right and bottom right corners of a block at once via the border-top-right-radius and border-bottom-right-radius CSS properties.

top

fun top(value: ScaledValueProperty)

This convenience function enables the definition of the border radius for the top left and top right corners of a block at once via the border-top-left-radius and border-top-right-radius CSS properties.