diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md index ae56acf12d8aad32ddfe94f2a567b7550d6a58a0..50063100154d0a86289157d9db07a31bfa9a7d05 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textclock.md @@ -1,37 +1,41 @@ # TextClock +The **** component displays the current system time in text format for different time zones. The time is accurate to seconds. + > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. -The **** 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 **** component. | + | contorller | [TextClockContorller](#textclockcontroller) | No| null | Binds a controller to control the status of the **** 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:
  • yyyy (year)
  • mm (two-letter abbreviated month name)
  • mmm (three-letter abbreviated month name)
  • mmmm (full month name)
  • dd (two-letter abbreviated day of the week)
  • ddd (three-letter abbreviated day of the week)
  • dddd (full day of the week)
  • HH (24-hour format)
  • hh (12-hour format)
  • MM/mm (minute)
  • SS/ss (second)
| ## 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.
**value**: Unix time stamp, which is the number of milliseconds that have elapsed since the Unix epoch. | @@ -42,7 +46,7 @@ Controller of the **** component, which can be bound to the componen ### Objects to Import -``` +```ts controller: TextClockController = new TextClockController() ``` @@ -62,7 +66,7 @@ Stops the **** 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) => { diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md index de6a9f874a3c140c9f3a9c6ac4aa718dfeeccfd3..a22eb19f84166d671f5295c9cba649c9904616fe 100644 --- a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md +++ b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md @@ -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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> However, the built-in gestures of the child components are not masked. For example, when the child component is a **<List>** 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 ) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md index 92ceedcdc8cdf532dcaf9bfb3205c7f9d4cf7c6d..086a32f23befd0ce05d6f925ce99c9216b7c738b 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md @@ -1,8 +1,8 @@ # 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**
+> 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) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md index 2f5506a590931d37dffca4a7df4fbdf2e538a6d8..ea64017630aeb9e7b8ffaa5960a2d18ab9839fa2 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md @@ -1,8 +1,8 @@ # 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**
+> 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<TouchObject> | All finger information. | - | changedTouches | Array<TouchObject> | Finger information changed. | - | timestamp | number | Timestamp of the event. | - | target8+ | EventTarget | Target of the event. | + | type | TouchType | Type of a touch event. | + | touches | Array<TouchObject> | All finger information. | + | changedTouches | Array<TouchObject> | Finger information changed. | + | timestamp | number | Timestamp of the event. | + | target8+ | [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) diff --git a/en/application-dev/ui/ts-component-based-preview.md b/en/application-dev/ui/ts-component-based-preview.md index c0fffb15c2772842dfb1ac223abc848a1496e458..8e65b1e595637a61be011b50c5137e23a7c46f0f 100644 --- a/en/application-dev/ui/ts-component-based-preview.md +++ b/en/application-dev/ui/ts-component-based-preview.md @@ -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**
> 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 {