提交 ab73b3e3 编写于 作者: E ester.zhou

update docs

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 7cb044ad
# TextClock
The **<TextClock\>** component displays the current system time in text format for different time zones. The time is accurate to seconds.
> **NOTE**<br>
> 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
Not supported
## APIs
TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController})
TextClock(options?: { timeZoneOffset?: number, controller?: 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. |
| contorller | [TextClockContorller](#textclockcontroller) | No| null | Binds a controller to control the status of the **<TextClock\>** component. |
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| 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>|
## Events
In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported.
| 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. |
......@@ -42,7 +46,7 @@ Controller of the **<TextClock\>** component, which can be bound to the componen
### Objects to Import
```
```ts
controller: TextClockController = new TextClockController()
```
......@@ -62,7 +66,7 @@ Stops the **<TextClock\>** component.
## Example
```
```ts
@Entry
@Component
struct Second {
......@@ -71,8 +75,9 @@ struct Second {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
Text('current milliseconds is' + this.accumulateTime)
Text('Current milliseconds is ' + this.accumulateTime)
.fontSize(20)
// Display the system time in 12-hour format for the UTC+8 time zone, accurate to seconds.
TextClock({timeZoneOffset: -8, controller: this.controller})
.format('hhmmss')
.onDateChange((value: number) => {
......
......@@ -30,7 +30,7 @@ Use the following attributes to bind gesture recognition to a component. When a
| IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> However, the built-in gestures of the child components are not masked. For example, when the child component is a **&lt;List&gt;** component, the built-in sliding gestures can still be triggered. |
- Gesture types
- GestureType enums
| Name | Description |
| -------- | -------- |
| TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
......@@ -61,6 +61,7 @@ The component uses the **gesture** method to bind the gesture object and uses th
```ts
// xxx.ets
@Entry
@Component
struct GestureSettingsExample {
......@@ -81,7 +82,7 @@ struct GestureSettingsExample {
TapGesture()
.onAction((event: GestureEvent) => {
this.value = 'priorityGesture onAction' + '\ncomponent globalPos:('
+ event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:'
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height
}), GestureMask.IgnoreInternal
)
......
# Click Event
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**<br>
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -54,7 +54,8 @@ None
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct ClickExample {
......@@ -66,7 +67,7 @@ struct ClickExample {
.onClick((event: ClickEvent) => {
console.info(this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
+ '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
+ event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n width:'
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:'
+ event.target.area.width + '\n height:' + event.target.area.height)
})
Text(this.text).padding(15)
......
# Touch Event
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**<br>
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -20,44 +20,45 @@ None
### TouchEvent
- Attributes
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| type | TouchType | Type of a touch event. |
| touches | Array&lt;TouchObject&gt; | All finger information. |
| changedTouches | Array&lt;TouchObject&gt; | Finger information changed. |
| timestamp | number | Timestamp of the event. |
| target<sup>8+</sup> | EventTarget | Target of the event. |
| type | TouchType | Type of a touch event. |
| touches | Array&lt;TouchObject&gt; | All finger information. |
| changedTouches | Array&lt;TouchObject&gt; | Finger information changed. |
| timestamp | number | Timestamp of the event. |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Target of the event. |
- APIs
| API | Description |
| Name | Description |
| -------- | -------- |
| stopPropagation(): void | Pop-up of the stop event. |
| stopPropagation(): void | Pop-up of the stop event. |
- TouchObject
| Name | Type | Description |
| Name | Type | Description |
| -------- | -------- | -------- |
| type | TouchType | Type of a touch event. |
| id | number | Unique identifier of a finger. |
| screenX | number | X coordinate of the touch point relative to the left edge of the screen. |
| screenY | number | Y coordinate of the touch point relative to the upper edge of the device screen. |
| x | number | X coordinate of the touch point relative to the left edge of the element to touch. |
| y | number | Y coordinate of the touch point relative to the upper edge of the element to touch. |
| type | TouchType | Type of a touch event. |
| id | number | Unique identifier of a finger. |
| screenX | number | X coordinate of the touch point relative to the left edge of the screen. |
| screenY | number | Y coordinate of the touch point relative to the upper edge of the device screen. |
| x | number | X coordinate of the touch point relative to the left edge of the element to touch. |
| y | number | Y coordinate of the touch point relative to the upper edge of the element to touch. |
- TouchType
| Name | Description |
| Name | Description |
| -------- | -------- |
| Down | Trigger a touch event when a finger is pressed. |
| Up | Trigger a touch event when a finger is lifted. |
| Move | Trigger a touch event when a finger moves on the screen in pressed state. |
| Cancel | Trigger an event when a touch event is canceled. |
| Down | Trigger a touch event when a finger is pressed. |
| Up | Trigger a touch event when a finger is lifted. |
| Move | Trigger a touch event when a finger moves on the screen in pressed state. |
| Cancel | Trigger an event when a touch event is canceled. |
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct TouchExample {
......@@ -79,7 +80,7 @@ struct TouchExample {
}
console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos:('
+ event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:'
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height)
})
Text(this.text)
......
......@@ -4,14 +4,14 @@
You can use @Preview to decorate a custom component so that it can be previewed in DevEco Studio. This component is created and displayed when the page where it is located is loaded.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> In a source file, at most one custom component can be decorated by @Preview.
Example of using @Preview:
```
// Display only Hello Component1 on the preview. The content under MyComponent is displayed on the real device.
@Entry
@Component
struct MyComponent {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册