Skip to content

D
Docs

yang2765 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 0
Fork 0
D
Docs

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 c0f961d3 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!1731 处理完成：#I4VL20 

Merge pull request !1731 from ester.zhou/TR-1503
上级 fa9ed42f f8b3225c
隐藏空白更改
内联 并排
Showing with 74 addition and 119 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @ c0f961d3
......@@ -9,9 +9,9 @@ The **<Button\>** component represents a component that can trigger actions.
None
## Child Component<a name="section13412913174619"></a>
## Child Components<a name="section13412913174619"></a>
This component can contain child components.
This component can contain a single child component.
## APIs<a name="section124082310463"></a>
......
en/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ c0f961d3
# Column<a name="EN-US_TOPIC_0000001192915096"></a>
# Column
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **<Column\>** component lays out child components vertically.
## Required Permissions<a name="section11841179295"></a>
The **<Column\>** component lays out child components vertically.
## Required Permissions
None
## Child Components<a name="section87974157296"></a>
This component can contain child components.
## APIs<a name="section14196162892911"></a>
Column\(value:\{space?: Length\}\)
- Parameters
<a name="table1392916196212"></a>
<table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p199307193217"><a name="p199307193217"></a><a name="p199307193217"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="22.99%" id="mcps1.1.6.1.2"><p id="p119302191128"><a name="p119302191128"></a><a name="p119302191128"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="10.65%" id="mcps1.1.6.1.3"><p id="p7930141911211"><a name="p7930141911211"></a><a name="p7930141911211"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="10.24%" id="mcps1.1.6.1.4"><p id="p1393020194219"><a name="p1393020194219"></a><a name="p1393020194219"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="40.01%" id="mcps1.1.6.1.5"><p id="p693061912210"><a name="p693061912210"></a><a name="p693061912210"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1924045711917"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p72401857201915"><a name="p72401857201915"></a><a name="p72401857201915"></a>space</p>
</td>
<td class="cellrowborder" valign="top" width="22.99%" headers="mcps1.1.6.1.2 "><p id="p14240957171918"><a name="p14240957171918"></a><a name="p14240957171918"></a>Length</p>
</td>
<td class="cellrowborder" valign="top" width="10.65%" headers="mcps1.1.6.1.3 "><p id="p62402572196"><a name="p62402572196"></a><a name="p62402572196"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="10.24%" headers="mcps1.1.6.1.4 "><p id="p4240957101912"><a name="p4240957101912"></a><a name="p4240957101912"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="40.01%" headers="mcps1.1.6.1.5 "><p id="p4240145781913"><a name="p4240145781913"></a><a name="p4240145781913"></a>Space between any two adjacent child components in the vertical layout.</p>
</td>
</tr>
</tbody>
</table>
## Attributes<a name="section358284262918"></a>
<a name="table1353mcpsimp"></a>
<table><thead align="left"><tr id="row1360mcpsimp"><th class="cellrowborder" valign="top" width="13%" id="mcps1.1.5.1.1"><p id="p1362mcpsimp"><a name="p1362mcpsimp"></a><a name="p1362mcpsimp"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="19%" id="mcps1.1.5.1.2"><p id="p1364mcpsimp"><a name="p1364mcpsimp"></a><a name="p1364mcpsimp"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="9%" id="mcps1.1.5.1.3"><p id="p1366mcpsimp"><a name="p1366mcpsimp"></a><a name="p1366mcpsimp"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="59%" id="mcps1.1.5.1.4"><p id="p1368mcpsimp"><a name="p1368mcpsimp"></a><a name="p1368mcpsimp"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1369mcpsimp"><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.5.1.1 "><p id="p1371mcpsimp"><a name="p1371mcpsimp"></a><a name="p1371mcpsimp"></a>alignItems</p>
</td>
<td class="cellrowborder" valign="top" width="19%" headers="mcps1.1.5.1.2 "><p id="p1373mcpsimp"><a name="p1373mcpsimp"></a><a name="p1373mcpsimp"></a><a href="#li8105435144314">HorizontalAlign</a></p>
</td>
<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.3 "><p id="p1375mcpsimp"><a name="p1375mcpsimp"></a><a name="p1375mcpsimp"></a>Center</p>
</td>
<td class="cellrowborder" valign="top" width="59%" headers="mcps1.1.5.1.4 "><p id="p1377mcpsimp"><a name="p1377mcpsimp"></a><a name="p1377mcpsimp"></a>Alignment mode of child components in the horizontal direction.</p>
</td>
</tr>
</tbody>
</table>
- <a name="li8105435144314"></a>HorizontalAlign enums
<a name="table3452114216394"></a>
<table><thead align="left"><tr id="row245219426397"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p545244283914"><a name="p545244283914"></a><a name="p545244283914"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p2452114203917"><a name="p2452114203917"></a><a name="p2452114203917"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row6452144218390"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p34529427398"><a name="p34529427398"></a><a name="p34529427398"></a>Start</p>
</td>
<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p1245211421393"><a name="p1245211421393"></a><a name="p1245211421393"></a>Aligned with the start edge in the same direction as the language in use.</p>
</td>
</tr>
<tr id="row12452184217398"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p54523425398"><a name="p54523425398"></a><a name="p54523425398"></a>Center</p>
</td>
<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p745215426391"><a name="p745215426391"></a><a name="p745215426391"></a>Center alignment. This is the default alignment mode.</p>
</td>
</tr>
<tr id="row9452134213392"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p510719111403"><a name="p510719111403"></a><a name="p510719111403"></a>End</p>
</td>
<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p154533425394"><a name="p154533425394"></a><a name="p154533425394"></a>Aligned with the end edge in the same direction as the language in use.</p>
</td>
</tr>
</tbody>
</table>
## Example<a name="section14441203783118"></a>
## Child Components
Supported
## APIs
Column(value:{space?: Length})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| space | Length | No| 0 | Space between two adjacent child components in the vertical layout.|
## Attributes
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment mode of the child components in the horizontal direction.|
| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the vertical direction.|
- HorizontalAlign enums
| Name| Description|
| -------- | -------- |
| Start | Aligned with the start edge in the same direction as the language in use.|
| Center | Center aligned. This is the default alignment mode.|
| End | Aligned with the end edge in the same direction as the language in use.|
## Example
```
@Entry
@Component
struct ColumnExample {
build() {
Column({ space: 5 }) {
Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column({ space: 5 }) {
Column().width('100%').height(50).backgroundColor(0xAFEEEE)
Column().width('100%').height(50).backgroundColor(0x00FFFF)
}.width('90%').height(107).border({ width: 1 })
Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('50%').height(50).backgroundColor(0xAFEEEE)
Column().width('50%').height(50).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('50%').height(50).backgroundColor(0xAFEEEE)
Column().width('50%').height(50).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
Column() {
Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column({ space: 5 }) {
Column().width('100%').height(30).backgroundColor(0xAFEEEE)
Column().width('100%').height(30).backgroundColor(0x00FFFF)
}.width('90%').height(100).border({ width: 1 })
Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('30%').height(30).backgroundColor(0xAFEEEE)
Column().width('30%').height(30).backgroundColor(0x00FFFF)
}.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center)
Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() {
Column().width('30%').height(30).backgroundColor(0xAFEEEE)
Column().width('30%').height(30).backgroundColor(0x00FFFF)
}.height('15%').border({ width: 1 }).justifyContent(FlexAlign.End)
}.width('100%').padding({ top: 5 })
}
}
```
![](figures/column.gif)
![zh-cn_image_0000001219982721](figures/Column.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或