1e41f4b71Sopenharmony_ci# Polymorphic Component Overview 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciAs 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. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ciPolymorphic components have the following characteristics: 7e41f4b71Sopenharmony_ci 8e41f4b71Sopenharmony_ci- 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) 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ci- 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. 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci- 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. 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ci## Component Statuses 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ci- 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. 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci- 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. 19e41f4b71Sopenharmony_ci 20e41f4b71Sopenharmony_ciCommon button statuses are as follows. 21e41f4b71Sopenharmony_ci 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci| |  |  | 24e41f4b71Sopenharmony_ci| -------- | -------- | -------- | 25e41f4b71Sopenharmony_ci|**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. | 26e41f4b71Sopenharmony_ci|  |  |  | 27e41f4b71Sopenharmony_ci|**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.| 28e41f4b71Sopenharmony_ci 29e41f4b71Sopenharmony_ci 30e41f4b71Sopenharmony_ci# Component Lists 31e41f4b71Sopenharmony_ci 32e41f4b71Sopenharmony_ci## Navigation 33e41f4b71Sopenharmony_ci 34e41f4b71Sopenharmony_ci|| | | 35e41f4b71Sopenharmony_ci| -------- | -------- | -------- | 36e41f4b71Sopenharmony_ci|[Bottom tab](multimodal-bottom-tab.md)| [Subtab](multimodal-subtab.md)| [Title bar](multimodal-title-bar.md)| 37e41f4b71Sopenharmony_ci| | |  | 38e41f4b71Sopenharmony_ci|[Sidebar](multimodal-sidebar.md)| [Page indicator](multimodal-swiper.md)| [Stepper](multimodal-stepper.md)| 39e41f4b71Sopenharmony_ci 40e41f4b71Sopenharmony_ci 41e41f4b71Sopenharmony_ci## Display Components 42e41f4b71Sopenharmony_ci 43e41f4b71Sopenharmony_ci| | |  | 44e41f4b71Sopenharmony_ci| -------- | -------- | -------- | 45e41f4b71Sopenharmony_ci|[Divider](multimodal-divider.md)|[Bubble](multimodal-bubble.md)|[Progress bar](multimodal-progress-bar.md)| 46e41f4b71Sopenharmony_ci||  | | 47e41f4b71Sopenharmony_ci|[Badge](multimodal-badge.md)| [Instant tip](multimodal-instant-tip.md)|[Data panel](multimodal-data-panel.md)| 48e41f4b71Sopenharmony_ci| | | | 49e41f4b71Sopenharmony_ci| [Text](multimodal-text.md)| | | 50e41f4b71Sopenharmony_ci 51e41f4b71Sopenharmony_ci 52e41f4b71Sopenharmony_ci## Operation-related Components 53e41f4b71Sopenharmony_ci 54e41f4b71Sopenharmony_ci| | | | 55e41f4b71Sopenharmony_ci| -------- | -------- | -------- | 56e41f4b71Sopenharmony_ci|[Button](multimodal-button.md) |[Drop-down list](multimodal-drop-down-menu.md)|[State button](multimodal-state-button.md)| 57e41f4b71Sopenharmony_ci| | | | 58e41f4b71Sopenharmony_ci|[Index bar](multimodal-index-bar.md)| [Scrollbar](multimodal-scrollbar.md)|[Pull to refresh](multimodal-pull-to-refresh.md)| 59e41f4b71Sopenharmony_ci| | | | 60e41f4b71Sopenharmony_ci|[Menu](multimodal-menu.md)| | | 61e41f4b71Sopenharmony_ci 62e41f4b71Sopenharmony_ci 63e41f4b71Sopenharmony_ci## Input Components 64e41f4b71Sopenharmony_ci 65e41f4b71Sopenharmony_ci| |  | 66e41f4b71Sopenharmony_ci| -------- | -------- | 67e41f4b71Sopenharmony_ci|[Text box](multimodal-text-box.md) |[Search box](multimodal-search-box.md)| | 68e41f4b71Sopenharmony_ci 69e41f4b71Sopenharmony_ci## Selection Components 70e41f4b71Sopenharmony_ci 71e41f4b71Sopenharmony_ci| | | | 72e41f4b71Sopenharmony_ci| -------- | -------- | -------- | 73e41f4b71Sopenharmony_ci| [Tick box](multimodal-tick-box.md)| [Toggle](multimodal-toggle.md)| [Radio button](multimodal-radio-button.md)| 74e41f4b71Sopenharmony_ci| | | | 75e41f4b71Sopenharmony_ci| [Check box](multimodal-check-box.md)|[Rating bar](multimodal-rating-bar.md)| [Slider](multimodal-slider.md)| 76e41f4b71Sopenharmony_ci| | | | 77e41f4b71Sopenharmony_ci|[Picker](multimodal-picker.md)| | | 78e41f4b71Sopenharmony_ci 79e41f4b71Sopenharmony_ci 80e41f4b71Sopenharmony_ci## Container Components 81e41f4b71Sopenharmony_ci 82e41f4b71Sopenharmony_ci| | | 83e41f4b71Sopenharmony_ci| -------- | -------- | 84e41f4b71Sopenharmony_ci|[Panel](multimodal-slidable-panel.md)| [Dialog](multimodal-dialog.md)| | 85
