silk-foundation/com.varabyte.kobweb.silk.style.breakpoint

Package-level declarations

Types

Link copied to clipboard
enum Breakpoint : Enum<Breakpoint> , BreakpointQueryProvider

Breakpoints are size values which can be used to affect the layout of the UI at various boundary points.

Link copied to clipboard
sealed interface BreakpointQueryProvider

An interface for expressing CSS media queries through Breakpoints.

Link copied to clipboard
Link copied to clipboard
data class BreakpointValues<out T : CSSLengthNumericValue>(val sm: BreakpointUnitValue<T>, val md: BreakpointUnitValue<T>, val lg: BreakpointUnitValue<T>, val xl: BreakpointUnitValue<T>)

A class used for storing generic values associated with breakpoints.

Link copied to clipboard
class ResponsiveValues<T>(val base: T, val sm: T, val md: T, val lg: T, val xl: T)

A class used for storing generic values associated with breakpoints plus a base style.

Functions

Link copied to clipboard
fun BreakpointSizes(sm: CSSSizeValue<CSSUnit.em>, md: CSSSizeValue<CSSUnit.em>, lg: CSSSizeValue<CSSUnit.em>, xl: CSSSizeValue<CSSUnit.em>): BreakpointValues<CSSSizeValue<CSSUnit.em>>

A convenience class for constructing an association of breakpoints to CSS em sizes.

fun BreakpointSizes(sm: CSSpxValue, md: CSSpxValue, lg: CSSpxValue, xl: CSSpxValue): BreakpointValues<CSSpxValue>

A convenience class for constructing an association of breakpoints to CSS pixel sizes.

fun BreakpointSizes(sm: CSSSizeValue<CSSUnit.rem>, md: CSSSizeValue<CSSUnit.rem>, lg: CSSSizeValue<CSSUnit.rem>, xl: CSSSizeValue<CSSUnit.rem>): BreakpointValues<CSSSizeValue<CSSUnit.rem>>

A convenience class for constructing an association of breakpoints to CSS rem sizes.

Link copied to clipboard
fun Modifier.displayBetween(breakpointLower: Breakpoint, breakpointUpper: Breakpoint): Modifier

Display this element only if the current screen's width lies between the lower breakpoint (inclusive) and upper breakpoint (exclusive).

Link copied to clipboard
fun Modifier.displayIfAtLeast(breakpoint: Breakpoint): Modifier

Display this element only if the current screen is at least as wide as the specified breakpoint.

Link copied to clipboard
fun Modifier.displayUntil(breakpoint: Breakpoint): Modifier

Display this element only if the current screen is narrower than the specified breakpoint.