1# Polymorphic Component Overview 2 3 4As an integral part of an application that can run in multi-device scenarios, components must be able to run on different devices. Necessary adjustments must also be made to them in terms of visual, interaction, and animation to achieve optimal experience. A component that is displayed in different forms on different devices is referred to as a polymorphic component. 5 6Polymorphic components have the following characteristics: 7 8- Serving a variety of device forms, such as the default device, tablet, smart TV, telematics device, and smart wearable. (supported in OpenHarmony 3.2 and later versions) 9 10- Providing consistent effect in different scenarios: Polymorphic components enable the visual, interaction, and animation to be consistent in different scenarios, although attributes may be identical or differential in the design. 11 12- Enabling device-specific optimization: In addition to effect consistency, polymorphic components ensure that optimizations are made specific for different devices and the effects presented on the devices are optimal. 13 14## Component Statuses 15 16- Component statuses are visual presentations that show the current interaction phases of the components. The same state of different components should keep the same visual style, which must be clear and visible. 17 18- An application may be deployed on different devices. Some devices support multiple input modes. For example, a tablet can be connected to a Bluetooth keyboard and mouse for text editing. In this case, the component must meet the interaction requirements of both the keyboard and mouse, and support the focused and hover states. If the component does not support these two states, when users move focus using the keyboard or mouse over a given element, the component cannot render the appropriate state to give the user the correct visual guidance. OpenHarmony provides the default implementation for components in multiple interaction modes to support multiple input modes and unified interaction events. 19 20Common button statuses are as follows. 21 22 23| |  |  | 24| -------- | -------- | -------- | 25|**Normal**<br>The component is interactive.|**Disabled**<br>The component is non-interactive.| **Pressed**<br>The component is being touched.<br>Operation: Touch the component with a finger or click the component with a mouse, and hold it. | 26|  |  |  | 27|**Focused**<br>The component is focused. Operations:<br>- Use arrow keys on a keyboard or remote control to move the focus from one component over another.<br>- Use voice operations to allow a component to gain focus.| **Activated**<br>The component is activated. This state is used for the component that has multiple elements to be focused.<br>Operation: Click a focused subtab of a tab. Touch the tab to activate it.| **Hover**<br> The current component is hovered using a cursor.<br> Operation: Move the cursor over a component.| 28 29 30# Component Lists 31 32## Navigation 33 34|| | | 35| -------- | -------- | -------- | 36|[Bottom tab](multimodal-bottom-tab.md)| [Subtab](multimodal-subtab.md)| [Title bar](multimodal-title-bar.md)| 37| | |  | 38|[Sidebar](multimodal-sidebar.md)| [Page indicator](multimodal-swiper.md)| [Stepper](multimodal-stepper.md)| 39 40 41## Display Components 42 43| | |  | 44| -------- | -------- | -------- | 45|[Divider](multimodal-divider.md)|[Bubble](multimodal-bubble.md)|[Progress bar](multimodal-progress-bar.md)| 46||  | | 47|[Badge](multimodal-badge.md)| [Instant tip](multimodal-instant-tip.md)|[Data panel](multimodal-data-panel.md)| 48| | | | 49| [Text](multimodal-text.md)| | | 50 51 52## Operation-related Components 53 54| | | | 55| -------- | -------- | -------- | 56|[Button](multimodal-button.md) |[Drop-down list](multimodal-drop-down-menu.md)|[State button](multimodal-state-button.md)| 57| | | | 58|[Index bar](multimodal-index-bar.md)| [Scrollbar](multimodal-scrollbar.md)|[Pull to refresh](multimodal-pull-to-refresh.md)| 59| | | | 60|[Menu](multimodal-menu.md)| | | 61 62 63## Input Components 64 65| |  | 66| -------- | -------- | 67|[Text box](multimodal-text-box.md) |[Search box](multimodal-search-box.md)| | 68 69## Selection Components 70 71| | | | 72| -------- | -------- | -------- | 73| [Tick box](multimodal-tick-box.md)| [Toggle](multimodal-toggle.md)| [Radio button](multimodal-radio-button.md)| 74| | | | 75| [Check box](multimodal-check-box.md)|[Rating bar](multimodal-rating-bar.md)| [Slider](multimodal-slider.md)| 76| | | | 77|[Picker](multimodal-picker.md)| | | 78 79 80## Container Components 81 82| | | 83| -------- | -------- | 84|[Panel](multimodal-slidable-panel.md)| [Dialog](multimodal-dialog.md)| | 85
