fun Modifier.background(color: Color? = null, image: String? = null, positionX: CssSize? = null, positionY: CssSize? = null, sizeX: CssSize? = null, sizeY: CssSize? = null, size: BgSize? = null, repeat: BgRepeat? = null, origin: BgOrigin? = null, clip: BgClip? = null, attachment: BgAttach? = null): Modifier

Set the background of the current component.

baseModifier

fun Modifier.baseModifier(baseAttrs: @Composable TagBaseFun.() -> Unit): Modifier

Create a modifier instance for given base HTML attributes.

border

fun Modifier.border(border: Border?): Modifier

Border of the current component.

fun Modifier.border(width: CssSize? = null, style: BorderStyle? = null, color: Color? = null): Modifier

Set the border of the current component.

borderBottom

fun Modifier.borderBottom(borderBottom: Border?): Modifier

Bottom border of the current component.

fun Modifier.borderBottom(width: CssSize? = null, style: BorderStyle? = null, color: Color? = null): Modifier

Set the bottom border of the current component.

borderLeft

fun Modifier.borderLeft(borderLeft: Border?): Modifier

Left border of the current component.

fun Modifier.borderLeft(width: CssSize? = null, style: BorderStyle? = null, color: Color? = null): Modifier

Set the left border of the current component.

borderRadius

fun Modifier.borderRadius(borderRadius: CssSize?): Modifier

CSS border radius.

borderRadiusList

fun Modifier.borderRadiusList(borderRadiusList: List<CssSize>?): Modifier

List of CSS border radius values.

borderRight

fun Modifier.borderRight(borderRight: Border?): Modifier

Right border of the current component.

fun Modifier.borderRight(width: CssSize? = null, style: BorderStyle? = null, color: Color? = null): Modifier

Set the right border of the current component.

borderTop

fun Modifier.borderTop(borderTop: Border?): Modifier

Top border of the current component.

fun Modifier.borderTop(width: CssSize? = null, style: BorderStyle? = null, color: Color? = null): Modifier

Set the top border of the current component.

bottom

fun Modifier.bottom(bottom: CssSize?): Modifier

Bottom edge of the current component.

boxShadow

fun Modifier.boxShadow(boxShadow: BoxShadow?): Modifier

Box shadow of the current component.

fun Modifier.boxShadow(hOffset: CssSize? = null, vOffset: CssSize? = null, blurRadius: CssSize? = null, spreadRadius: CssSize? = null, color: Color? = null, inset: Boolean = false): Modifier

Set the box shadow of the current component.

boxShadowList

fun Modifier.boxShadowList(boxShadowList: List<BoxShadow>?): Modifier

List of box shadows of the current component.

className

fun Modifier.className(className: String?): Modifier

Set the CSS class of the current component.

clear

fun Modifier.clear(clear: Clear?): Modifier

CSS clear float of the current component.

clearDragDropData

fun Modifier.clearDragDropData(): Modifier

Clears D&D data for the current component. It also makes it not draggable.

clearDropTarget

fun Modifier.clearDropTarget(): Modifier

Unsets the current component as a D&D drop target.

clickable

fun Modifier.clickable(enabled: Boolean = true, onClick: (MouseEvent) -> Unit): Modifier

Add click event listener when enabled is true. This function mimics the behavior of clickable in Jetpack Compose.

color

fun Modifier.color(color: Color?): Modifier

Text color for the current component.

columnGap

fun Modifier.columnGap(columnGap: CssSize?): Modifier

CSS grid/flex column gap.

combinedClickable

fun Modifier.combinedClickable(enabled: Boolean = true, onLongClick: () -> Unit? = null, onDoubleClick: () -> Unit? = null, onClick: () -> Unit): Modifier

Add click, double-click and long-click events listeners when enabled is true. This function mimics the behavior of combinedClickable in Jetpack Compose. An extension function for the Modifier that allows handling of click, double-click, and long click events. This function combines multiple input events (like mouse and touch) to trigger the respective actions based on the user's interaction.

cursor

fun Modifier.cursor(cursor: Cursor?): Modifier

CSS cursor shape over the current component.

direction

fun Modifier.direction(direction: Direction?): Modifier

CSS Text direction of the current component.

display

fun Modifier.display(display: Display?): Modifier

CSS display of the current component.

dndModifier

fun Modifier.dndModifier(dnd: @Composable TagDnd.() -> Unit): Modifier

Create a modifier instance for given drag and drop methods.

draggable

fun Modifier.draggable(draggable: Boolean?): Modifier

Set the draggable attribute.

eventsModifier

fun Modifier.eventsModifier(events: @Composable TagEvents.() -> Unit): Modifier

Create a modifier instance for given common tag events.

fillMaxHeight

fun Modifier.fillMaxHeight(fraction: Float = 1.0f): Modifier

Set the height of the current component to given (by default maximum) value.

fillMaxSize

fun Modifier.fillMaxSize(fraction: Float = 1.0f): Modifier

Set the size (both width and height) of the current component to given (by default minimum) value.

fillMaxWidth

fun Modifier.fillMaxWidth(fraction: Float = 1.0f): Modifier

Set the width of the current component to given (by default maximum) value.

flexBasis

fun Modifier.flexBasis(flexBasis: CssSize?): Modifier

CSS flexbox item basis.

flexDirection

fun Modifier.flexDirection(flexDirection: FlexDirection?): Modifier

CSS flexbox direction.

flexGrow

fun Modifier.flexGrow(flexGrow: Int?): Modifier

CSS flexbox item grow.

flexShrink

fun Modifier.flexShrink(flexShrink: Int?): Modifier

CSS flexbox item shrink.

flexWrap

fun Modifier.flexWrap(flexWrap: FlexWrap?): Modifier

CSS flexbox wrap mode.

float

fun Modifier.float(float: CssFloat?): Modifier

CSS position float of the current component.

fold

@Composable

open override fun <R> fold(initial: R, operation: @Composable (R, Modifier.Element) -> R): R

Accumulates a value starting with initial and applying operation to the current value and each element from left to right.

fontFamily

fun Modifier.fontFamily(fontFamily: String?): Modifier

CSS font family of the current component.

fontSize

fun Modifier.fontSize(fontSize: CssSize?): Modifier

CSS font size of the current component.

fontStyle

fun Modifier.fontStyle(fontStyle: FontStyle?): Modifier

CSS font style of the current component.

fontVariant

fun Modifier.fontVariant(fontVariant: FontVariant?): Modifier

CSS font variant of the current component.

fontWeight

fun Modifier.fontWeight(fontWeight: FontWeight?): Modifier

CSS font weight of the current component.

gridArea

fun Modifier.gridArea(gridArea: String?): Modifier

CSS grid area.

gridAutoColumns

fun Modifier.gridAutoColumns(gridAutoColumns: String?): Modifier

CSS grid auto columns.

gridAutoFlow

fun Modifier.gridAutoFlow(gridAutoFlow: GridAutoFlow?): Modifier

CSS grid auto flow.

gridAutoRows

fun Modifier.gridAutoRows(gridAutoRows: String?): Modifier

CSS grid auto rows.

gridColumn

fun Modifier.gridColumn(gridColumn: String?): Modifier

CSS grid column.

gridColumnEnd

fun Modifier.gridColumnEnd(gridColumnEnd: String?): Modifier

CSS grid column end.

gridColumnStart

fun Modifier.gridColumnStart(gridColumnStart: String?): Modifier

CSS grid column start.

gridRow

fun Modifier.gridRow(gridRow: String?): Modifier

CSS grid row.

gridRowEnd

fun Modifier.gridRowEnd(gridRowEnd: String?): Modifier

CSS grid row end.

gridRowStart

fun Modifier.gridRowStart(gridRowStart: String?): Modifier

CSS grid row start.

gridTemplate

fun Modifier.gridTemplate(gridTemplate: String?): Modifier

CSS grid template.

gridTemplateAreas

fun Modifier.gridTemplateAreas(gridTemplateAreas: List<String>?): Modifier

CSS grid areas template.

gridTemplateColumns

fun Modifier.gridTemplateColumns(gridTemplateColumns: String?): Modifier

CSS grid columns template.

gridTemplateRows

fun Modifier.gridTemplateRows(gridTemplateRows: String?): Modifier

CSS grid rows template.

height

fun Modifier.height(height: CssSize?): Modifier

Height of the current component.

heightIn

fun Modifier.heightIn(min: CssSize? = null, max: CssSize? = null): Modifier

Constrain the height of the component to be between min and max.

fun Modifier.id(id: String?): Modifier

Set the ID attribute of the current component.

justifyContent

fun Modifier.justifyContent(justifyContent: JustifyContent?): Modifier

CSS flexbox/grid content justification.

justifyItems

fun Modifier.justifyItems(justifyItems: JustifyItems?): Modifier

CSS grid items justification.

justifySelf

fun Modifier.justifySelf(justifySelf: JustifyItems?): Modifier

CSS grid items self-justification.

left

fun Modifier.left(left: CssSize?): Modifier

Left edge of the current component.

letterSpacing

fun Modifier.letterSpacing(letterSpacing: CssSize?): Modifier

CSS Text letter spacing of the current component.

lineBreak

fun Modifier.lineBreak(lineBreak: LineBreak?): Modifier

CSS line break of the current component.

lineHeight

fun Modifier.lineHeight(lineHeight: CssSize?): Modifier

CSS Text line height of the current component.

listStyle

fun Modifier.listStyle(listStyle: ListStyle?): Modifier

List style of the current component.

fun Modifier.listStyle(type: ListStyleType? = null, position: ListStylePosition? = null, image: String? = null): Modifier

Set the list style of the current component.

margin

fun Modifier.margin(margin: CssSize?): Modifier

Margin of the current component.

marginBottom

fun Modifier.marginBottom(marginBottom: CssSize?): Modifier

Bottom margin of the current component.

marginLeft

fun Modifier.marginLeft(marginLeft: CssSize?): Modifier

Left margin of the current component.

marginRight

fun Modifier.marginRight(marginRight: CssSize?): Modifier

Right margin of the current component.

marginTop

fun Modifier.marginTop(marginTop: CssSize?): Modifier

Top margin of the current component.

maxHeight

fun Modifier.maxHeight(maxHeight: CssSize?): Modifier

Maximal height of the current component.

maxSize

fun Modifier.maxSize(size: CssSize?): Modifier

fun Modifier.maxSize(width: CssSize?, height: CssSize?): Modifier

Set the maximal size (both width and height) of the current component.

maxWidth

fun Modifier.maxWidth(maxWidth: CssSize?): Modifier

Maximal width of the current component.

minHeight

fun Modifier.minHeight(minHeight: CssSize?): Modifier

Minimal height of the current component.

minSize

fun Modifier.minSize(size: CssSize?): Modifier

fun Modifier.minSize(width: CssSize?, height: CssSize?): Modifier

Set the minimal size (both width and height) of the current component.

minWidth

fun Modifier.minWidth(minWidth: CssSize?): Modifier

Minimal width of the current component.

onBlur

fun Modifier.onBlur(listener: (FocusEvent) -> Unit): Modifier

Add blur event listener.

onChange

fun Modifier.onChange(listener: (Event) -> Unit): Modifier

Add change event listener.

onClick

fun Modifier.onClick(listener: (MouseEvent) -> Unit): Modifier

Add click event listener.

onContextmenu

fun Modifier.onContextmenu(listener: (MouseEvent) -> Unit): Modifier

Add context menu event listener.

onDblclick

fun Modifier.onDblclick(listener: (MouseEvent) -> Unit): Modifier

Add double click event listener.

onEvent

fun <EV : Event> Modifier.onEvent(name: String, listener: (EV) -> Unit): Modifier

Add event listener by event name.

onFocus

fun Modifier.onFocus(listener: (FocusEvent) -> Unit): Modifier

Add focus event listener.

onInput

fun Modifier.onInput(listener: (InputEvent) -> Unit): Modifier

Add input event listener.

onKeydown

fun Modifier.onKeydown(listener: (KeyboardEvent) -> Unit): Modifier

Add key down event listener.

onKeypress

fun Modifier.onKeypress(listener: (KeyboardEvent) -> Unit): Modifier

Add key press event listener.

onKeyup

fun Modifier.onKeyup(listener: (KeyboardEvent) -> Unit): Modifier

Add key up event listener.

onMouseDown

fun Modifier.onMouseDown(listener: (MouseEvent) -> Unit): Modifier

Add mouse down event listener.

onMouseLeave

fun Modifier.onMouseLeave(listener: (MouseEvent) -> Unit): Modifier

Add mouse leave event listener.

onMouseOut

fun Modifier.onMouseOut(listener: (MouseEvent) -> Unit): Modifier

Add mouse out event listener.

onMouseOver

fun Modifier.onMouseOver(listener: (MouseEvent) -> Unit): Modifier

Add mouse over event listener.

onMouseUp

fun Modifier.onMouseUp(listener: (MouseEvent) -> Unit): Modifier

Add mouse up event listener.

onPointerDown

fun Modifier.onPointerDown(listener: (PointerEvent) -> Unit): Modifier

Add pointer down event listener.

onPointerUp

fun Modifier.onPointerUp(listener: (PointerEvent) -> Unit): Modifier

Add pointer up event listener.

onTouchCancel

fun Modifier.onTouchCancel(listener: (TouchEvent) -> Unit): Modifier

Add touch cancel event listener.

onTouchEnd

fun Modifier.onTouchEnd(listener: (TouchEvent) -> Unit): Modifier

Add touch end event listener.

onTouchStart

fun Modifier.onTouchStart(listener: (TouchEvent) -> Unit): Modifier

Add touch start event listener.

opacity

fun Modifier.opacity(opacity: Double?): Modifier

Opacity of the current component.

order

fun Modifier.order(order: Int?): Modifier

CSS flexbox item order.

outline

fun Modifier.outline(outline: Outline?): Modifier

Outline of the current component.

fun Modifier.outline(width: CssSize? = null, style: OutlineStyle? = null, color: Color? = null): Modifier

Set the outline of the current component.

overflow

fun Modifier.overflow(overflow: Overflow?): Modifier

CSS overflow of the current component.

overflowWrap

fun Modifier.overflowWrap(overflowWrap: OverflowWrap?): Modifier

CSS overflow-wrap of the current component.

overflowX

fun Modifier.overflowX(overflowX: Overflow?): Modifier

CSS overflow-x of the current component.

overflowY

fun Modifier.overflowY(overflowY: Overflow?): Modifier

CSS overflow-y of the current component.

padding

fun Modifier.padding(padding: CssSize?): Modifier

Padding of the current component.

paddingBottom

fun Modifier.paddingBottom(paddingBottom: CssSize?): Modifier

Bottom padding of the current component.

paddingLeft

fun Modifier.paddingLeft(paddingLeft: CssSize?): Modifier

Left padding of the current component.

paddingRight

fun Modifier.paddingRight(paddingRight: CssSize?): Modifier

Right padding of the current component.

paddingTop

fun Modifier.paddingTop(paddingTop: CssSize?): Modifier

Top padding of the current component.

position

fun Modifier.position(position: Position?): Modifier

CSS position of the current component.

resize

fun Modifier.resize(resize: Resize?): Modifier

CSS resize of the current component.

right

fun Modifier.right(right: CssSize?): Modifier

Right edge of the current component.

role

fun Modifier.role(role: String?): Modifier

Set the role attribute.

rowGap

fun Modifier.rowGap(rowGap: CssSize?): Modifier

CSS grid/flex row gap.

setDragDropData

@Composable

fun Modifier.setDragDropData(format: String, data: String): Modifier

Sets D&D data for the current widget. It also makes it draggable.

setDropTarget

@Composable

fun Modifier.setDropTarget(callback: (DragEvent) -> Unit): Modifier

@Composable

fun Modifier.setDropTarget(format: String, callback: (DragEvent) -> Unit): Modifier

@Composable

fun Modifier.setDropTarget(formats: Set<String>?, callback: (DragEvent) -> Unit): Modifier

Sets the current component as a D&D drop target.

setDropTargetData

@Composable

fun Modifier.setDropTargetData(format: String, callback: (String?) -> Unit): Modifier

Sets the current component as a D&D drop target with helper callback accepting String data.

size

fun Modifier.size(size: CssSize?): Modifier

fun Modifier.size(width: CssSize?, height: CssSize?): Modifier

Set the size (both width and height) of the current component.

sizeIn

fun Modifier.sizeIn(minWidth: CssSize? = null, minHeight: CssSize? = null, maxWidth: CssSize? = null, maxHeight: CssSize? = null): Modifier

Constrain the size (both width and height) of the component to be between min and max.

style

fun Modifier.style(name: String, value: String?): Modifier

Set value for the given CSS style.

styleModifier

fun Modifier.styleModifier(styles: @Composable TagStyleFun.() -> Unit): Modifier

Create a modifier instance for given CSS styles.

tabindex

fun Modifier.tabindex(tabindex: Int?): Modifier

Set the tabindex attribute.

textAlign

fun Modifier.textAlign(textAlign: TextAlign?): Modifier

CSS Text align of the current component.

textDecoration

fun Modifier.textDecoration(textDecoration: TextDecoration?): Modifier

CSS Text decoration of the current component.

fun Modifier.textDecoration(line: TextDecorationLine? = null, style: TextDecorationStyle? = null, color: Color? = null): Modifier

Set the CSS Text decoration of the current component.

textIndent

fun Modifier.textIndent(textIndent: CssSize?): Modifier

CSS Text indent of the current component.

textOverflow

fun Modifier.textOverflow(textOverflow: TextOverflow?): Modifier

CSS Text overflow of the current component.

textShadow

fun Modifier.textShadow(textShadow: TextShadow?): Modifier

CSS Text shadow of the current component.

fun Modifier.textShadow(hShadow: CssSize? = null, vShadow: CssSize? = null, blurRadius: CssSize? = null, color: Color? = null): Modifier

Set the CSS Text shadow of the current component.

textTransform

fun Modifier.textTransform(textTransform: TextTransform?): Modifier

CSS Text transform of the current component.

then

open infix fun then(other: Modifier): Modifier

Concatenates this modifier with other modifier.

title

fun Modifier.title(title: String?): Modifier

Set the title attribute.

top

fun Modifier.top(top: CssSize?): Modifier

Top edge of the current component.

transition

fun Modifier.transition(transition: Transition?): Modifier

CSS transition effect for the current component.

fun Modifier.transition(property: String? = null, duration: Double? = null, timingFunction: String? = null, delay: Double? = null): Modifier

Set the CSS transition effect for the current component.

transitionList

fun Modifier.transitionList(transitionList: List<Transition>?): Modifier

List of CSS transition effects for the current component.

unicodeBidi

fun Modifier.unicodeBidi(unicodeBidi: UnicodeBidi?): Modifier

CSS Text unicode-bidi of the current component.

useOn

@Composable

open override fun <E : HTMLElement> useOn(tag: ITag<E>)

verticalAlign

fun Modifier.verticalAlign(verticalAlign: VerticalAlign?): Modifier

CSS Text vertical align of the current component.

visibility

fun Modifier.visibility(visibility: Visibility?): Modifier

CSS visibility of the current component.

whiteSpace

fun Modifier.whiteSpace(whiteSpace: WhiteSpace?): Modifier

CSS Text white space of the current component.

width

fun Modifier.width(width: CssSize?): Modifier

Width of the current component.

widthIn

fun Modifier.widthIn(min: CssSize? = null, max: CssSize? = null): Modifier

Constrain the width of the component to be between min and max.

wordBreak

fun Modifier.wordBreak(wordBreak: WordBreak?): Modifier

CSS word break of the current component.

wordSpacing

fun Modifier.wordSpacing(wordSpacing: CssSize?): Modifier

CSS Text word spacing of the current component.

zIndex

fun Modifier.zIndex(zIndex: Int?): Modifier

Z-index of the current component.