Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 f8b3225c 编写于 作者: E ester.zhou
浏览文件
操作

update docs 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 86e58f27
隐藏空白更改
内联 并排
Showing with 74 addition and 119 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-button.md
浏览文件 @ f8b3225c
...@@ -9,9 +9,9 @@ The **<Button\>** component represents a component that can trigger actions. ...@@ -9,9 +9,9 @@ The **<Button\>** component represents a component that can trigger actions.
None 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> ## APIs<a name="section124082310463"></a>
......
en/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ f8b3225c
# Column<a name="EN-US_TOPIC_0000001192915096"></a> # Column
>![](../../public_sys-resources/icon-note.gif) **NOTE:** > ![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. > 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 None
## Child Components<a name="section87974157296"></a>
## Child Components
This component can contain child components.
Supported
## APIs<a name="section14196162892911"></a>
Column\(value:\{space?: Length\}\) ## APIs
- Parameters Column(value:{space?: Length})
<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> - Parameters
</th> | Name| Type| Mandatory| Default Value| Description|
<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> | space | Length | No| 0 | Space between two adjacent child components in the vertical layout.|
<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> ## Attributes
</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> | Name| Type| Default Value| Description|
</th> | -------- | -------- | -------- | -------- |
</tr> | alignItems | HorizontalAlign | HorizontalAlign.Center | Alignment mode of the child components in the horizontal direction.|
</thead> | justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the vertical direction.|
<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> - HorizontalAlign enums
<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> | Name| Description|
</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> | Start | Aligned with the start edge in the same direction as the language in use.|
</td> | Center | Center aligned. This is the default alignment mode.|
<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> | End | Aligned with the end edge in the same direction as the language in use.|
</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> ## Example
</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>
``` ```
@Entry @Entry
@Component @Component
struct ColumnExample { struct ColumnExample {
build() { build() {
Column({ space: 5 }) { Column() {
Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column({ space: 5 }) { Column({ space: 5 }) {
Column().width('100%').height(50).backgroundColor(0xAFEEEE) Column().width('100%').height(30).backgroundColor(0xAFEEEE)
Column().width('100%').height(50).backgroundColor(0x00FFFF) Column().width('100%').height(30).backgroundColor(0x00FFFF)
}.width('90%').height(107).border({ width: 1 }) }.width('90%').height(100).border({ width: 1 })
Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('alignItems(Start)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() { Column() {
Column().width('50%').height(50).backgroundColor(0xAFEEEE) Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(50).backgroundColor(0x00FFFF) Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 }) }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('alignItems(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Column() { Column() {
Column().width('50%').height(50).backgroundColor(0xAFEEEE) Column().width('50%').height(30).backgroundColor(0xAFEEEE)
Column().width('50%').height(50).backgroundColor(0x00FFFF) Column().width('50%').height(30).backgroundColor(0x00FFFF)
}.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 }) }.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 }) }.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.
先完成此消息的编辑！
想要评论请 注册 或