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 SuperDialog, SuperDropdown, SuperSpinner, and ListPopup 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 |
| 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 |
| Slider | Sliding control for value adjustment | Volume control, range 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 |
|---|---|---|
| SuperArrow | Arrow component based on BasicComponent | Clickable indication, navigation hints |
| SuperSwitch | Switch component based on BasicComponent | Setting switches, feature enabling |
| SuperCheckbox | Checkbox component based on BasicComponent | Multiple selection, terms agreement |
| SuperListPopup | List popup component based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Option selection, feature list |
| SuperDropdown | Dropdown menu based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Option selection, feature list |
| SuperSpinner | Advanced menu based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Advanced options, feature list |
| SuperBottomSheet | Bottom sheet based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Bottom drawer, additional options |
| SuperDialog | Dialog window based on BasicComponent (uses MiuixPopupUtils; requires Scaffold) | Prompts, action confirmation |
| WindowListPopup | Window-level list popup component | Option selection, feature list |
| WindowDropdown | Window-level dropdown menu component | Option selection, feature list |
| WindowSpinner | Window-level advanced menu component | Advanced options, feature list |
| WindowBottomSheet | Window-level bottom sheet component | Bottom drawer, additional options |
| WindowDialog | Window-level dialog component | Prompts, action confirmation |
