I. Classification of basic components

Common components of HarmonyOS are declared in an XML file under Resources/Base/Layout, and then in AbilitySlice through super.setuicontent (ResourceTable). File name of a layout) to load the layout. FindComponentById (ResourceTable) in AbilitySlice. Component ID). After obtaining the component, you can perform operations on the component, such as adding listeners and setting content. Controls can also be used dynamically through code.

Inheritance relationships between components:

The basic components are classified as follows (individual classification) :

• The text class

Text, TextField

• Button class

Button, Switch, RadioButton, RadioContainer, Checkbox

• Class pictures

Image

• The selector class

Picker, DatePicker, TimePick

• The progress bar

ProgressBar, RoundProgressBar

• navigation

TabList, Tab, PageSlider, PageSliderIndicator

• Dialog window pops

ToastDialog, PopupDialog, CommonDialog

• The list of

ListContainer

• The scroll bar

ScrollView

• Web page

WebView

Ii. Classification description

(1) text class

Text provides a Text display. TextField provides a text input field.

Properties of Text:

The attribute name	Property description	Use case
text	According to the text	Ohos :text=” text content”
hint	Tooltip text	Ohos :hint=” please enter username”
text_font	The font	ohos:text_font=”HwChinese-medium”
truncation_mode	Long text truncation	No truncation ohos: truncation_mode = “none” . =” ellipsIS_AT_start “truncated with ellipsis . =” ellipsis_AT_middle “truncated with ellipsis . =” ellipsis_AT_end “truncated with ellipsis . =”auto_scrolling” displays the entire text
text_size	Text size	ohos:text_size=”30″ ohos:text_size=”16fp”
element_padding	Margin between text and image	.
bubble_width bubble_height bubble_left_width bubble_left_height bubble_right_width bubble_right_height	Text bubble width Text bubble height Text bubble left width Text bubble left height Text bubble right width Text bubble right height	A float type representing the size. They can be floating point values, which default to px; It can also be a floating point value with px/ VP /fp units; Float resources can also be referenced.
max_text_lines	Text input type	Ohos: text_input_type = “pattern_null” type . =”pattern_text” Type of text . = “pattern_number” Numbers . = “pattern_password” password
text_input_type	Input key type	ohos:input_enter_key_type= “Enter_key_type_unspecified” type . =”enter_key_type_search” Indicates the search action . Action = “enter_key_type_go” “go” . =”enter_key_type_send” Indicates the “send” action
auto_scrolling_duration	Automatic roll time	ohos:auto_scrolling_duration=”1000″
multiple_lines	Multi-line mode Settings	ohos:multiple_lines=”true”
auto_font_size	Supports automatic text font resizing	ohos:auto_font_size=”true”
scrollable	Whether text is scrollable	ohos:scrollable=”true”
italic	Whether the text is in italic font	ohos:italic=”true”
padding_for_text	Sets whether the top and bottom of the text is white by default.	ohos:padding_for_text=”true”
additional_line_spacing	Line spacing to be increased	Ohos: additional_line_spacing = “2.0”
line_height_num	Multiple of line spacing	Ohos: line_height_num = “1.5”
element_left element_top element_right element_bottom element_start element_end	Text left icon Top text icon Icon to the right of text Icon below text Text start direction icon Text end direction icon	Can directly configure the color value, also can reference color resources or reference media/graphic image resources.

The common XML attributes of TextField inherit from: Text

TextField’s own properties:

The attribute name	Property description	Use case
basement	Input box baseline	Can directly configure the color value, also can reference color resources or reference media/graphic image resources.

(2) button class

A Button is a common component that can be clicked to trigger an action, usually consisting of text or an icon, or both.

Button has no XML attributes of its own. The common XML attributes are inherited from: Text, and there are no other special attributes.

Switch is a component that toggles a single setting on/off.

The common XML attribute of Switch is inherited from: Text. The XML attribute of Switch is shown in the following table:

The attribute name	Property description	Use case
text_state_on text_state_off	Text displayed when enabled The text displayed when closed	You can set a text string directly, or you can reference a String resource
track_element thumb_element check_element	Track style Thumb style Status flag style	Can directly configure the color value, also can reference color resources or reference media/graphic image resources.
marked	Current status (selected or unchecked)	You can set true/false directly or refer to a Boolean resource. True indicates that the current status is selected. False indicates that the current status is not selected.

RadioButton is used for multiple operations. It needs to be used with RadioContainer to achieve single selection effect.

The common XML attribute of RadioButton is inherited from: Text. The self-owned XML attribute of RadioButton is shown in the following table:

The attribute name	Property description	Use case
marked	Current status (selected or unchecked)	You can set true/false directly or refer to a Boolean resource. True indicates that the current status is selected. False indicates that the current status is not selected.
text_color_on	The color of text in the selected state	You can set the color value directly or reference the color resource.
text_color_off	The color of the text in the unchecked state	You can set the color value directly or reference the color resource.
check_element	Status flag style	Can directly configure the color value, also can reference color resources or reference media/graphic image resources.

Checkbox allows you to check and deselect checkboxes.

The common XML attribute of Checkbox is inherited from: Text. The own XML attribute of Checkbox is shown in the following table:

The attribute name	Property description	Use case
marked	Current status (selected or unchecked)	ohos:marked=”true”
text_color_on text_color_off	The color of text in the selected state The color of the text in the unchecked state	You can set the color value directly or reference the color resource.
check_element	Status flag style	Can directly configure the color value, also can reference color resources or reference media/graphic image resources.

(3) image class

Image is the component used to display an Image.

The common XML attribute of Image inherits from: Component. The Image’s own XML attribute is shown in the following table:

The attribute name	Property description	Use case
clip_alignment	Image cropping alignment	Ohos :clip_alignment=”left” Left-aligned clipping . =”right” right aligned clipping . =”top” top aligned clipping . =”bottom” bottom aligned clipping . =”center” center aligned clipping
image_src	image	Can directly configure the color value, also can reference color resources or reference media/graphic image resources.
scale_mode	Image scaling type	Ohos :scale_mode=”center” indicates that the original Image is scaled to the narrowest edge of the Image and is centered . =”zoom_start” indicates that the original Image is scaled to the narrowest edge of the Image and displayed from the beginning . =”zoom_end” indicates that the original Image is scaled to the narrowest edge of the Image and displayed at the end. . =”stretch” : the original Image is scaled to the same size as the Image. . =”center” indicates that the middle part of the original Image is displayed according to the size of Image without scaling. . =”inside” indicates that the original Image is scaled to the same or smaller size as Image and is centered. . =” clip_Center “indicates that the original Image is scaled to the same or larger size as the Image and is centered.

To be continued….