DOCSEARCHbyAlgolia
Submit Docs

Miuix UI Library

repository·main·Indexed 21 days ago

https://github.com/compose-miuix-ui/miuix

An experimental UI library for Compose Multiplatform providing a suite of components, navigation tools, and effects such as blur and squircle shapes. It includes specialized modules like miuix-ui, miuix-preference, miuix-icons, miuix-blur, miuix-squircle, miuix-nav, and miuix-shader. The library features MiuixTheme for color scheme management and ThemeController for Monet dynamic colors.

Tokens
269.8K
Snippets
640
Records
859
Agent score
74%

What's inside Miuix

  1. Overview of Miuix Extended Components

    main

    Extended components are specialized versions of basic components, often designed for settings menus, preference lists, or complex overlay interactions.

    Preference-based Components (based on BasicComponent)

    These are typically used in settings or configuration lists:

    • ArrowPreference: Includes a clickable navigation hint.
    • SwitchPreference, CheckboxPreference, RadioButtonPreference, SliderPreference, RangeSliderPreference: Specialized selection controls for preference lists.

    Overlay Components (requires Scaffold)

    These components appear as popups or drawers over the current content. They use MiuixPopupUtils internally:

    • OverlayListPopup / OverlayCascadingListPopup: List-based selection.
    • OverlayDropdownPreference / OverlaySpinnerPreference: Selector-based selection.
    • OverlayDropdownMenu / OverlayIconDropdownMenu / OverlayIconCascadingDropdownMenu: Action menus.
    • OverlayBottomSheet: Bottom drawer.
    • OverlayDialog: Prompts and confirmations.

    Window-level Components

    These components operate at the window level rather than being anchored to a specific Scaffold context:

    • WindowListPopup / WindowCascadingListPopup
    • WindowDropdownPreference / WindowSpinnerPreference
    • WindowDropdownMenu / WindowIconDropdownMenu / WindowIconCascadingDropdownMenu
    • WindowBottomSheet
    • WindowDialog

  2. Overview of Miuix Basic Components

    main

    Basic components are the fundamental building blocks for UI elements, ranging from containers and navigation to interactive controls and feedback mechanisms.

    Layout & Containers

    • Surface: Basic container for content and backgrounds.
    • Card: Container for grouping related information.
    • Divider: Used to separate content and define hierarchy.

    Navigation

    • TopAppBar: Top navigation bar for titles and primary actions.
    • NavigationBar: Bottom navigation for main page switching.
    • NavigationRail: Side navigation for large screens.
    • TabRow: Horizontal tab bar for category browsing.
    • BreadcrumbBar: Horizontal breadcrumb for location trails.

    Interactive Controls

    • Button / IconButton: Triggers for actions.
    • TextField / SearchBar: Text input and search functionality.
    • Switch / Checkbox / RadioButton: Selection controls (binary, multiple, or exclusive).
    • Slider / NumberPicker: Value adjustment controls.

    Feedback & Information

    • Text / SmallTitle: Text display with various styles.
    • ProgressIndicator: Displays operation status.
    • Snackbar: Temporary message bar for feedback.
    • Tooltip: Brief labels for hints.
    • Badge: Status overlays (e.g., unread counts).
    • Icon: Icon display component.
    • FloatingActionButton / FloatingToolbar: Primary or quick actions.
    • PullToRefresh: Pull-down refresh operation.
    • ColorPalette / ColorPicker: Color selection tools.

  3. Overview of Miuix

    main

    Miuix is a UI library built for Compose Multiplatform. It provides a comprehensive set of basic and complex components designed to implement the Xiaomi HyperOS design language, including its authentic aesthetics and interactive effects.

    Key features include:

    • Easy to Use: Designed with a low learning curve, similar to Compose Material.
    • Xiaomi Aesthetics: Authentic HyperOS design language.
    • Rich Components: Covers most application scenarios with both simple and complex components.
    • Cross-Platform: Supports Android, iOS, Desktop, and more using a single codebase via Compose Multiplatform.

  5. Overview of Miuix modules

    main

    Miuix is organized into several specialized modules:

    • miuix-ui: Core UI component library.
    • miuix-preference: Preference components library (depends on miuix-ui).
    • miuix-icons: Extended icon library (can be used independently).
    • miuix-blur: Blur effect library (can be used independently).
    • miuix-squircle: Squircle (smooth rounded corner) shapes library (can be used independently).
    • miuix-nav: Navigation library (can be used independently).
    • miuix-shader: Low-level runtime shader / render effect abstraction.

  6. Use TopAppBar for application headers

    main

    The TopAppBar component provides navigation, a title, and action buttons at the top of an interface. It is designed to be used within a Scaffold to ensure consistent layout. Miuix provides two main modes:

    1. SmallTopAppBar: A standard, compact top bar.
    2. TopAppBar: A component that supports a largeTitle and can react to scroll behavior to transition between expanded and collapsed states.

    Imports:

    import top.yukonga.miuix.kmp.basic.TopAppBar
import top.yukonga.miuix.kmp.basic.SmallTopAppBar
import top.yukonga.miuix.kmp.basic.MiuixScrollBehavior
import top.yukonga.miuix.kmp.basic.rememberTopAppBarState
    Scaffold(
    topBar = {
        SmallTopAppBar(
            title = "Title",
            navigationIcon = {
                IconButton(onClick = { /* Handle click event */ }) {
                    Icon(MiuixIcons.Back, contentDescription = "Back")
                }
            },
            actions = {
                IconButton(onClick = { /* Handle click event */ }) {
                    Icon(MiuixIcons.More, contentDescription = "More")
                }
            }
        )
    }
)

  7. Use ProgressIndicator components

    main

    Miuix provides three types of progress indicators to display operation status:

    1. LinearProgressIndicator: A horizontal progress bar.
    2. CircularProgressIndicator: A circular indicator, ideal for space-saving scenarios.
    3. InfiniteProgressIndicator: A spinning indicator for scenarios where the operation duration is unknown.

    All components support two states:

    • Determinate: Provide a progress value (a Float between 0.0 and 1.0) to show exact progress.
    • Indeterminate: Set progress = null to show an animation indicating an ongoing operation with unknown progress.
    import top.yukonga.miuix.kmp.basic.LinearProgressIndicator
import top.yukonga.miuix.kmp.basic.CircularProgressIndicator
import top.yukonga.miuix.kmp.basic.InfiniteProgressIndicator

// Determinate Linear
LinearProgressIndicator(progress = 0.5f)

// Indeterminate Circular
CircularProgressIndicator(progress = null)

// Infinite
InfiniteProgressIndicator()

  8. Use Slider components in Miuix

    main

    Miuix provides three types of slider components for continuous value selection:

    1. Slider: The standard horizontal slider for selecting a single value.
    2. VerticalSlider: A slider oriented vertically.
    3. RangeSlider: A slider used to select a range of values (a start and end point).

    These components are suitable for scenarios like volume control, brightness adjustment, or progress indicators.

    import top.yukonga.miuix.kmp.basic.Slider
import top.yukonga.miuix.kmp.basic.VerticalSlider
import top.yukonga.miuix.kmp.basic.RangeSlider

  9. Use SwitchPreference for settings and preferences

    main

    SwitchPreference is a toggle component used for settings and preference switching. It provides a title, an optional summary, and a switch control on the right side. It supports click interactions and can be customized with icons, additional actions, and custom colors.

    import top.yukonga.miuix.kmp.preference.SwitchPreference

var isChecked by remember { mutableStateOf(false) }

SwitchPreference(
    title = "开关选项",
    checked = isChecked,
    onCheckedChange = { isChecked = it }
)

  10. Use SwitchPreference for settings toggles

    main

    The SwitchPreference component is a preference item that provides a title, an optional summary, and a switch control on the right. It is designed for settings menus and preference toggles, supporting click interactions to change the switch state.

    import top.yukonga.miuix.kmp.preference.SwitchPreference

var isChecked by remember { mutableStateOf(false) }

SwitchPreference(
    title = "Switch Option",
    checked = isChecked,
    onCheckedChange = { isChecked = it }
)

  11. Supported Platforms in Miuix

    main

    Miuix is a Compose Multiplatform UI framework that allows you to build applications for multiple targets using a single codebase. The currently supported platforms are:

    • Android: Mobile devices.
    • iOS: iPhone and iPad devices.
    • Desktop (JVM): JVM-based desktop applications.
    • WasmJs: WebAssembly (Web) environments.
    • MacOS: Native macOS applications.
    • Js: JavaScript (Web) environments.

  12. Continuous push and pop animations

    main

    Because the navigation stack is driven by a single animatedTop float, multiple stack operations animate as a single continuous sweep.

    • Multi-push: Adding multiple entries sequentially (e.g., in a loop) results in a single continuous animation from the current depth to the new depth.
    • Multi-pop: Removing multiple entries (e.g., popping back to root) results in a continuous reverse motion.

    Transitions can access the specific type of change (e.g., Push, Pop, MultiPush, Replace) via NavTransitionScope.change to provide specialized animations for bulk operations.