Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

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

!1824 处理完成：ArkUI Row组件、Select组件和TextClock组件 

Merge pull request !1824 from ester.zhou/TR-1562
上级 7742752d 591bb3d7
隐藏空白更改
内联 并排
Showing with 223 addition and 115 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-select.md 0 → 100644
浏览文件 @ 7e48872f
# Select
> ![](public_sys-resources/icon-note.gif) **NOTE** This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<Select\>** component provides a drop-down list box that allows users to select among multiple options.
## Required Permissions
None
## Child Components
None
## APIs
Select(options: Array<SelectOption>)
- `SelectOption` parameters
| Name| Type| Mandatory| Default Value| Description|
| ------ | ----------------------------------------------- | ---- | ------ | -------------- |
| value | [ResourceStr](../../ui/ts-types.md#ResourceStr) | Yes| - | Value of an option in the drop-down list box.|
| icon | [ResourceStr](../../ui/ts-types.md#ResourceStr) | No| - | Icon of an option in the drop-down list box.|
## Attributes
| Name| Type| Default Value| Description|
| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- |
| selected | number | - | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.|
| value | string | - | Text of the drop-down button.|
| font | [Font](../../ui/ts-types.md) | - | Text font of the drop-down button.|
| fontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the drop-down button.|
| selectedOptionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of the selected option in the drop-down list box.|
| selectedOptionFont | [Font](../../ui/ts-types.md) | - | Text font of the selected option in the drop-down list box.|
| selectedOptionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of the selected option in the drop-down list box.|
| optionBgColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Background color of an option in the drop-down list box.|
| optionFont | [Font](../../ui/ts-types.md) | - | Text font of an option in the drop-down list box.|
| optionFontColor | [ResourceColor](../../ui/ts-types.md#ResourceColor) | - | Text color of an option in the drop-down list box.|
## Events
| Name| Description|
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onSelected(callback: (index: number, value?:string) => void)| Invoked when an option in the drop-down list box is selected. **index** indicates the index of the selected option. **value** indicates the value of the selected option.|
## Example
```
@Entry
@Component
struct SliderExample {
build() {
Column() {
Select([{value:'aaa',icon: "/common/1.png"},
{value:'bbb',icon: "/common/2.png"},
{value:'ccc',icon: "/common/3.png"},
{value:'ddd',icon: "/common/4.png"}])
.selected(2)
.value('TTT')
.font({size: 30, weight:400, family: 'serif', style: FontStyle.Normal })
.selectedOptionFont({size: 40, weight: 500, family: 'serif', style: FontStyle.Normal })
.optionFont({size: 30, weight: 400, family: 'serif', style: FontStyle.Normal })
.onSelected((index:number)=>{
console.info("Select:" + index)
})
}
}
}
```
![](figures/select.png)
en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md 0 → 100644
浏览文件 @ 7e48872f
# TextClock
> ![](public_sys-resources/icon-note.gif) **NOTE** This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **<TextClock\>** component displays the current system time in text format for different time zones. The time is accurate to seconds.
## Required Permissions
None
## Child Components
None
## APIs
TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ |
| timeZoneOffset | number | No| Time zone offset| Sets the time zone offset. The value range is [-14, 12], indicating UTC+12 to UTC-12. A negative value indicates Eastern Standard Time, and a positive value indicates Western Standard Time. For example, **-8** indicates UTC+8. For countries or regions crossing the International Date Line, use -13 (UTC+13) and -14 (UTC+14) to ensure consistent time within the entire country or region.|
| contorller | [TextClockContorller](#TextClockController) | No| null | Binds a controller to control the status of the **<TextClock\>** component.|
## Attributes
| Name| Type| Default Value| Description|
| ------ | -------- | -------- | ------------------------------------------------------------ |
| format | string | 'hhmmss' | Time format, for example, **yyyy/mm/dd** or **yyyy-mm-dd**. Supported time format strings: <ul><li>yyyy (year)</li> <li>mm (two-letter abbreviated month name)</li> <li>mmm (three-letter abbreviated month name)</li> <li>mmmm (full month name)</li> <li>dd (two-letter abbreviated day of the week)</li> <li>ddd (three-letter abbreviated day of the week)</li> <li>dddd (full day of the week)</li> <li>HH (24-hour format)</li> <li>hh (12-hour format)</li> <li>MM/mm (minute)</li> <li>SS/ss (second)</li></ul>|
## TextClockController
Controller of the **<TextClock\>** component, which can be bound to the component for status control.
| API| Description|
| -------------------------------------------- | ------------------------------------------------------------ |
| start() | Starts the **<TextClock\>** component.|
| stop() | Stops the **<TextClock\>** component.|
## Events
| Name| Description|
| -------------------------------------------- | ------------------------------------------------------------ |
| onDateChange(event: (value: number) => void) | Triggered when the time changes in seconds at minimum. <br /> value: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch.|
## Example
```
@Entry
@Component
struct Second {
@State accumulateTime: number = 0
controller: TextClockController = new TextClockController()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
Text('current milliseconds is' + this.accumulateTime)
.fontSize(20)
TextClock({timeZoneOffset: -8, controller: this.controller})
.format('hhmmss')
.onDateChange((value: number) => {
this.accumulateTime = value
})
.margin(20)
.fontSize(30)
Button("start TextClock")
.margin({ bottom: 10 })
.onClick(()=>{
this.controller.start()
})
Button("stop TextClock")
.onClick(()=>{
this.controller.stop()
})
}
.width('100%')
.height('100%')
}
}
```
![](figures/text_clock.png)
en/application-dev/reference/arkui-ts/ts-container-row.md
浏览文件 @ 7e48872f
# Row<a name="EN-US_TOPIC_0000001237355047"></a>
# Row
>![](../../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 **<Row\>** component lays out child components horizontally.
## Required Permissions<a name="section06615514119"></a>
The **<Row\>** component lays out child components horizontally.
## Required Permissions
None
## Child Components<a name="section877361219116"></a>
This component can contain child components.
## APIs<a name="section11682122941119"></a>
Row\(value:\{space?: Length\}\)
- Parameters
<a name="table10719114169"></a>
<table><thead align="left"><tr id="row1571913410610"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><p id="p87202043618"><a name="p87202043618"></a><a name="p87202043618"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="16.580000000000002%" id="mcps1.1.6.1.2"><p id="p5720441466"><a name="p5720441466"></a><a name="p5720441466"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="9.67%" id="mcps1.1.6.1.3"><p id="p147201241662"><a name="p147201241662"></a><a name="p147201241662"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="21.42%" id="mcps1.1.6.1.4"><p id="p187201141967"><a name="p187201141967"></a><a name="p187201141967"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="36.22%" id="mcps1.1.6.1.5"><p id="p127201740612"><a name="p127201740612"></a><a name="p127201740612"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row97201341367"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><p id="p2072011415617"><a name="p2072011415617"></a><a name="p2072011415617"></a>space</p>
</td>
<td class="cellrowborder" valign="top" width="16.580000000000002%" headers="mcps1.1.6.1.2 "><p id="p19720541461"><a name="p19720541461"></a><a name="p19720541461"></a>Length</p>
</td>
<td class="cellrowborder" valign="top" width="9.67%" headers="mcps1.1.6.1.3 "><p id="p1272074565"><a name="p1272074565"></a><a name="p1272074565"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="21.42%" headers="mcps1.1.6.1.4 "><p id="p197206416614"><a name="p197206416614"></a><a name="p197206416614"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="36.22%" headers="mcps1.1.6.1.5 "><p id="p156891651141710"><a name="p156891651141710"></a><a name="p156891651141710"></a>Space between any two adjacent child components in the horizontal layout.</p>
</td>
</tr>
</tbody>
</table>
## Attributes<a name="section87414715116"></a>
<a name="table1277mcpsimp"></a>
<table><thead align="left"><tr id="row1284mcpsimp"><th class="cellrowborder" valign="top" width="13%" id="mcps1.1.5.1.1"><p id="p1286mcpsimp"><a name="p1286mcpsimp"></a><a name="p1286mcpsimp"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="17%" id="mcps1.1.5.1.2"><p id="p1288mcpsimp"><a name="p1288mcpsimp"></a><a name="p1288mcpsimp"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="9%" id="mcps1.1.5.1.3"><p id="p1290mcpsimp"><a name="p1290mcpsimp"></a><a name="p1290mcpsimp"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="61%" id="mcps1.1.5.1.4"><p id="p1292mcpsimp"><a name="p1292mcpsimp"></a><a name="p1292mcpsimp"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1293mcpsimp"><td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.5.1.1 "><p id="p1295mcpsimp"><a name="p1295mcpsimp"></a><a name="p1295mcpsimp"></a>alignItems</p>
</td>
<td class="cellrowborder" valign="top" width="17%" headers="mcps1.1.5.1.2 "><p id="p1297mcpsimp"><a name="p1297mcpsimp"></a><a name="p1297mcpsimp"></a><a href="#table12144170154116">VerticalAlign</a></p>
</td>
<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.5.1.3 "><p id="p1299mcpsimp"><a name="p1299mcpsimp"></a><a name="p1299mcpsimp"></a>Center</p>
</td>
<td class="cellrowborder" valign="top" width="61%" headers="mcps1.1.5.1.4 "><p id="p1301mcpsimp"><a name="p1301mcpsimp"></a><a name="p1301mcpsimp"></a>Alignment mode of the child components in the vertical direction.</p>
</td>
</tr>
</tbody>
</table>
- VerticalAlign enums
<a name="table12144170154116"></a>
<table><thead align="left"><tr id="row1314430184118"><th class="cellrowborder" valign="top" width="25.2%" id="mcps1.1.3.1.1"><p id="p1614414014416"><a name="p1614414014416"></a><a name="p1614414014416"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="74.8%" id="mcps1.1.3.1.2"><p id="p1314415074113"><a name="p1314415074113"></a><a name="p1314415074113"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row61441505417"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p191443034117"><a name="p191443034117"></a><a name="p191443034117"></a>Top</p>
</td>
<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p121447017412"><a name="p121447017412"></a><a name="p121447017412"></a>Top aligned.</p>
</td>
</tr>
<tr id="row20144801418"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p17145110194110"><a name="p17145110194110"></a><a name="p17145110194110"></a>Center</p>
</td>
<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p171454015415"><a name="p171454015415"></a><a name="p171454015415"></a>Center alignment. This is the default alignment mode.</p>
</td>
</tr>
<tr id="row914570194112"><td class="cellrowborder" valign="top" width="25.2%" headers="mcps1.1.3.1.1 "><p id="p714511012418"><a name="p714511012418"></a><a name="p714511012418"></a>Bottom</p>
</td>
<td class="cellrowborder" valign="top" width="74.8%" headers="mcps1.1.3.1.2 "><p id="p101451704415"><a name="p101451704415"></a><a name="p101451704415"></a>Bottom aligned.</p>
</td>
</tr>
</tbody>
</table>
## Example<a name="section32771595128"></a>
## Child Components
Supported
## APIs
Row(value:{space?: Length})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| space | Length | No| 0 | Space between two adjacent child components in the horizontal layout.|
## Attributes
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| alignItems | VerticalAlign | VerticalAlign.Center | Alignment mode of the child components in the vertical direction.|
| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | Alignment mode of the child components in the horizontal direction.|
- VerticalAlign enums
| Name| Description|
| -------- | -------- |
| Top | Top aligned.|
| Center | Center aligned. This is the default alignment mode.|
| Bottom | Bottom aligned.|
## Example
```
@Entry
......@@ -109,26 +51,37 @@ struct RowExample {
build() {
Column({ space: 5 }) {
Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 20 }) {
Row().width(150).height(50).backgroundColor(0xAFEEEE)
Row().width(150).height(50).backgroundColor(0x00FFFF)
}.width(321).height(52).border({ width: 1 })
Text('alignItems(Bottom)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() {
Row().width('50%').height(50).backgroundColor(0xAFEEEE)
Row().width('50%').height(50).backgroundColor(0x00FFFF)
}.alignItems(VerticalAlign.Bottom).width('90%').height(100).border({ width: 1 })
Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() {
Row().width('50%').height(50).backgroundColor(0xAFEEEE)
Row().width('50%').height(50).backgroundColor(0x00FFFF)
}.alignItems(VerticalAlign.Top).width('90%').height(100).border({ width: 1 })
Row({ space: 5 }) {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').height(107).border({ width: 1 })
Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 })
Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row() {
Row().width('30%').height(50).backgroundColor(0xAFEEEE)
Row().width('30%').height(50).backgroundColor(0x00FFFF)
}.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
}.width('100%')
}
}
```
![](figures/row.png)
![en_image_0000001174422908](figures/row.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或