Package dev.fritz2.styling.params

Types

AlignContentProperty
Link copied to clipboard
js
typealias AlignContentProperty = Property

Alias for specific content alignment properties.

AlignContentValues
Link copied to clipboard
js
object AlignContentValues : PropertyValues
Predefined values for alignment of content Central Alignment Contexts inspired by https://drafts.csswg.
AlignItemsProperty
Link copied to clipboard
js
typealias AlignItemsProperty = Property

Alias for specific item alignment properties.

AlignItemsValues
Link copied to clipboard
js
object AlignItemsValues : PropertyValues
Predefined values for alignment of items Central Alignment Contexts inspired by https://drafts.csswg.
Alignment
Link copied to clipboard
js
interface Alignment : StyleParams
This context interface offers functions to align or justify elements.
AreaName
Link copied to clipboard
js
typealias AreaName = String

Alias for the named areas of a grid layout.

AutoFlowProperty
Link copied to clipboard
js
typealias AutoFlowProperty = Property

Alias for the specific AutoFlowValues properties

AutoFlowValues
Link copied to clipboard
js
object AutoFlowValues : PropertyValues
Predefined values for the grid-auto-flow property.
Background
Link copied to clipboard
js
interface Background : StyleParams
This context interface offers functions to style the background related CSS properties of a component.
BackgroundAttachmentProperty
Link copied to clipboard
js
typealias BackgroundAttachmentProperty = Property
BackgroundAttachments
Link copied to clipboard
js
object BackgroundAttachments
Predefined values for the background-attachment property.
BackgroundBlendModeProperty
Link copied to clipboard
js
typealias BackgroundBlendModeProperty = Property

Alias for the specific BackgroundBlendModes properties

BackgroundBlendModes
Link copied to clipboard
js
object BackgroundBlendModes
Predefined values for the background-blend-mode property.
BackgroundBoxProperty
Link copied to clipboard
js
typealias BackgroundBoxProperty = Property
BackgroundBoxValues
Link copied to clipboard
js
object BackgroundBoxValues
Predefined values for the background-origin and background-clip properties.
BackgroundContext
Link copied to clipboard
js
class BackgroundContext(styleParams: StyleParams, target: StringBuilder) : StyleParams
This context class enables the definition of background related styling facilities.
BackgroundPositionContext
Link copied to clipboard
js
class BackgroundPositionContext(values: MutableList<Property>)
Nested context class to enable separate definitions of horizontal and vertical background positioning for the background-position property.
BackgroundPositionProperty
Link copied to clipboard
js
typealias BackgroundPositionProperty = Property

Alias for the specific BackgroundPositions properties

BackgroundPositions
Link copied to clipboard
js
object BackgroundPositions
Predefined values for the background-position property.
BackgroundRepeatProperty
Link copied to clipboard
js
typealias BackgroundRepeatProperty = Property

Alias for the specific BackgroundRepeats properties

BackgroundRepeats
Link copied to clipboard
js
object BackgroundRepeats
Predefined values for the background-repeat property.
BackgroundSizeContext
Link copied to clipboard
js
class BackgroundSizeContext(values: MutableList<Property>)
Nested context class to enable separate definitions of horizontal and vertical background sizing for the background-size property.
BackgroundSizeProperty
Link copied to clipboard
js
typealias BackgroundSizeProperty = Property

Alias for the specific BackgroundSizes properties

BackgroundSizes
Link copied to clipboard
js
object BackgroundSizes
Predefined values for the background-size property.
BasicComponent
Link copied to clipboard
js
typealias BasicComponent<E> = (String?, String?, E.() -> Unit) -> E

Typealias for the common function signature of [RenderContext. methods. It is used for defining a generic extension method for styling basic HTML elements.

BasicParams
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface BasicParams : Space, Color, Border, Typo, Background, Position, Shadow, Layout, PseudoClasses, PseudoElements
interface combining all the basic style-parameters
Border
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface Border : StyleParams
This context interface offers functions to style the border related CSS properties of a component.
BorderContext
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
class BorderContext(widthKey: String, styleKey: String, colorKey: String, styleParams: StyleParams, target: StringBuilder) : StyleParams
This context class enables the definition of the common border styling properties like width, style and color.
BordersContext
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
class BordersContext(styleParams: StyleParams, target: StringBuilder) : StyleParams
This context class acts as an intermediate context to style the four sides of a border independently.
BorderStyleProperty
Link copied to clipboard
js
typealias BorderStyleProperty = Property

Alias for specific BorderStyleValues properties.

BorderStyleValues
Link copied to clipboard
js
object BorderStyleValues : PropertyValues
Predefined values for the border-style property.
BoxParams
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface BoxParams : FlexParams, GridParams
interface combining flex-style-parameters with grid and basic style-parameters
Color
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface Color : StyleParams
This context interface offers functions to style the color related CSS properties of a component.
ColorProperty
Link copied to clipboard
js
typealias ColorProperty = Property

alias for colors

DirectionProperty
Link copied to clipboard
js
typealias DirectionProperty = Property

Alias for the specific DirectionValues properties.

DirectionValues
Link copied to clipboard
js
object DirectionValues : PropertyValues
Predefined values for the flex-direction property.
DisplayProperty
Link copied to clipboard
js
typealias DisplayProperty = Property

Alias for specific DisplayValues properties.

DisplayValues
Link copied to clipboard
js
object DisplayValues : PropertyValues
Predefined values for the display property.
FlexBasisProperty
Link copied to clipboard
js
typealias FlexBasisProperty = Property

Alias for specific FlexBasisValues properties.

FlexBasisValues
Link copied to clipboard
js
object FlexBasisValues : PropertyValues
Predefined values for the flex-basis property.
Flexbox
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface Flexbox : StyleParams, Alignment
This context interface offers functions to styleflexbox(https://developer.mozilla.org/en/docs/Learn/CSS/CSS_layout/Flexbox)-layouts.
FlexItemContext
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
class FlexItemContext(styleParams: StyleParams, selfAlignment: SelfAlignment, target: StringBuilder) : StyleParams, SelfAlignment
This context interface offers functions to style elements of a flex layout.
FlexParams
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface FlexParams : BasicParams, Flexbox
interface combining flex-style-parameters with the basic style-parameters
FontStyleProperty
Link copied to clipboard
js
typealias FontStyleProperty = Property

Alias for specific FontStyleProperty properties.

FontStyles
Link copied to clipboard
js
object FontStyles : PropertyValues
Predefined values for the font-style property.
FontWeightProperty
Link copied to clipboard
js
typealias FontWeightProperty = Property

Alias for specific FontWeightProperty properties.

FontWeights
Link copied to clipboard
js
object FontWeights : PropertyValues
Predefined values for the font-weight property.
GridAreaContext
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
class GridAreaContext(styleParams: StyleParams, target: StringBuilder) : StyleParams
This context class is responsible for defining the grid area layout as comfortable and safe as possible.
GridContext
Link copied to clipboard
js
@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.
GridLayout
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface GridLayout : StyleParams, Alignment
This context interface offers functions to style the container component for grid(https://developer.mozilla.org/en/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)-layouts.
GridParams
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface GridParams : BasicParams, GridLayout
interface combining grid-style-parameters with the basic style-parameters
GridRowColumnContext
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
class GridRowColumnContext(keyFragment: String, styleParams: StyleParams, target: StringBuilder) : StyleParams
GridTemplateContext
Link copied to clipboard
js
@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.
JustifyContentProperty
Link copied to clipboard
js
typealias JustifyContentProperty = Property

Alias for specific justification properties.

JustifyContentValues
Link copied to clipboard
js
object JustifyContentValues : PropertyValues
Predefined values for justification Central Alignment Contexts inspired by https://drafts.csswg.
Layout
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface Layout : StyleParams
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.
OverflowBaseValues
Link copied to clipboard
js
open class OverflowBaseValues(key: String) : PropertyValues
Predefined common values for the overflow related properties.
OverflowProperty
Link copied to clipboard
js
typealias OverflowProperty = Property

Alias for specific OverflowBaseValues properties.

OverflowValues
Link copied to clipboard
js
object OverflowValues : OverflowBaseValues
Predefined values for the overflow property.
OverflowXValues
Link copied to clipboard
js
object OverflowXValues : OverflowBaseValues
Predefined values for the overflow-x property.
OverflowYValues
Link copied to clipboard
js
object OverflowYValues : OverflowBaseValues
Predefined values for the overflow-y property.
Position
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface Position : StyleParams
This context interface offers two functions to specify the positional appearance of an element.
PositionContext
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
class PositionContext(styleParams: StyleParams, target: StringBuilder) : StyleParams
This context class acts as an intermediate context to set the position of an element and to specify the actual positioning concerning the sides distances too.
PositioningContext
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
class PositioningContext(styleParams: StyleParams, target: StringBuilder) : StyleParams
This context class enables the definition of positioning properties for the four directions of top, right, bottom and left and convenience functions for defining the horizontal or vertical aspects at once.
PropertyValues
Link copied to clipboard
js
interface PropertyValues
base-interface for all enum base properties
PseudoClasses
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface PseudoClasses : StyleParams
PseudoElements
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface PseudoElements : StyleParams
RadiiContext
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
class RadiiContext(styleParams: StyleParams, target: StringBuilder) : StyleParams
This context class is used to provide a scope for styling the four radii of a border independently.
ScaledValueProperty
Link copied to clipboard
js
typealias ScaledValueProperty = ScaledValue.() -> Property

shortcut for functions that derive a value from ScaledValue defined at the Theme

SelfAlignItemProperty
Link copied to clipboard
js
typealias SelfAlignItemProperty = Property

Alias for specific self alignment properties.

SelfAlignItemsValues
Link copied to clipboard
js
object SelfAlignItemsValues : PropertyValues
Predefined values for self alignment Central Alignment Contexts inspired by https://drafts.csswg.
SelfAlignment
Link copied to clipboard
js
interface SelfAlignment
This context interface offers functions for self-alignment.
Shadow
Link copied to clipboard
js
interface Shadow : StyleParams
This context interface offers functions to style the shadow related CSS properties of a component.
ShadowProperty
Link copied to clipboard
js
typealias ShadowProperty = Property

Alias for specific Shadow properties.

SizesProperty
Link copied to clipboard
js
typealias SizesProperty = Sizes.() -> Property

shortcut for functions that derive a value from SizesProperty defined at the Theme

Space
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface Space : StyleParams
This context interface offers functions to style the space related CSS properties of a component.
SpacesContext
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
class SpacesContext(topKey: String, leftKey: String, bottomKey: String, rightKey: String, styleParams: StyleParams, target: StringBuilder) : StyleParams
This context class enables the definition of the common space oriented (margin and padding) styling properties.
Style
Link copied to clipboard
js
typealias Style<T> = T.() -> Unit

shortcut for a function defining style-parameters

StyleParams
Link copied to clipboard
js
interface StyleParams
Basic interface for all StyleParams-classes
StyleParamsImpl
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
open class StyleParamsImpl : BoxParams
Implemantation of all StyleParams-interface providing the needed StringBuilders
StyleParamsMarker
Link copied to clipboard
js
annotation class StyleParamsMarker
DSLMarker-annotation for style-parameter-DSL
TextAlignProperty
Link copied to clipboard
js
typealias TextAlignProperty = Property

Alias for specific TextAlignProperty properties.

TextAligns
Link copied to clipboard
js
object TextAligns : PropertyValues
Predefined values for the text-align property.
TextDecorationProperty
Link copied to clipboard
js
typealias TextDecorationProperty = Property

Alias for specific TextDecorations properties.

TextDecorations
Link copied to clipboard
js
object TextDecorations : PropertyValues
Predefined values for the font-weight property.
TextTransformProperty
Link copied to clipboard
js
typealias TextTransformProperty = Property

Alias for specific TextTransformProperty properties.

TextTransforms
Link copied to clipboard
js
object TextTransforms : PropertyValues
Predefined values for the text-transform property.
Typo
Link copied to clipboard
js
@ExperimentalCoroutinesApi()
interface Typo : StyleParams
This context interface offers functions to style the typography related CSS properties of a component.
VerticalAlignProperty
Link copied to clipboard
js
typealias VerticalAlignProperty = Property

Alias for specific VerticalAlignValues properties.

VerticalAlignValues
Link copied to clipboard
js
object VerticalAlignValues : PropertyValues
Predefined values for the vertical-align property.
WeightedValueProperty
Link copied to clipboard
js
typealias WeightedValueProperty = WeightedValue.() -> Property

shortcut for functions that derive a value from WeightedValue defined at the Theme

WrapProperty
Link copied to clipboard
js
typealias WrapProperty = Property

Alias for the specific WrapValues properties.

WrapValues
Link copied to clipboard
js
object WrapValues : PropertyValues
Predefined values for the flex-wrap property.
ZIndicesProperty
Link copied to clipboard
js
typealias ZIndicesProperty = ZIndices.() -> Property

shortcut for functions that derive a value from ZIndicesProperty defined at the Theme

Functions

alterHexColorBrightness
Link copied to clipboard
js
fun alterHexColorBrightness(color: ColorProperty, brightness: Double): ColorProperty
alters the brightness of a given input color in the hex format.
and
Link copied to clipboard
js
infix fun ShadowProperty.and(other: ShadowProperty): ShadowProperty
combines to shadow property values created by shadow
hsl
Link copied to clipboard
js
fun hsl(h: Int, s: Int, l: Int): String
creates a ColorProperty from hsl-values
hsla
Link copied to clipboard
js
fun hsla(h: Int, s: Int, l: Int, a: Double): String
creates a ColorProperty from hsla-values
plus
Link copied to clipboard
js
inline operator fun <T> Style<T>.plus(crossinline other: Style<T>): Style<T>
combines to Styles
property
Link copied to clipboard
js
inline fun <T : PropertyValues> StyleParams.property(base: T, value: T.() -> Property)
sets an enum-based property for small-screens (default)
fun StyleParams.property(key: String, value: Property, target: StringBuilder = smProperties)
sets a property for a given target screen size
inline fun <T> StyleParams.property(key: String, base: T, value: T.() -> Property, target: StringBuilder = smProperties)
sets a property derived from the Theme
fun <T : PropertyValues> StyleParams.property(base: T, sm: T.() -> Property? = null, md: T.() -> Property? = null, lg: T.() -> Property? = null, xl: T.() -> Property? = null)
sets a responsive enum-based property
fun StyleParams.property(key: String, sm: Property? = null, md: Property? = null, lg: Property? = null, xl: Property? = null)
sets a responsive property for
fun <T> StyleParams.property(key: String, base: T, sm: T.() -> Property? = null, md: T.() -> Property? = null, lg: T.() -> Property? = null, xl: T.() -> Property? = null)
sets a responsive property derived from the Theme
rgb
Link copied to clipboard
js
fun rgb(r: Int, g: Int, b: Int): String
creates a ColorProperty from rgb-values
rgba
Link copied to clipboard
js
fun rgba(r: Int, g: Int, b: Int, a: Double): String
creates a ColorProperty from rgba-values
shadow
Link copied to clipboard
js
fun shadow(offsetHorizontal: String, offsetVertical: String = offsetHorizontal, blur: String? = null, spread: String? = null, color: String? = null, inset: Boolean = false): ShadowProperty
creates a valid value for shadow-properties like box-shadow or text-shadow
styled
Link copied to clipboard
js
fun <E> BasicComponent<E>.styled(baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "css", styling: BoxParams.() -> Unit): TagContext.(E.() -> Unit) -> E
Extension method that enables the usage of fritz2's powerful styling DSL for basic HTML elements.
fun <E> BasicComponent<E>.styled(parentStyling: BoxParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "css", styling: BoxParams.() -> Unit): TagContext.(E.() -> Unit) -> E
Extension method that enables the usage of fritz2's powerful styling DSL for basic HTML elements.

Properties

boxShadowKey
Link copied to clipboard
js
const val boxShadowKey: String
cssDelimiter
Link copied to clipboard
js
const val cssDelimiter: String
end
Link copied to clipboard
js
val AreaName.end: String
Extension property that generates the value for the end grid line of an area
middle
Link copied to clipboard
js
val AreaName.middle: String
Extension property that generates the value for the middle between the start and end grid lines of an area
start
Link copied to clipboard
js
val AreaName.start: String
Extension property that generates the value for the start grid line of an area
textShadowKey
Link copied to clipboard
js
const val textShadowKey: String