miuix-ui/top.yukonga.miuix.kmp.basic

Package-level declarations

Types

Link copied to clipboard
@Immutable
data class BasicComponentColors(val color: Color, val disabledColor: Color)
Link copied to clipboard
Link copied to clipboard
@Immutable
data class ButtonColors(val color: Color, val disabledColor: Color, val contentColor: Color, val disabledContentColor: Color)
Link copied to clipboard
Link copied to clipboard
@Immutable
data class CardColors(val color: Color, val contentColor: Color)
Link copied to clipboard
object CardDefaults
Link copied to clipboard
@Immutable
data class CheckboxColors(checkedForegroundColor: Color, uncheckedForegroundColor: Color, disabledCheckedForegroundColor: Color, disabledUncheckedForegroundColor: Color, checkedBackgroundColor: Color, uncheckedBackgroundColor: Color, disabledCheckedBackgroundColor: Color, disabledUncheckedBackgroundColor: Color)
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
@Immutable
data class DropdownColors(val contentColor: Color, val summaryColor: Color, val containerColor: Color, val selectedContentColor: Color, val selectedSummaryColor: Color, val selectedContainerColor: Color, val selectedIndicatorColor: Color)

Colors used by dropdown option rows.

Link copied to clipboard
Link copied to clipboard
@Stable
data class DropdownEntry(val items: List<DropdownItem>, val enabled: Boolean = true)

A group of dropdown items.

Link copied to clipboard
@Stable
data class DropdownItem(val text: String, val enabled: Boolean = true, val selected: Boolean = false, val onClick: () -> Unit? = null, val icon: @Composable (Modifier) -> Unit? = null, val summary: String? = null, val children: List<DropdownItem>? = null)

An item shown inside a dropdown, spinner, or dropdown menu.

Link copied to clipboard
@JvmInline
value class FabPosition
Link copied to clipboard
object FloatingActionButtonDefaults

Contains default values used by FloatingActionButton.

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
@Immutable
data class ListPopupLayoutInfo(val windowBounds: IntRect, val popupMargin: IntRect, val effectiveTransformOrigin: TransformOrigin, val localTransformOrigin: TransformOrigin, val popupLayoutPosition: PopupLayoutPosition)
Link copied to clipboard
object NavigationBarDefaults

Contains default values used by NavigationBar and NavigationBarItem.

Link copied to clipboard
enum NavigationBarDisplayMode : Enum<NavigationBarDisplayMode>

Defines the display mode for items in a NavigationBar.

Link copied to clipboard
@Immutable
data class NavigationItem(val label: String, val icon: ImageVector)

The data class for NavigationBar.

Link copied to clipboard
object NavigationRailDefaults

Contains default values used by NavigationRail and NavigationRailItem.

Link copied to clipboard
enum NavigationRailDisplayMode : Enum<NavigationRailDisplayMode>

Defines the display mode for items in a NavigationRail.

Link copied to clipboard
@Immutable
data class NumberPickerColors(selectedTextColor: Color, unselectedTextColor: Color, disabledSelectedTextColor: Color, disabledUnselectedTextColor: Color)

The colors for a NumberPicker.

Link copied to clipboard
object NumberPickerDefaults

Contains default values used by NumberPicker.

Link copied to clipboard
@Immutable
data class PopupLayoutPosition(val showBelow: Boolean, val showAbove: Boolean, val isRightAligned: Boolean)
Link copied to clipboard
Link copied to clipboard
@Immutable
data class ProgressIndicatorColors(foregroundColor: Color, disabledForegroundColor: Color, backgroundColor: Color)
Link copied to clipboard
Link copied to clipboard
object PullToRefreshDefaults

Default values for the PullToRefresh component.

Link copied to clipboard
class PullToRefreshState(coroutineScope: CoroutineScope)

A UI state holder for the PullToRefresh composable.

Link copied to clipboard
@Immutable
data class RadioButtonColors(selectedColor: Color, disabledSelectedColor: Color)
Link copied to clipboard
Link copied to clipboard
sealed interface RefreshState

Represents the various visual states of the pull-to-refresh indicator.

Link copied to clipboard
interface ScrollBarAdapter

Defines how to scroll the scrollable component and how to display a scrollbar for it.

Link copied to clipboard
@Immutable
data class ScrollBarColors(val thumbColor: Color, val trackColor: Color)

Colors for the scrollbar component.

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
object SearchBarDefaults

Contains default values used by SearchBar and InputField.

Link copied to clipboard
@Immutable
data class SliderColors(foregroundColor: Color, disabledForegroundColor: Color, backgroundColor: Color, disabledBackgroundColor: Color, thumbColor: Color, disabledThumbColor: Color, keyPointColor: Color, keyPointForegroundColor: Color)
Link copied to clipboard
Link copied to clipboard
object SmallTitleDefaults

Contains default values used by SmallTitle.

Link copied to clipboard
@Immutable
data class SnackbarColors(val containerColor: Color, val contentColor: Color, val actionContentColor: Color, val dismissActionContentColor: Color)

Colors for Snackbar.

Link copied to clipboard
interface SnackbarData

Interface representing the data of a Snackbar.

Link copied to clipboard
object SnackbarDefaults

Defaults for Snackbar.

Link copied to clipboard
sealed interface SnackbarDuration

Possible durations of the Snackbar.

Link copied to clipboard
Link copied to clipboard
enum SnackbarResult : Enum<SnackbarResult>

Possible results of the Snackbar.

Link copied to clipboard
@Immutable
data class SnackbarVisuals(val message: String, val actionLabel: String?, val withDismissAction: Boolean, val duration: SnackbarDuration)

Visuals for a Snackbar.

Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
Link copied to clipboard
@Immutable
data class SwitchColors(checkedThumbColor: Color, uncheckedThumbColor: Color, disabledCheckedThumbColor: Color, disabledUncheckedThumbColor: Color, checkedTrackColor: Color, uncheckedTrackColor: Color, disabledCheckedTrackColor: Color, disabledUncheckedTrackColor: Color)
Link copied to clipboard
Link copied to clipboard
@Immutable
data class TabRowColors(backgroundColor: Color, contentColor: Color, selectedBackgroundColor: Color, selectedContentColor: Color)
Link copied to clipboard
Link copied to clipboard
@Immutable
data class TextButtonColors(val color: Color, val disabledColor: Color, val textColor: Color, val disabledTextColor: Color)
Link copied to clipboard
object TextFieldDefaults

Contains default values used by TextField.

Link copied to clipboard
@JvmInline
value class ToolbarPosition

Represents the position of a floating toolbar within the Scaffold. Used by Scaffold for placement calculations.

Link copied to clipboard
object TopAppBarDefaults

Contains default values used by TopAppBar and SmallTopAppBar.

Link copied to clipboard
@Stable
class TopAppBarState(initialHeightOffsetLimit: Float, initialHeightOffset: Float, initialContentOffset: Float)

A state object that can be hoisted to control and observe the top app bar state. The state is read and updated by a ScrollBehavior implementation.

Properties

Link copied to clipboard
val LocalNavigationBarDisplayMode: ProvidableCompositionLocal<NavigationBarDisplayMode>

A composition local to control the display mode for items in a NavigationBar.

Link copied to clipboard
val LocalNavigationRailDisplayMode: ProvidableCompositionLocal<NavigationRailDisplayMode>

A composition local to control the display mode for items in a NavigationRail.

Functions

Link copied to clipboard
@Composable
fun BasicComponent(modifier: Modifier = Modifier, startAction: @Composable () -> Unit? = null, endActions: @Composable RowScope.() -> Unit? = null, bottomAction: @Composable () -> Unit? = null, insideMargin: PaddingValues = BasicComponentDefaults.InsideMargin, onClick: () -> Unit? = null, onClickLabel: String? = null, role: Role? = null, holdDownState: Boolean = false, enabled: Boolean = true, interactionSource: MutableInteractionSource? = null, content: @Composable ColumnScope.() -> Unit)
@Composable
fun BasicComponent(modifier: Modifier = Modifier, title: String? = null, titleColor: BasicComponentColors = BasicComponentDefaults.titleColor(), summary: String? = null, summaryColor: BasicComponentColors = BasicComponentDefaults.summaryColor(), startAction: @Composable () -> Unit? = null, endActions: @Composable RowScope.() -> Unit? = null, bottomAction: @Composable () -> Unit? = null, insideMargin: PaddingValues = BasicComponentDefaults.InsideMargin, onClick: () -> Unit? = null, onClickLabel: String? = null, role: Role? = null, holdDownState: Boolean = false, enabled: Boolean = true, interactionSource: MutableInteractionSource? = null)

A basic component with Miuix style. Widely used in other extension components.

Link copied to clipboard
@Composable
fun Button(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, cornerRadius: Dp = ButtonDefaults.CornerRadius, minWidth: Dp = ButtonDefaults.MinWidth, minHeight: Dp = ButtonDefaults.MinHeight, colors: ButtonColors = ButtonDefaults.buttonColors(), insideMargin: PaddingValues = ButtonDefaults.InsideMargin, interactionSource: MutableInteractionSource? = null, indication: Indication? = LocalIndication.current, content: @Composable RowScope.() -> Unit)

A Button component with Miuix style.

Link copied to clipboard
@Composable
fun Card(modifier: Modifier = Modifier, cornerRadius: Dp = CardDefaults.CornerRadius, insideMargin: PaddingValues = CardDefaults.InsideMargin, colors: CardColors = CardDefaults.defaultColors(), content: @Composable ColumnScope.() -> Unit)

A Card component with Miuix style. Card contain content and actions that relate information about a subject.

@Composable
fun Card(modifier: Modifier = Modifier, cornerRadius: Dp = CardDefaults.CornerRadius, insideMargin: PaddingValues = CardDefaults.InsideMargin, colors: CardColors = CardDefaults.defaultColors(), pressFeedbackType: PressFeedbackType = PressFeedbackType.None, showIndication: Boolean = false, holdDownState: Boolean = false, onClick: () -> Unit? = null, onLongPress: () -> Unit? = null, content: @Composable ColumnScope.() -> Unit)

A Card component with Miuix style. Card contain contain content and actions that relate information about a subject.

Link copied to clipboard
@Composable
fun Checkbox(state: ToggleableState, onClick: () -> Unit?, modifier: Modifier = Modifier, colors: CheckboxColors = CheckboxDefaults.checkboxColors(), enabled: Boolean = true)

A Checkbox component with Miuix style, supporting three states: On, Off, and Indeterminate.

Link copied to clipboard
@Composable
fun CircularProgressIndicator(modifier: Modifier = Modifier, progress: Float? = null, colors: ProgressIndicatorColors = ProgressIndicatorDefaults.progressIndicatorColors(), strokeWidth: Dp = ProgressIndicatorDefaults.DefaultCircularProgressIndicatorStrokeWidth, size: Dp = ProgressIndicatorDefaults.DefaultCircularProgressIndicatorSize)

A CircularProgressIndicator with Miuix style.

Link copied to clipboard
@Composable
fun ColorPalette(color: Color, onColorChanged: (Color) -> Unit, modifier: Modifier = Modifier, rows: Int = 7, hueColumns: Int = 12, includeGrayColumn: Boolean = true, showPreview: Boolean = true, cornerRadius: Dp = 16.dp, indicatorRadius: Dp = 10.dp)

A color palette component that allows users to select colors from a grid of HSV values.

Link copied to clipboard
@Composable
fun ColorPicker(color: Color, onColorChanged: (Color) -> Unit, modifier: Modifier = Modifier, showPreview: Boolean = true, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect, colorSpace: ColorSpace = ColorSpace.HSV)

A ColorPicker component with Miuix style that supports multiple color spaces.

Link copied to clipboard
fun Modifier.drawCheckerboard(cellSizeDp: Dp = 3.dp, lightColor: Color = Color(0xFFCCCCCC), darkColor: Color = Color(0xFFAAAAAA)): Modifier
Link copied to clipboard
@Composable
fun RowScope.DropdownArrowEndAction(actionColor: Color, modifier: Modifier = Modifier)
Link copied to clipboard
@Composable
fun DropdownImpl(text: String, optionSize: Int, isSelected: Boolean, index: Int, dropdownColors: DropdownColors = DropdownDefaults.dropdownColors(), enabled: Boolean = true, dialogMode: Boolean = false, onSelectedIndexChange: (Int) -> Unit)

@Composable
fun DropdownImpl(item: DropdownItem, optionSize: Int, isSelected: Boolean, index: Int, dropdownColors: DropdownColors = DropdownDefaults.dropdownColors(), enabled: Boolean = item.enabled, dialogMode: Boolean = false, hasSubmenu: Boolean = false, isFirst: Boolean = index == 0, isLast: Boolean = index == optionSize - 1, onSelectedIndexChange: (Int) -> Unit)

The implementation of the dropdown.

Link copied to clipboard
@Composable
fun FloatingActionButton(onClick: () -> Unit, modifier: Modifier = Modifier, shape: Shape = CircleShape, containerColor: Color = MiuixTheme.colorScheme.primary, shadowElevation: Dp = FloatingActionButtonDefaults.ShadowElevation, minWidth: Dp = FloatingActionButtonDefaults.MinWidth, minHeight: Dp = FloatingActionButtonDefaults.MinHeight, content: @Composable () -> Unit)

A FloatingActionButton component with Miuix style.

Link copied to clipboard
@Composable
fun FloatingNavigationBar(modifier: Modifier = Modifier, color: Color = MiuixTheme.colorScheme.surfaceContainer, cornerRadius: Dp = FloatingToolbarDefaults.CornerRadius, horizontalAlignment: Alignment.Horizontal = CenterHorizontally, horizontalOutSidePadding: Dp = FloatingNavigationBarDefaults.HorizontalOutSidePadding, shadowElevation: Dp = FloatingNavigationBarDefaults.ShadowElevation, showDivider: Boolean = false, defaultWindowInsetsPadding: Boolean = true, content: @Composable () -> Unit)

A floating navigation bar that supports 2 to 5 items.

Link copied to clipboard
@Composable
fun FloatingNavigationBarItem(selected: Boolean, onClick: () -> Unit, icon: ImageVector, label: String, modifier: Modifier = Modifier, enabled: Boolean = true)

A FloatingNavigationBarItem that is suitable for FloatingNavigationBar.

Link copied to clipboard
@Composable
fun FloatingToolbar(modifier: Modifier = Modifier, color: Color = FloatingToolbarDefaults.defaultColor(), cornerRadius: Dp = FloatingToolbarDefaults.CornerRadius, outSidePadding: PaddingValues = FloatingToolbarDefaults.OutSidePadding, shadowElevation: Dp = 4.dp, showDivider: Boolean = false, content: @Composable () -> Unit)

A FloatingToolbar that renders its content in a Card, arranged either horizontally or vertically. The actual placement on screen is handled by the parent, typically Scaffold.

Link copied to clipboard
@Composable
fun HorizontalDivider(modifier: Modifier = Modifier, thickness: Dp = DividerDefaults.Thickness, color: Color = DividerDefaults.DividerColor)

A divider is a thin line that groups content in lists and layouts.

Link copied to clipboard
@Composable
fun HorizontalScrollBar(adapter: ScrollBarAdapter, modifier: Modifier = Modifier, reverseLayout: Boolean = false, trackPadding: PaddingValues = PaddingValues(0.dp), colors: ScrollBarColors = ScrollBarDefaults.scrollBarColors(), thumbWidth: Dp = ScrollBarDefaults.ThumbWidth, cornerRadius: Dp = ScrollBarDefaults.CornerRadius, thumbMinLength: Dp = ScrollBarDefaults.ThumbMinLength, endPadding: Dp = ScrollBarDefaults.EndPadding)

A horizontal scrollbar.

Link copied to clipboard
@Composable
fun HsvAlphaSlider(currentHue: Float, currentSaturation: Float, currentValue: Float, currentAlpha: Float, onAlphaChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A HsvAlphaSlider component for selecting the alpha of a color.

Link copied to clipboard
@Composable
fun HsvColorPicker(color: Color, onColorChanged: (Color) -> Unit, modifier: Modifier = Modifier, showPreview: Boolean = true, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A HsvColorPicker component with Miuix style using HSV color space.

Link copied to clipboard
@Composable
fun HsvHueSlider(currentHue: Float, onHueChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A HsvHueSlider component for selecting the hue of a color using pure HSV colors.

Link copied to clipboard
@Composable
fun HsvSaturationSlider(currentHue: Float, currentSaturation: Float, onSaturationChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A HsvSaturationSlider component for selecting the saturation of a color.

Link copied to clipboard
@Composable
fun HsvValueSlider(currentHue: Float, currentSaturation: Float, currentValue: Float, onValueChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A HsvValueSlider component for selecting the value/brightness of a color.

Link copied to clipboard
@Composable
fun Icon(bitmap: ImageBitmap, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current)

A Icon component that draws bitmap using tint, with a default value.

@Composable
fun Icon(painter: Painter, tint: ColorProducer?, contentDescription: String?, modifier: Modifier = Modifier)
@Composable
fun Icon(painter: Painter, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current)

A Icon component that draws painter using tint, with a default value.

@Composable
fun Icon(imageVector: ImageVector, contentDescription: String?, modifier: Modifier = Modifier, tint: Color = LocalContentColor.current)

A Icon component that draws imageVector using tint, with a default value.

Link copied to clipboard
@Composable
fun IconButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, holdDownState: Boolean = false, backgroundColor: Color = Color.Unspecified, cornerRadius: Dp = IconButtonDefaults.CornerRadius, minHeight: Dp = IconButtonDefaults.MinHeight, minWidth: Dp = IconButtonDefaults.MinWidth, content: @Composable () -> Unit)

A IconButton component with Miuix style.

Link copied to clipboard
@Composable
fun InfiniteProgressIndicator(modifier: Modifier = Modifier, color: Color = Color.Gray, size: Dp = ProgressIndicatorDefaults.DefaultInfiniteProgressIndicatorSize, strokeWidth: Dp = ProgressIndicatorDefaults.DefaultInfiniteProgressIndicatorStrokeWidth, orbitingDotSize: Dp = ProgressIndicatorDefaults.DefaultInfiniteProgressIndicatorOrbitingDotSize)

A InfiniteProgressIndicator with Miuix style. The indicator is a circular indicator with an orbiting dot.

Link copied to clipboard
@Composable
fun InputField(query: String, onQueryChange: (String) -> Unit, onSearch: (String) -> Unit, expanded: Boolean, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, label: String = "", enabled: Boolean = true, textStyle: TextStyle? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, interactionSource: MutableInteractionSource? = null)

A text field to input a query in a search bar with Miuix style.

Link copied to clipboard
@Composable
fun LinearProgressIndicator(modifier: Modifier = Modifier, progress: Float? = null, colors: ProgressIndicatorColors = ProgressIndicatorDefaults.progressIndicatorColors(), height: Dp = ProgressIndicatorDefaults.DefaultLinearProgressIndicatorHeight)

A LinearProgressIndicator with Miuix style.

Link copied to clipboard
@Composable
fun ListPopupColumn(content: @Composable () -> Unit)

A column that automatically aligns the width to the widest item.

Link copied to clipboard
@Composable
fun ListPopupContent(popupContentSize: IntSize, onPopupContentSizeChange: (IntSize) -> Unit, fractionProgress: () -> Float, alphaProgress: () -> Float, popupLayoutPosition: PopupLayoutPosition, localTransformOrigin: TransformOrigin, modifier: Modifier = Modifier, content: @Composable () -> Unit)
Link copied to clipboard
@Composable
fun MiuixScrollBehavior(state: TopAppBarState = rememberTopAppBarState(), canScroll: () -> Boolean = { true }, snapAnimationSpec: AnimationSpec<Float>? = spring(stiffness = 2500f), flingAnimationSpec: DecayAnimationSpec<Float>? = rememberSplineBasedDecay()): ScrollBehavior

Returns a ScrollBehavior that adjusts its properties to affect the colors and height of the top app bar.

Link copied to clipboard
@Composable
fun NavigationBar(modifier: Modifier = Modifier, color: Color = MiuixTheme.colorScheme.surface, showDivider: Boolean = true, defaultWindowInsetsPadding: Boolean = true, mode: NavigationBarDisplayMode = NavigationBarDisplayMode.IconAndText, content: @Composable RowScope.() -> Unit)

A NavigationBar that with 2 to 5 items.

Link copied to clipboard
@Composable
fun RowScope.NavigationBarItem(selected: Boolean, onClick: () -> Unit, icon: ImageVector, label: String, modifier: Modifier = Modifier, enabled: Boolean = true)

A NavigationBarItem that is suitable for NavigationBar.

Link copied to clipboard
@Composable
fun NavigationRail(modifier: Modifier = Modifier, header: @Composable ColumnScope.() -> Unit? = null, color: Color = MiuixTheme.colorScheme.surface, showDivider: Boolean = true, defaultWindowInsetsPadding: Boolean = true, minWidth: Dp = NavigationRailDefaults.MinWidth, mode: NavigationRailDisplayMode = NavigationRailDisplayMode.IconAndText, content: @Composable ColumnScope.() -> Unit)

A NavigationRail that is suitable for wide screens.

Link copied to clipboard
@Composable
fun NavigationRailItem(selected: Boolean, onClick: () -> Unit, icon: ImageVector, label: String, modifier: Modifier = Modifier, enabled: Boolean = true)

A NavigationRailItem that is suitable for NavigationRail.

Link copied to clipboard
@Composable
fun NumberPicker(value: Int, onValueChange: (Int) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, range: IntRange = 0..10, label: (Int) -> String = { it.toString() }, visibleItemCount: Int = 5, wrapAround: Boolean = false, colors: NumberPickerColors = NumberPickerDefaults.colors(), textStyle: TextStyle = MiuixTheme.textStyles.title1, itemHeight: Dp = NumberPickerDefaults.ItemHeight)

A NumberPicker component with Miuix style.

Link copied to clipboard
@Composable
fun OkHsvAlphaSlider(currentH: Float, currentS: Float, currentV: Float, currentAlpha: Float, onAlphaChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkHsvAlphaSlider component for selecting the alpha of a color using OkHSV.

Link copied to clipboard
@Composable
fun OkHsvColorPicker(color: Color, onColorChanged: (Color) -> Unit, modifier: Modifier = Modifier, showPreview: Boolean = true, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkHsvColorPicker component with Miuix style using OkHSV color space based on OkLab. OkHSV provides better perceptual uniformity than traditional HSV.

Link copied to clipboard
@Composable
fun OkHsvHueSlider(currentH: Float, onHueChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkHsvHueSlider component for selecting the hue of a color using OkHSV color space.

Link copied to clipboard
@Composable
fun OkHsvSaturationSlider(currentH: Float, currentS: Float, onSaturationChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkHsvSaturationSlider component for selecting the saturation of a color using OkHSV.

Link copied to clipboard
@Composable
fun OkHsvValueSlider(currentH: Float, currentS: Float, currentV: Float, onValueChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkHsvValueSlider component for selecting the value/brightness of a color using OkHSV.

Link copied to clipboard
@Composable
fun OkLabAChannelSlider(currentL: Float, currentA: Float, currentB: Float, onAChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkLabAChannelSlider component for selecting the A channel (green-red axis) of a color in OkLab space.

Link copied to clipboard
@Composable
fun OkLabAlphaSlider(currentL: Float, currentA: Float, currentB: Float, currentAlpha: Float, onAlphaChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkLabAlphaSlider component for selecting the alpha of a color in OkLab space.

Link copied to clipboard
@Composable
fun OkLabBChannelSlider(currentL: Float, currentA: Float, currentB: Float, onBChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkLabBChannelSlider component for selecting the B channel (blue-yellow axis) of a color in OkLab space.

Link copied to clipboard
@Composable
fun OkLabColorPicker(color: Color, onColorChanged: (Color) -> Unit, modifier: Modifier = Modifier, showPreview: Boolean = true, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkLabColorPicker component with Miuix style using OkLab color space.

Link copied to clipboard
@Composable
fun OkLabLightnessSlider(currentL: Float, currentA: Float, currentB: Float, onLightnessChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkLabLightnessSlider component for selecting the lightness (L) of a color in OkLab space.

Link copied to clipboard
@Composable
fun OkLchAlphaSlider(currentL: Float, currentC: Float, currentH: Float, currentAlpha: Float, onAlphaChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)
Link copied to clipboard
@Composable
fun OkLchChromaSlider(currentL: Float, currentC: Float, currentH: Float, onChromaChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)
Link copied to clipboard
@Composable
fun OkLchColorPicker(color: Color, onColorChanged: (Color) -> Unit, modifier: Modifier = Modifier, showPreview: Boolean = true, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)

A OkLchColorPicker component with Miuix style using OkLch color space.

Link copied to clipboard
@Composable
fun OkLchHueSlider(currentL: Float, currentC: Float, currentH: Float, onHueChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)
Link copied to clipboard
@Composable
fun OkLchLightnessSlider(currentL: Float, currentC: Float, currentH: Float, onLightnessChanged: (Float) -> Unit, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect)
Link copied to clipboard
@Composable
fun PullToRefresh(isRefreshing: Boolean, onRefresh: () -> Unit, modifier: Modifier = Modifier, pullToRefreshState: PullToRefreshState = rememberPullToRefreshState(), contentPadding: PaddingValues = PaddingValues(0.dp), topAppBarScrollBehavior: ScrollBehavior? = null, color: Color = PullToRefreshDefaults.color, circleSize: Dp = PullToRefreshDefaults.circleSize, refreshTexts: List<String> = PullToRefreshDefaults.refreshTexts, refreshTextStyle: TextStyle = PullToRefreshDefaults.refreshTextStyle, content: @Composable () -> Unit)

A container that supports the "pull-to-refresh" gesture.

Link copied to clipboard
@Composable
fun RadioButton(selected: Boolean, onClick: () -> Unit?, modifier: Modifier = Modifier, colors: RadioButtonColors = RadioButtonDefaults.radioButtonColors(), enabled: Boolean = true)

A RadioButton component with Miuix style.

Link copied to clipboard
@Composable
fun RangeSlider(value: ClosedFloatingPointRange<Float>, onValueChange: (ClosedFloatingPointRange<Float>) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, @IntRange(from = 0) steps: Int = 0, onValueChangeFinished: () -> Unit? = null, height: Dp = SliderDefaults.MinHeight, colors: SliderColors = SliderDefaults.sliderColors(), hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect, showKeyPoints: Boolean = false, keyPoints: List<Float>? = null, magnetThreshold: Float = 0.02f)

A RangeSlider component with Miuix style.

Link copied to clipboard
@Composable
fun rememberListPopupLayoutInfo(alignment: PopupPositionProvider.Align, popupPositionProvider: PopupPositionProvider, parentBounds: IntRect, popupContentSize: IntSize): ListPopupLayoutInfo
Link copied to clipboard
@Composable
fun rememberPullToRefreshState(): PullToRefreshState

Creates and remembers a PullToRefreshState across recompositions.

Link copied to clipboard
Link copied to clipboard
@Composable
fun rememberTopAppBarState(initialHeightOffsetLimit: Float = -Float.MAX_VALUE, initialHeightOffset: Float = 0.0f, initialContentOffset: Float = 0.0f): TopAppBarState

Creates a TopAppBarState that is remembered across compositions.

Link copied to clipboard
@Composable
fun Scaffold(modifier: Modifier = Modifier, topBar: @Composable () -> Unit = {}, bottomBar: @Composable () -> Unit = {}, floatingActionButton: @Composable () -> Unit = {}, floatingActionButtonPosition: FabPosition = FabPosition.End, floatingToolbar: @Composable () -> Unit = {}, floatingToolbarPosition: ToolbarPosition = ToolbarPosition.BottomCenter, snackbarHost: @Composable () -> Unit = {}, popupHost: @Composable () -> Unit = { MiuixPopupHost() }, containerColor: Color = MiuixTheme.colorScheme.surface, contentWindowInsets: WindowInsets = WindowInsets.systemBars.union(WindowInsets.displayCutout), content: @Composable (PaddingValues) -> Unit)

A Scaffold component with Miuix style.

Link copied to clipboard
@Composable
fun SearchBar(inputField: @Composable () -> Unit, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, insideMargin: DpSize = SearchBarDefaults.InsideMargin, expanded: Boolean = false, outsideEndAction: @Composable () -> Unit? = null, content: @Composable ColumnScope.() -> Unit)

A SearchBar component with Miuix style.

Link copied to clipboard
@Composable
fun Slider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, @IntRange(from = 0) steps: Int = 0, onValueChangeFinished: () -> Unit? = null, reverseDirection: Boolean = false, height: Dp = SliderDefaults.MinHeight, colors: SliderColors = SliderDefaults.sliderColors(), hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect, showKeyPoints: Boolean = false, keyPoints: List<Float>? = null, magnetThreshold: Float = 0.02f)

A Slider component with Miuix style.

Link copied to clipboard
@Composable
fun SmallTitle(text: String, modifier: Modifier = Modifier, textColor: Color = MiuixTheme.colorScheme.onBackgroundVariant, insideMargin: PaddingValues = SmallTitleDefaults.InsideMargin)

A SmallTitle with Miuix style.

Link copied to clipboard
@Composable
fun SmallTopAppBar(title: String, modifier: Modifier = Modifier, color: Color = MiuixTheme.colorScheme.surface, titleColor: Color = MiuixTheme.colorScheme.onSurface, subtitle: String = "", subtitleColor: Color = MiuixTheme.colorScheme.onSurfaceVariantSummary, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, scrollBehavior: ScrollBehavior? = null, defaultWindowInsetsPadding: Boolean = true, titlePadding: Dp = TopAppBarDefaults.TitlePadding, navigationIconPadding: Dp = TopAppBarDefaults.NavigationIconPadding, actionIconPadding: Dp = TopAppBarDefaults.ActionIconPadding, bottomContent: @Composable () -> Unit = {})

A SmallTopAppBar with Miuix style.

Link copied to clipboard
@Composable
fun Snackbar(data: SnackbarData, modifier: Modifier = Modifier, cornerRadius: Dp = SnackbarDefaults.CornerRadius, colors: SnackbarColors = SnackbarDefaults.snackbarColors(), insideMargin: PaddingValues = SnackbarDefaults.InsideMargin)

A Snackbar is a temporary message that appears at the bottom of the screen.

Link copied to clipboard
@Composable
fun SnackbarHost(state: SnackbarHostState, modifier: Modifier = Modifier, canSwipeToDismiss: Boolean = true, content: @Composable (SnackbarData) -> Unit = { Snackbar(it) })

Host for Snackbars to be shown.

Link copied to clipboard
@Composable
fun SpinnerItemImpl(entry: DropdownItem, entryCount: Int, isSelected: Boolean, index: Int, spinnerColors: DropdownColors, dialogMode: Boolean = false, onSelectedIndexChange: (Int) -> Unit)

The implementation of the spinner.

Link copied to clipboard
@Composable
fun Surface(modifier: Modifier = Modifier, shape: Shape = SurfaceDefaults.Shape, color: Color = MiuixTheme.colorScheme.surface, contentColor: Color = MiuixTheme.colorScheme.onSurface, border: BorderStroke? = null, shadowElevation: Dp = SurfaceDefaults.ShadowElevation, content: @Composable () -> Unit)
@Composable
fun Surface(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = SurfaceDefaults.Shape, color: Color = MiuixTheme.colorScheme.surface, contentColor: Color = MiuixTheme.colorScheme.onSurface, border: BorderStroke? = null, shadowElevation: Dp = SurfaceDefaults.ShadowElevation, interactionSource: MutableInteractionSource? = null, indication: Indication? = LocalIndication.current, content: @Composable () -> Unit)

A Surface component with Miuix style.

Link copied to clipboard
@Composable
fun Switch(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, modifier: Modifier = Modifier, colors: SwitchColors = SwitchDefaults.switchColors(), enabled: Boolean = true)

A Switch component with Miuix style.

Link copied to clipboard
@Composable
fun TabRow(tabs: List<String>, selectedTabIndex: Int, onTabSelected: (Int) -> Unit, modifier: Modifier = Modifier, colors: TabRowColors = TabRowDefaults.tabRowColors(), minWidth: Dp = TabRowDefaults.TabRowMinWidth, maxWidth: Dp = TabRowDefaults.TabRowMaxWidth, height: Dp = TabRowDefaults.TabRowHeight, cornerRadius: Dp = TabRowDefaults.TabRowCornerRadius, itemSpacing: Dp = 9.dp, contentAlignment: Alignment = Alignment.Center, listState: LazyListState? = null, interactionSource: MutableInteractionSource? = null, indication: Indication? = null)

A TabRow with Miuix style.

Link copied to clipboard
@Composable
fun TabRowWithContour(tabs: List<String>, selectedTabIndex: Int, onTabSelected: (Int) -> Unit, modifier: Modifier = Modifier, colors: TabRowColors = TabRowDefaults.tabRowColors(), minWidth: Dp = TabRowDefaults.TabRowWithContourMinWidth, maxWidth: Dp = TabRowDefaults.TabRowWithContourMaxWidth, height: Dp = TabRowDefaults.TabRowWithContourHeight, cornerRadius: Dp = TabRowDefaults.TabRowWithContourCornerRadius, itemSpacing: Dp = 5.dp, contentAlignment: Alignment = Alignment.Center, listState: LazyListState? = null, interactionSource: MutableInteractionSource? = null, indication: Indication? = null)

A TabRowWithContour with Miuix style.

Link copied to clipboard
@Composable
fun Text(text: String, modifier: Modifier = Modifier, color: Color = Color.Unspecified, autoSize: TextAutoSize? = null, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Unspecified, textDecoration: TextDecoration? = null, textAlign: TextAlign? = null, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, onTextLayout: (TextLayoutResult) -> Unit? = null, style: TextStyle = LocalTextStyles.current.main)

A Text component with Miuix style.

@Composable
fun Text(text: AnnotatedString, modifier: Modifier = Modifier, color: Color = Color.Unspecified, autoSize: TextAutoSize? = null, fontSize: TextUnit = TextUnit.Unspecified, fontStyle: FontStyle? = null, fontWeight: FontWeight? = null, fontFamily: FontFamily? = null, letterSpacing: TextUnit = TextUnit.Unspecified, textDecoration: TextDecoration? = null, textAlign: TextAlign? = null, lineHeight: TextUnit = TextUnit.Unspecified, overflow: TextOverflow = TextOverflow.Clip, softWrap: Boolean = true, maxLines: Int = Int.MAX_VALUE, minLines: Int = 1, inlineContent: Map<String, InlineTextContent> = mapOf(), onTextLayout: (TextLayoutResult) -> Unit = {}, style: TextStyle = LocalTextStyles.current.main)

A text component with Miuix style. High level element that displays text and provides semantics / accessibility information.

Link copied to clipboard
@Composable
fun TextButton(text: String, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, cornerRadius: Dp = ButtonDefaults.CornerRadius, minWidth: Dp = ButtonDefaults.MinWidth, minHeight: Dp = ButtonDefaults.MinHeight, colors: TextButtonColors = ButtonDefaults.textButtonColors(), insideMargin: PaddingValues = ButtonDefaults.InsideMargin, interactionSource: MutableInteractionSource? = null, indication: Indication? = LocalIndication.current)

A TextButton component with Miuix style.

Link copied to clipboard
@Composable
fun TextField(state: TextFieldState, modifier: Modifier = Modifier, insideMargin: DpSize = TextFieldDefaults.InsideMargin, backgroundColor: Color = MiuixTheme.colorScheme.secondaryContainer, cornerRadius: Dp = TextFieldDefaults.CornerRadius, label: String = "", labelColor: Color = MiuixTheme.colorScheme.onSecondaryContainer, borderColor: Color = MiuixTheme.colorScheme.primary, useLabelAsPlaceholder: Boolean = false, enabled: Boolean = true, readOnly: Boolean = false, inputTransformation: InputTransformation? = null, textStyle: TextStyle = MiuixTheme.textStyles.main, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, onKeyboardAction: KeyboardActionHandler? = null, lineLimits: TextFieldLineLimits = TextFieldLineLimits.Default, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, onTextLayout: Density.(getResult: () -> TextLayoutResult?) -> Unit? = null, interactionSource: MutableInteractionSource? = null, cursorBrush: Brush = SolidColor(borderColor), outputTransformation: OutputTransformation? = null, scrollState: ScrollState = rememberScrollState())
@Composable
fun TextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = Modifier, insideMargin: DpSize = TextFieldDefaults.InsideMargin, backgroundColor: Color = MiuixTheme.colorScheme.secondaryContainer, cornerRadius: Dp = TextFieldDefaults.CornerRadius, label: String = "", labelColor: Color = MiuixTheme.colorScheme.onSecondaryContainer, borderColor: Color = MiuixTheme.colorScheme.primary, useLabelAsPlaceholder: Boolean = false, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = MiuixTheme.textStyles.main, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, singleLine: Boolean = false, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, visualTransformation: VisualTransformation = VisualTransformation.None, onTextLayout: (TextLayoutResult) -> Unit = {}, interactionSource: MutableInteractionSource? = null, cursorBrush: Brush = SolidColor(MiuixTheme.colorScheme.primary))

A TextField component with Miuix style.

@Composable
fun TextField(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, insideMargin: DpSize = TextFieldDefaults.InsideMargin, backgroundColor: Color = MiuixTheme.colorScheme.secondaryContainer, cornerRadius: Dp = TextFieldDefaults.CornerRadius, label: String = "", labelColor: Color = MiuixTheme.colorScheme.onSecondaryContainer, borderColor: Color = MiuixTheme.colorScheme.primary, useLabelAsPlaceholder: Boolean = false, enabled: Boolean = true, readOnly: Boolean = false, textStyle: TextStyle = MiuixTheme.textStyles.main, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, singleLine: Boolean = false, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, visualTransformation: VisualTransformation = VisualTransformation.None, onTextLayout: (TextLayoutResult) -> Unit = {}, interactionSource: MutableInteractionSource? = null, cursorBrush: Brush = SolidColor(MiuixTheme.colorScheme.primary))

A text field component with Miuix style.

Link copied to clipboard
@Composable
fun TopAppBar(title: String, modifier: Modifier = Modifier, color: Color = MiuixTheme.colorScheme.surface, titleColor: Color = MiuixTheme.colorScheme.onSurface, largeTitle: String = title, largeTitleColor: Color = MiuixTheme.colorScheme.onSurface, subtitle: String = "", subtitleColor: Color = MiuixTheme.colorScheme.onSurfaceVariantSummary, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, scrollBehavior: ScrollBehavior? = null, defaultWindowInsetsPadding: Boolean = true, titlePadding: Dp = TopAppBarDefaults.TitlePadding, navigationIconPadding: Dp = TopAppBarDefaults.NavigationIconPadding, actionIconPadding: Dp = TopAppBarDefaults.ActionIconPadding, bottomContent: @Composable () -> Unit = {})

A TopAppBar with Miuix style that can collapse and expand based on the scroll position of the content below it.

Link copied to clipboard
@Composable
fun VerticalDivider(modifier: Modifier = Modifier, thickness: Dp = DividerDefaults.Thickness, color: Color = DividerDefaults.DividerColor)

A divider is a thin line that groups content in lists and layouts.

Link copied to clipboard
@Composable
fun VerticalScrollBar(adapter: ScrollBarAdapter, modifier: Modifier = Modifier, reverseLayout: Boolean = false, trackPadding: PaddingValues = PaddingValues(0.dp), colors: ScrollBarColors = ScrollBarDefaults.scrollBarColors(), thumbWidth: Dp = ScrollBarDefaults.ThumbWidth, cornerRadius: Dp = ScrollBarDefaults.CornerRadius, thumbMinLength: Dp = ScrollBarDefaults.ThumbMinLength, endPadding: Dp = ScrollBarDefaults.EndPadding)

A vertical scrollbar.

Link copied to clipboard
@Composable
fun VerticalSlider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, @IntRange(from = 0) steps: Int = 0, onValueChangeFinished: () -> Unit? = null, reverseDirection: Boolean = false, width: Dp = SliderDefaults.MinHeight, colors: SliderColors = SliderDefaults.sliderColors(), effect: Boolean = false, hapticEffect: SliderDefaults.SliderHapticEffect = SliderDefaults.DefaultHapticEffect, showKeyPoints: Boolean = false, keyPoints: List<Float>? = null, magnetThreshold: Float = 0.02f)

A vertical Slider component with Miuix style.

Generated by Dokka
© 2026 Copyright