Components
Miuix provides a rich set of UI components that strictly follow Xiaomi HyperOS Design Guidelines. Each component is carefully designed to ensure visual and interactive consistency with the native Xiaomi experience.
Scaffold Components
| Component | Description | Common Usage |
|---|---|---|
| Scaffold | Basic layout for applications | Page structure, content display |
WARNING
The Scaffold component provides a suitable container for cross-platform popup windows. Components such as OverlayDialog, OverlayDropdownPreference, OverlaySpinnerPreference, and OverlayListPopup are all implemented based on this and therefore need to be wrapped by this component.
Basic Components
| Component | Description | Common Usage |
|---|---|---|
| Surface | Basic container component | Content display, background container |
| TopAppBar | Application top navigation bar | Page title, primary actions |
| NavigationBar | Bottom navigation component | Main page switching |
| NavigationRail | Side navigation component | Main page switching (Large screen) |
| TabRow | Horizontal tab bar | Content category browsing |
| Card | Container with related information | Information display, content grouping |
| BasicComponent | Universal base component | Custom component development |
| Button | Interactive element for triggering actions | Form submission, action confirmation |
| IconButton | Icon button component | Auxiliary actions, toolbars |
| Text | Display text content with various styles | Titles, body text, descriptive text |
| SmallTitle | Small title component | Auxiliary titles, category labels |
| TextField | Receives user text input | Form filling, search boxes |
| Switch | Binary state toggle control | Setting switches, feature enabling |
| Checkbox | Multiple selection control | Multiple choices, terms agreement |
| RadioButton | Single selection control | Exclusive choices, option selection |
| Slider | Sliding control for value adjustment | Volume control, range selection |
| NumberPicker | Vertical scroll picker for number selection | Time picker, quantity selection |
| ProgressIndicator | Displays operation progress status | Loading, progress display |
| Snackbar | Temporary message bar for brief feedback | Operation result, status notification |
| Icon | Icon display component | Icon buttons, status indicators |
| FloatingActionButton | Floating action button | Primary actions, quick functions |
| FloatingToolbar | Floating toolbar | Quick actions, information display |
| Divider | Content separator | Block separation, hierarchy division |
| PullToRefresh | Pull-down refresh operation | Data update, page refresh |
| SearchBar | Search input field | Content search, quick find |
| ColorPalette | Grid palette with alpha slider | Theme settings, color selection |
| ColorPicker | Color selection control | Theme settings, color selection |
Extended Components
| Component | Description | Common Usage |
|---|---|---|
| ArrowPreference | Arrow component based on BasicComponent | Clickable indication, navigation hints |
| SwitchPreference | Switch component based on BasicComponent | Setting switches, feature enabling |
| CheckboxPreference | Checkbox component based on BasicComponent | Multiple selection, terms agreement |
| RadioButtonPreference | Radio button component based on BasicComponent | Exclusive choices, option selection |
| OverlayListPopup | List popup component based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Option selection, feature list |
| OverlayCascadingListPopup | Two-level cascading list popup (uses MiuixPopupUtils; requires Scaffold) | Submenus, grouped action panels |
| OverlayDropdownPreference | Dropdown selector based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Option selection, feature list |
| OverlaySpinnerPreference | Advanced selector based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Advanced options, feature list |
| OverlayDropdownMenu | Action menu based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Action menus, multi-select choices |
| OverlayIconDropdownMenu | Icon-button action menu (uses MiuixPopupUtils; requires Scaffold) | Toolbar actions, overflow menu |
| OverlayIconCascadingDropdownMenu | Icon-button cascading two-level menu (uses MiuixPopupUtils; requires Scaffold) | Toolbar actions with submenus |
| OverlayBottomSheet | Bottom sheet based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Bottom drawer, additional options |
| OverlayDialog | Dialog window based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Prompts, action confirmation |
| WindowListPopup | Window-level list popup component | Option selection, feature list |
| WindowCascadingListPopup | Window-level two-level cascading list popup | Submenus, grouped action panels |
| WindowDropdownPreference | Window-level dropdown selector component | Option selection, feature list |
| WindowSpinnerPreference | Window-level advanced selector component | Advanced options, feature list |
| WindowDropdownMenu | Window-level action menu component | Action menus, multi-select choices |
| WindowIconDropdownMenu | Window-level icon-button action menu component | Toolbar actions, overflow menu |
| WindowIconCascadingDropdownMenu | Window-level icon-button cascading two-level menu | Toolbar actions with submenus |
| WindowBottomSheet | Window-level bottom sheet component | Bottom drawer, additional options |
| WindowDialog | Window-level dialog component | Prompts, action confirmation |
