未验证 提交 fb54e4b2 编写于 作者: O openharmony_ci 提交者: Gitee

!8839 翻译完成 8747:ts-universal-attributes-size.md

Merge pull request !8839 from ester.zhou/TR-8747
# Size # Size
The size attribute is used to set the width, height, padding, and margin of a component.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
...@@ -17,20 +15,21 @@ None ...@@ -17,20 +15,21 @@ None
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| width | Length | - | Width of a component. By default, the width required to fully hold the component content is used. | | width | Length | - | Width of the component. By default, the width required to fully hold the component content is used.|
| height | Length | - | Height of the component. By default, the height required to fully hold the component content is used. | | height | Length | - | Height of the component. By default, the height required to fully hold the component content is used.|
| size | {<br/>width?: Length,<br/>height?: Length<br/>} | - | Height and width of the component. | | size | {<br>width?: Length,<br>height?: Length<br>} | - | Size of the component.|
| padding | {<br/>top?: Length,<br/>right?: Length,<br/>bottom?: Length,<br/>left?: Length<br/>} \| Length | 0 | Padding of the component.<br/>When the parameter is of the **Length** type, the four paddings take effect. | | padding | {<br>top?: Length,<br>right?: Length,<br>bottom?: Length,<br>left?: Length<br>} \| Length | 0 | Padding of the component.<br>When the parameter is of the **Length** type, the four paddings take effect.|
| margin | {<br/>top?: Length,<br/>right?: Length,<br/>bottom?: Length,<br/>left?: Length<br/>}<br/>\| Length | 0 | Margin of the component. <br/>When the parameter is of the **Length** type, the four margins take effect. | | margin | {<br>top?: Length,<br>right?: Length,<br>bottom?: Length,<br>left?: Length<br>}<br>\| Length | 0 | Margin of the component.<br>When the parameter is of the **Length** type, the four margins take effect.|
| constraintSize | {<br/>minWidth?: Length,<br/>maxWidth?: Length,<br/>minHeight?: Length,<br/>maxHeight?: Length<br/>} | {<br/>minWidth: 0,<br/>maxWidth: Infinity,<br/>minHeight: 0,<br/>maxHeight: Infinity<br/>} | Constraint size of the component, which is used to limit the size range during component layout. | | constraintSize | {<br>minWidth?: Length,<br>maxWidth?: Length,<br>minHeight?: Length,<br>maxHeight?: Length<br>} | {<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>} | Constraint size of the component, which is used to limit the size range during component layout.|
| layoutWeight | number | 0 | Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> This attribute is valid only for the **Row**, **Column**, and **Flex** layouts. | | layoutWeight | number \| string | 0 | Weight of the component during layout. When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.<br>> **NOTE**<br>> This attribute is valid only for the **Row**, **Column**, and **Flex** layouts.|
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct SizeExample { struct SizeExample {
...@@ -45,13 +44,13 @@ struct SizeExample { ...@@ -45,13 +44,13 @@ struct SizeExample {
}.backgroundColor(0xFFA500) }.backgroundColor(0xFFA500)
Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%') Text('layoutWeight').fontSize(12).fontColor(0xCCCCCC).width('90%')
// When the container size is determined, the layout of the component and slibing components is allocated based on the weight along the main axis. The component size setting is ignored. // When the container size is determined, the layout of the component and sibling components is allocated based on the weight along the main axis. The component size setting is ignored.
Row() { Row() {
// Weight 1 // Weight 1
Text('layoutWeight(1)') Text('layoutWeight(1)')
.size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center) .size({ width: '30%', height: 110 }).backgroundColor(0xFFEFD5).textAlign(TextAlign.Center)
.layoutWeight(1) .layoutWeight(1)
// Weight 0 // Weight 0
Text('layoutWeight(2)') Text('layoutWeight(2)')
.size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .size({ width: '30%', height: 110 }).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
.layoutWeight(2) .layoutWeight(2)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册