harmony 鸿蒙div

2023-06-24
浏览 (458)

div

The <div> component is a basic container that is used as the root node of the page structure or is used to group the content.

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Supported

Attributes

Name	Type	Default Value	Mandatory	Description
id	string	-	No	Unique ID of the component.
style	string	-	No	Style declaration of the component.
class	string	-	No	Style class of the component, which is used to refer to a style table.
ref	string	-	No	Reference information of child elements, which is registered with the parent component on $refs.

Events

Name	Parameter	Description
click	-	Triggered when the component is clicked.
longpress	-	Triggered when the component is long pressed.
swipe⁵⁺	SwipeEvent	Triggered when a user quickly swipes on the component.

Styles

Name	Type	Default Value	Mandatory	Description
flex-direction	string	row	No	Main axis direction of the flex container, which defines how items are placed in the container. Available values are as follows: - column: Items are placed vertically from top to bottom. - row: Items are placed horizontally from left to right.
flex-wrap	string	nowrap	No	Whether items in the flex container are displayed in a single line or multiple lines. The value cannot be dynamically updated. Available values are as follows: - nowrap: Flex items are displayed in a single line. - wrap: Flex items are displayed in multiple lines.
justify-content	string	flex-start	No	How items are aligned along the main axis of the flex container. Available values are as follows: - flex-start: Items are packed toward the start edge of the container along the main axis. - flex-end: Items are packed toward the end edge of the container along the main axis. - center: Items are packed toward the center of the container along the main axis. - space-between: Items are positioned with space between the rows. - space-around: Items are positioned with space before, between, and after the rows.
align-items	string	stretch⁵⁺ flex-start^1-4	No	How items are aligned along the cross axis in a flex container. Available values are as follows: - stretch: Items are stretched to the same height or width as the container along the cross axis.⁵⁺ - flex-start: Items are packed toward the start edge of the cross axis. - flex-end: Items are packed toward the end edge of the cross axis. - center: Items are packed toward the center of the cross axis.
display	string	flex	No	Type of the view box of the item. The value cannot be dynamically updated. Available values are as follows: - flex: flexible layout - none: not rendered
width	<length> \|<percentage>⁵⁺	-	No	Component width. If this attribute is not set, the default value 0 is used.
height	<length> \|<percentage>⁵⁺	-	No	Component height. If this attribute is not set, the default value 0 is used.
padding	<length>	0	No	Shorthand attribute to set the padding for all sides. The attribute can have one to four values: - If you set only one value, it specifies the padding for all the four sides. - If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding. - If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding. - If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).
padding-[left\|top\|right\|bottom]	<length>	0	No	Left, top, right, and bottom padding.
margin	<length> \|<percentage>⁵⁺	0	No	Shorthand attribute to set the margin for all sides. The attribute can have one to four values: - If you set only one value, it specifies the margin for all the four sides. - If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins. - If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin. - If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).
margin-[left\|top\|right\|bottom]	<length> \|<percentage>⁵⁺	0	No	Left, top, right, and bottom margins.
border-width	<length>	0	No	Shorthand attribute to set the margin for all sides.
border-color	<color>	black	No	Shorthand attribute to set the color for all borders.
border-radius	<length>	-	No	Radius of round-corner borders.
background-color	<color>	-	No	Background color.
opacity⁵⁺	number	1	No	Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.
[left\|top]	<length> \|<percentage>⁶⁺	-	No	Edge of the element. - left: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block. - top: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.

Example

Flex style

   <!-- xxx.hml -->
   <div class="container">
     <div class="flex-box">
       <div class="flex-item color-primary"></div>
       <div class="flex-item color-warning"></div>
       <div class="flex-item color-success"></div>
     </div>
   </div>

   /* xxx.css */
   .container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 454px;
     height: 454px;
   }
   .flex-box {
     justify-content: space-around;
     align-items: center;
     width: 400px;
     height: 140px;
     background-color: #ffffff;
   }
   .flex-item {
     width: 120px;
     height: 120px;
     border-radius: 16px;
   }
   .color-primary {
     background-color: #007dff;
   }
   .color-warning {
     background-color: #ff7500;
   }
   .color-success {
     background-color: #41ba41;
   }

en-us_image_0000001381108420

Flex wrap style

   <!-- xxx.hml -->
   <div class="container">
     <div class="flex-box">
       <div class="flex-item color-primary"></div>
       <div class="flex-item color-warning"></div>
       <div class="flex-item color-success"></div>
     </div>
   </div>

   /* xxx.css */
   .container {
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 454px;
     height: 454px;
   }
   .flex-box {
     justify-content: space-around;
     align-items: center;
     flex-wrap: wrap;
     width: 300px;
     height: 250px;
     background-color: #ffffff;
   }
   .flex-item {
     width: 120px;
     height: 120px;
     border-radius: 16px;
   }
   .color-primary {
     background-color: #007dff;
   }
   .color-warning {
     background-color: #ff7500;
   }
   .color-success {
     background-color: #41ba41;
   }

en-us_image_0000001431148457