compose-multiplatform-html-unified-common/com.huanshankeji.compose.ui/Modifier/Element

Element

expect interface Element : Modifier(source)

actual interface Element : Modifier(source)

Inheritors

Impl

actual interface Element : Modifier(source)

Inheritors

Impl

Types

Impl

@JvmInline

value class Impl(val platformElement: Modifier.Element) : Modifier.Element

Properties

platformElement

abstract val platformElement: Modifier.Element

platformModifier

abstract val platformModifier: Modifier

Functions

absoluteInnerPadding

@Stable

expect fun Modifier.absoluteInnerPadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier

See the KDoc of the overload with one Dp parameter for platform differences.

@Stable

actual fun Modifier.absoluteInnerPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier

@Stable

actual fun Modifier.absoluteInnerPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier

absoluteOuterPadding

@Stable

expect fun Modifier.absoluteOuterPadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier

See the KDoc of the overload with one Dp parameter for platform differences.

@Stable

actual fun Modifier.absoluteOuterPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier

@Stable

actual fun Modifier.absoluteOuterPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier

absolutePadding

@Stable

expect fun Modifier.~~absolutePadding~~(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier

See the KDoc of the overload with one Dp parameter for platform differences.

@Stable

actual fun Modifier.absolutePadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier

@Stable

actual fun Modifier.absolutePadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier

alpha

expect fun Modifier.alpha(alpha: Float): Modifier

actual fun Modifier.alpha(alpha: Float): Modifier

background

expect fun Modifier.background(color: Color): Modifier

For consistency on different platforms, if used with a padding modifier, use with Modifier.outerPadding and use after it, because the padding is not within the background. Otherwise, add an outer Box and use background on it.

actual fun Modifier.background(color: Color): Modifier

border

@Stable

expect fun Modifier.border(border: BorderStroke): Modifier

@Stable

expect fun Modifier.border(width: Dp, color: Color): Modifier

@Stable

actual fun Modifier.border(border: BorderStroke): Modifier

@Stable

actual fun Modifier.border(width: Dp, color: Color): Modifier

@Stable

actual fun Modifier.border(border: BorderStroke): Modifier

@Stable

actual fun Modifier.border(width: Dp, color: Color): Modifier

clickable

expect fun Modifier.clickable(onClick: () -> Unit): Modifier

Has the interactive effect when clicked on the composeUi targets.

actual fun Modifier.clickable(onClick: () -> Unit): Modifier

fillMaxHeight

@Stable

expect fun Modifier.fillMaxHeight(@FloatRange(from = 0.0, to = 1.0) fraction: Float = 1.0f): Modifier

@Stable

actual fun Modifier.fillMaxHeight(@FloatRange(from = 0.0, to = 1.0) fraction: Float): Modifier

@Stable

actual fun Modifier.fillMaxHeight(@FloatRange(from = 0.0, to = 1.0) fraction: Float): Modifier

fillMaxHeightStretch

@Stable

expect fun Modifier.fillMaxHeightStretch(): Modifier

Similar to fillMaxHeight but delegates to the stretch CSS value on JS DOM.

@Stable

actual fun Modifier.fillMaxHeightStretch(): Modifier

@Stable

actual fun Modifier.fillMaxHeightStretch(): Modifier

fillMaxSize

@Stable

expect fun Modifier.fillMaxSize(@FloatRange(from = 0.0, to = 1.0) fraction: Float = 1.0f): Modifier

@Stable

actual fun Modifier.fillMaxSize(@FloatRange(from = 0.0, to = 1.0) fraction: Float): Modifier

@Stable

actual fun Modifier.fillMaxSize(@FloatRange(from = 0.0, to = 1.0) fraction: Float): Modifier

fillMaxSizeStretch

@Stable

expect fun Modifier.fillMaxSizeStretch(): Modifier

Similar to fillMaxSize but delegates to the stretch CSS value on JS DOM.

@Stable

actual fun Modifier.fillMaxSizeStretch(): Modifier

@Stable

actual fun Modifier.fillMaxSizeStretch(): Modifier

fillMaxWidth

@Stable

expect fun Modifier.fillMaxWidth(@FloatRange(from = 0.0, to = 1.0) fraction: Float = 1.0f): Modifier

@Stable

actual fun Modifier.fillMaxWidth(@FloatRange(from = 0.0, to = 1.0) fraction: Float): Modifier

@Stable

actual fun Modifier.fillMaxWidth(@FloatRange(from = 0.0, to = 1.0) fraction: Float): Modifier

fillMaxWidthStretch

@Stable

expect fun Modifier.fillMaxWidthStretch(): Modifier

Similar to fillMaxWidth but delegates to the stretch CSS value on JS DOM. See https://developer.mozilla.org/en-US/docs/Web/CSS/width#stretch.

@Stable

actual fun Modifier.fillMaxWidthStretch(): Modifier

@Stable

actual fun Modifier.fillMaxWidthStretch(): Modifier

foldIn

expect open fun <R> foldIn(initial: R, operation: (R, Modifier.Element) -> R): R

actual open fun <R> foldIn(initial: R, operation: (R, Modifier.Element) -> R): R

height

@Stable

expect fun Modifier.height(height: Dp): Modifier

@Stable

expect fun Modifier.height(intrinsicSize: IntrinsicSize): Modifier

@Stable

actual fun Modifier.height(height: Dp): Modifier

@Stable

actual fun Modifier.height(intrinsicSize: IntrinsicSize): Modifier

@Stable

actual fun Modifier.height(height: Dp): Modifier

@Stable

actual fun Modifier.height(intrinsicSize: IntrinsicSize): Modifier

heightIn

@Stable

expect fun Modifier.heightIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified): Modifier

@Stable

actual fun Modifier.heightIn(min: Dp, max: Dp): Modifier

@Stable

actual fun Modifier.heightIn(min: Dp, max: Dp): Modifier

hidden

expect fun Modifier.hidden(): Modifier

actual fun Modifier.hidden(): Modifier

horizontalScroll

expect fun Modifier.~~horizontalScroll~~(state: ScrollState): Modifier

For consistency on different platforms, components such as HorizontalScrollContainer, HorizontalScrollBox, HorizontalScrollRow are recommended over this modifier.

actual fun Modifier.horizontalScroll(state: ScrollState): Modifier

innerPadding

@Stable

expect fun Modifier.innerPadding(all: Dp): Modifier

This delegates to the CSS padding property on JS DOM and adds the padding inside. For consistency on different platforms, please use it as the last modifier after the other modifiers such as background and clickable. See the KDoc of the padding overload with one Dp parameter for more information.

@Stable

expect fun Modifier.innerPadding(paddingValues: PaddingValues): Modifier

@Stable

expect fun Modifier.innerPadding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier

@Stable

expect fun Modifier.innerPadding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier

See the KDoc of the overload with one Dp parameter for platform differences.

@Stable

actual fun Modifier.innerPadding(all: Dp): Modifier

@Stable

actual fun Modifier.innerPadding(paddingValues: PaddingValues): Modifier

@Stable

actual fun Modifier.innerPadding(horizontal: Dp, vertical: Dp): Modifier

@Stable

actual fun Modifier.innerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier

@Stable

actual fun Modifier.innerPadding(all: Dp): Modifier

@Stable

actual fun Modifier.innerPadding(paddingValues: PaddingValues): Modifier

@Stable

actual fun Modifier.innerPadding(horizontal: Dp, vertical: Dp): Modifier

@Stable

actual fun Modifier.innerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier

invisible

fun Modifier.invisible(): Modifier

An alias for hidden.

matchPositionRelativeParentJsDom

expect fun Modifier.matchPositionRelativeParentJsDom(): Modifier

actual fun Modifier.matchPositionRelativeParentJsDom(): Modifier

onClick

actual fun Modifier.onClick(onClick: () -> Unit): Modifier

expect fun Modifier.~~onClick~~(onClick: () -> Unit): Modifier

Delegates to clickable on Android. onClick is not available on Android. See https://github.com/JetBrains/compose-multiplatform/issues/4468 for details.

actual fun Modifier.onClick(onClick: () -> Unit): Modifier

outerBorder

@Stable

expect fun Modifier.outerBorder(border: BorderStroke): Modifier

@Stable

expect fun Modifier.outerBorder(width: Dp, color: Color): Modifier

Follows the default CSS border behavior that is on the outside.

@Stable

actual fun Modifier.outerBorder(border: BorderStroke): Modifier

Follows the default CSS border behavior that is on the outside.

@Stable

actual fun Modifier.outerBorder(width: Dp, color: Color): Modifier

@Stable

actual fun Modifier.outerBorder(border: BorderStroke): Modifier

@Stable

actual fun Modifier.outerBorder(width: Dp, color: Color): Modifier

outerPadding

@Stable

expect fun Modifier.outerPadding(all: Dp): Modifier

This delegates to the CSS margin property on JS DOM and adds the padding outside. For consistency on different platforms, please use it as the first modifier before the other modifiers such as background and clickable.

@Stable

expect fun Modifier.outerPadding(paddingValues: PaddingValues): Modifier

@Stable

expect fun Modifier.outerPadding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier

@Stable

expect fun Modifier.outerPadding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier

See the KDoc of the overload with one Dp parameter for platform differences.

@Stable

actual fun Modifier.outerPadding(all: Dp): Modifier

@Stable

actual fun Modifier.outerPadding(paddingValues: PaddingValues): Modifier

@Stable

actual fun Modifier.outerPadding(horizontal: Dp, vertical: Dp): Modifier

@Stable

actual fun Modifier.outerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier

@Stable

actual fun Modifier.outerPadding(all: Dp): Modifier

@Stable

actual fun Modifier.outerPadding(paddingValues: PaddingValues): Modifier

@Stable

actual fun Modifier.outerPadding(horizontal: Dp, vertical: Dp): Modifier

@Stable

actual fun Modifier.outerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier

padding

@Stable

expect fun Modifier.~~padding~~(all: Dp): Modifier

Padding works differently on Compose UI and CSS. In Compose UI, the padding modifier adds a layer of wrapper around the component, and order of modifiers matters; while in CSS, this function delegates to the margin CSS properties.

@Stable

expect fun Modifier.~~padding~~(paddingValues: PaddingValues): Modifier

@Stable

expect fun Modifier.~~padding~~(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier

@Stable

expect fun Modifier.~~padding~~(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier

See the KDoc of the overload with one Dp parameter for platform differences.

@Stable

actual fun Modifier.padding(all: Dp): Modifier

@Stable

actual fun Modifier.padding(paddingValues: PaddingValues): Modifier

@Stable

actual fun Modifier.padding(horizontal: Dp, vertical: Dp): Modifier

@Stable

actual fun Modifier.padding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier

@Stable

actual fun Modifier.padding(all: Dp): Modifier

@Stable

actual fun Modifier.padding(paddingValues: PaddingValues): Modifier

@Stable

actual fun Modifier.padding(horizontal: Dp, vertical: Dp): Modifier

@Stable

actual fun Modifier.padding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier

platformModify

open fun platformModify(block: Modifier.() -> Modifier): Modifier

reserveSpace

fun Modifier.reserveSpace(): Modifier

An alias for hidden.

rotate

@Stable

expect fun Modifier.rotate(degrees: Float): Modifier

@Stable

actual fun Modifier.rotate(degrees: Float): Modifier

@Stable

actual fun Modifier.rotate(degrees: Float): Modifier

roundedCornerBackgroundAndOuterBorder

@Stable

expect fun Modifier.roundedCornerBackgroundAndOuterBorder(border: BorderStroke, cornerRadius: Dp, backgroundColor: Color): Modifier

The border is not on top of the background.

@Stable

expect fun Modifier.roundedCornerBackgroundAndOuterBorder(border: BorderStroke, cornerRadiusPercent: Int, backgroundColor: Color): Modifier

@Stable

expect fun Modifier.roundedCornerBackgroundAndOuterBorder(width: Dp, borderColor: Color, cornerRadius: Dp, backgroundColor: Color): Modifier

@Stable

expect fun Modifier.roundedCornerBackgroundAndOuterBorder(width: Dp, borderColor: Color, cornerRadiusPercent: Int, backgroundColor: Color): Modifier

@Stable

actual fun Modifier.roundedCornerBackgroundAndOuterBorder(border: BorderStroke, cornerRadius: Dp, backgroundColor: Color): Modifier

@Stable

actual fun Modifier.roundedCornerBackgroundAndOuterBorder(border: BorderStroke, cornerRadiusPercent: Int, backgroundColor: Color): Modifier

@Stable

actual fun Modifier.roundedCornerBackgroundAndOuterBorder(width: Dp, borderColor: Color, cornerRadius: Dp, backgroundColor: Color): Modifier

@Stable

actual fun Modifier.roundedCornerBackgroundAndOuterBorder(width: Dp, borderColor: Color, cornerRadiusPercent: Int, backgroundColor: Color): Modifier

@Stable

actual fun Modifier.roundedCornerBackgroundAndOuterBorder(border: BorderStroke, cornerRadius: Dp, backgroundColor: Color): Modifier

@Stable

actual fun Modifier.roundedCornerBackgroundAndOuterBorder(border: BorderStroke, cornerRadiusPercent: Int, backgroundColor: Color): Modifier

@Stable

actual fun Modifier.roundedCornerBackgroundAndOuterBorder(width: Dp, borderColor: Color, cornerRadius: Dp, backgroundColor: Color): Modifier

@Stable

actual fun Modifier.roundedCornerBackgroundAndOuterBorder(width: Dp, borderColor: Color, cornerRadiusPercent: Int, backgroundColor: Color): Modifier

roundedCornerOuterBorder

@Stable

expect fun Modifier.roundedCornerOuterBorder(border: BorderStroke, borderRadius: Dp): Modifier

@Stable

expect fun Modifier.roundedCornerOuterBorder(border: BorderStroke, borderRadiusPercent: Int): Modifier

@Stable

expect fun Modifier.roundedCornerOuterBorder(width: Dp, color: Color, borderRadius: Dp): Modifier

@Stable

expect fun Modifier.roundedCornerOuterBorder(width: Dp, color: Color, borderRadiusPercent: Int): Modifier

@Stable

actual fun Modifier.roundedCornerOuterBorder(border: BorderStroke, borderRadius: Dp): Modifier

@Stable

actual fun Modifier.roundedCornerOuterBorder(border: BorderStroke, borderRadiusPercent: Int): Modifier

@Stable

actual fun Modifier.roundedCornerOuterBorder(width: Dp, color: Color, borderRadius: Dp): Modifier

@Stable

actual fun Modifier.roundedCornerOuterBorder(width: Dp, color: Color, borderRadiusPercent: Int): Modifier

@Stable

actual fun Modifier.roundedCornerOuterBorder(border: BorderStroke, borderRadius: Dp): Modifier

@Stable

actual fun Modifier.roundedCornerOuterBorder(border: BorderStroke, borderRadiusPercent: Int): Modifier

@Stable

actual fun Modifier.roundedCornerOuterBorder(width: Dp, color: Color, borderRadius: Dp): Modifier

@Stable

actual fun Modifier.roundedCornerOuterBorder(width: Dp, color: Color, borderRadiusPercent: Int): Modifier

size

@Stable

expect fun Modifier.size(dp: Dp): Modifier

@Stable

fun Modifier.size(size: DpSize): Modifier

@Stable

expect fun Modifier.size(width: Dp, height: Dp): Modifier

@Stable

actual fun Modifier.size(dp: Dp): Modifier

@Stable

actual fun Modifier.size(width: Dp, height: Dp): Modifier

@Stable

actual fun Modifier.size(dp: Dp): Modifier

@Stable

actual fun Modifier.size(width: Dp, height: Dp): Modifier

sizeIn

@Stable

expect fun Modifier.sizeIn(minWidth: Dp = Dp.Unspecified, minHeight: Dp = Dp.Unspecified, maxWidth: Dp = Dp.Unspecified, maxHeight: Dp = Dp.Unspecified): Modifier

@Stable

actual fun Modifier.sizeIn(minWidth: Dp, minHeight: Dp, maxWidth: Dp, maxHeight: Dp): Modifier

@Stable

actual fun Modifier.sizeIn(minWidth: Dp, minHeight: Dp, maxWidth: Dp, maxHeight: Dp): Modifier

then

expect open infix fun then(other: Modifier): Modifier

actual open infix fun then(other: Modifier): Modifier

toAttrs

fun <A : AttrsScope<Element>> Modifier.toAttrs(finalHandler: A.() -> Unit? = null): A.() -> Unit

toAttrsWithColor

fun Modifier.toAttrsWithColor(color: Color?): AttrsScope<*>.() -> Unit

fun Modifier.toAttrsWithColor(color: ColorProducer?): AttrsScope<*>.() -> Unit

verticalScroll

expect fun Modifier.~~verticalScroll~~(state: ScrollState): Modifier

Note that if the component is a layout, for example a Material card, it applies to the target as a whole on Compose UI targets, but applies to its content on JS DOM. For consistency on different platforms, components such as VerticalScrollContainer, VerticalScrollBox, VerticalScrollColumn are recommended over this modifier.