Components
COUI provides a rich set of UI components that strictly follow the OPPO ColorOS design language. Each component is carefully designed to ensure visual and interactive consistency with the native ColorOS 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 |
| BreadcrumbBar | Horizontal breadcrumb navigation bar | File path navigation, location trail |
| 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 |
| LoadingButton | Text button with a built-in loading state | Asynchronous action submission |
| IconButton | Icon button component | Auxiliary actions, toolbars |
| Chip | Checkable capsule filter tag | Content filtering, tag selection |
| 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 |
| InputView | Card-style input field | Form filling, dialog input |
| CodeTextField | Verification code input with cells | OTP / verification code entry |
| 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 |
| DatePicker | Date wheel picker (year / month / day) | Date selection, forms |
| TimePicker | Time wheel picker (hour / minute) | Time selection, alarms |
| Stepper | Increment / decrement integer control | Quantity adjustment, value tuning |
| ProgressIndicator | Displays operation progress status | Loading, progress display |
| Snackbar | Temporary message bar for brief feedback | Operation result, status notification |
| TopTips | Tip banner at the top of a page | Page hints, announcements |
| Tooltip | Brief label shown on hover or long press | Icon button labels, element hints |
| Badge | Small status overlay on an anchor | Unread counts, status dots |
| 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 |
| FullPageStatement | Full-page user agreement statement | First-launch agreement, privacy statement |
| ColorPalette | Grid palette with alpha slider | Theme settings, color selection |
| ColorPicker | Color selection control | Theme settings, color selection |
| ColorSwatchPicker | Circular color swatch row with selection ring | 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 |
| SwitchLoadingPreference | Switch preference with a loading state | Asynchronous setting switches |
| CheckboxPreference | Checkbox component based on BasicComponent | Multiple selection, terms agreement |
| RadioButtonPreference | Radio button component based on BasicComponent | Exclusive choices, option selection |
| MarkPreference | Single-select row with a selection mark | Single-select lists, option selection |
| ButtonPreference | Preference row with a small inline button | Inline actions in settings lists |
| ListPreference | Preference row opening a bottom-sheet choice panel (requires Scaffold) | Single / multiple choice settings |
| RecommendedPreference | Rounded card recommending related settings | Related settings recommendations |
| SliderPreference | Slider component based on BasicComponent | Value adjustment, volume/brightness |
| RangeSliderPreference | Range slider component based on BasicComponent | Range selection, price filter |
| OverlayListPopup | List popup component based on BasicComponent (uses COUIPopupUtils; requires Scaffold) | Option selection, feature list |
| OverlayCascadingListPopup | Two-level cascading list popup (uses COUIPopupUtils; requires Scaffold) | Submenus, grouped action panels |
| OverlayDropdownPreference | Dropdown selector based on BasicComponent (uses COUIPopupUtils; requires Scaffold) | Option selection, feature list |
| OverlaySpinnerPreference | Advanced selector based on BasicComponent (uses COUIPopupUtils; requires Scaffold) | Advanced options, feature list |
| OverlayDropdownMenu | Action menu based on BasicComponent (uses COUIPopupUtils; requires Scaffold) | Action menus, multi-select choices |
| OverlayIconDropdownMenu | Icon-button action menu (uses COUIPopupUtils; requires Scaffold) | Toolbar actions, overflow menu |
| OverlayIconCascadingDropdownMenu | Icon-button cascading two-level menu (uses COUIPopupUtils; requires Scaffold) | Toolbar actions with submenus |
| OverlayBottomSheet | Bottom sheet based on BasicComponent (uses COUIPopupUtils; requires Scaffold) | Bottom drawer, additional options |
| OverlayDialog | Dialog window based on BasicComponent (uses COUIPopupUtils; requires Scaffold) | Prompts, action confirmation |
| LoadingDialog | Loading dialog with spinner (Overlay and Window variants) | Blocking loading feedback |
| SecurityDialog | Security statement dialog (Overlay and Window variants) | Privacy statement, security confirmation |
| DialogButtonBar | Dialog button bar that auto-stacks vertically when labels do not fit | Dialog actions |
| 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 |
