diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898476.jpg b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898476.jpg index b12c5fb6563c7ee9d8dfa7e6af1cfe1dcfa1361c..e5af4f50ebd9bdab6af30219f30fdf948a019a52 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898476.jpg and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001211898476.jpg differ diff --git a/en/application-dev/reference/arkui-ts/figures/focus.png b/en/application-dev/reference/arkui-ts/figures/focus.png new file mode 100644 index 0000000000000000000000000000000000000000..217dcfbca0de33adef4ffa0d90fd167192845c3c Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/focus.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-container-panel.md b/en/application-dev/reference/arkui-ts/ts-container-panel.md index eed82162757536bffee52289ebff5adbe5ed67cd..6a5e11422c78300ee5fa445b095c8b1e4aa4ae44 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-panel.md +++ b/en/application-dev/reference/arkui-ts/ts-container-panel.md @@ -1,13 +1,12 @@ # Panel +The **** component is a slidable panel that presents lightweight content with flexible sizes. -> **NOTE**
+> **NOTE** +> > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -The **** component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component. - - ## Required Permissions None @@ -38,6 +37,7 @@ Panel(value:{show:boolean}) | fullHeight | Length | - | Panel height in the **PanelMode.Full** mode. | | halfHeight | Length | - | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height. | | miniHeight | Length | - | Panel height in the **PanelMode.Mini** mode. | +| backgroundMask9+|(color: ResourceColor)| - |Background mask of the panel.| - PanelType enums | Name | Description | @@ -58,20 +58,21 @@ Panel(value:{show:boolean}) | Name | Description | | -------- | -------- | -| onChange(callback: (width: number, height: number, mode: PanelMode) => void) | Triggered when the panel status changes. The returned height value is the height of the content area. When the value of **dragbar** is **true**, the height of the panel is the drag bar height plus the height of the content area. | - +| onChange(callback: (width: number, height: number, mode: PanelMode) => void) | Triggered when the panel status changes. The returned **height** value is the height of the content area. When the value of **dragbar** is **true**, the panel height is the height of the drag bar plus the height of the content area. | +| onHeightChange(callback: (value: number) => void)9+ |Triggered when the panel height changes. The returned **height** value is the height of the content area. When the value of **dragbar** is **true**, the panel height is the height of the drag bar plus the height of the content area. For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp. | ## Example -``` +```ts +// xxx.ets @Entry @Component struct PanelExample { @State show: boolean = false build() { - Column() { + Stack() { Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') .width('90%').height(50).borderRadius(10) .backgroundColor(0xFFFFFF).padding({ left: 20 }) diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index a7cdfac499e6e0559550ca5d6686edfde0d8b093..1b5343a36dd35613abb47db2253f9b7b224fd477 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -4,9 +4,9 @@ The border attribute is used to set border styles for components. > **NOTE** > -> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. > -> The border of a component is displayed above the content of its child components since API version 9. +> The border of a component is displayed above the content of its child components since API version 9. ## Required Permissions @@ -16,21 +16,22 @@ None ## Attributes -| Name| Type| Default Value| Description| -| -------- | -------- | -------- | -------- | -| border | BorderOptions | - | Unified border style.| +| Name | Type | Default Value | Description | +| ------------ | ------------- | ----------------------- | ------------------------ | +| border | BorderOptions | - | Unified border style. | | borderStyle | BorderStyle | BorderStyle.Solid | Border style of an element.| -| borderWidth | Length | 0 | Border width of an element.| -| borderColor | [ResourceColor](../../ui/ts-types.md) | - | Border color of an element.| -| borderRadius | Length | 0 | Border radius of an element.| +| borderWidth | Length | 0 | Border width of an element. | +| borderColor | [ResourceColor](../../ui/ts-types.md) | - | Border color of an element. | +| borderRadius | Length \| BorderRadiuses9+ | 0 | Border radius of an element.| - BorderOptions - | Name| Type| Default Value| Mandatory| Description| - | -------- | -------- | -------- | -------- | -------- | - | width | [Length](../../ui/ts-types.md) \| EdgeWidth9+ | 0 | No| Border width.| - | color | [ResourceColor](../../ui/ts-types.md) \|EdgeColor9+ | 'Black' | No| Border color.| - | radius | [Length](../../ui/ts-types.md)\| EdgeRadiuses9+ | 0 | No| Border radius.| - | style | BorderStyle \| EdgeStyle9+ | BorderStyle.Solid | No| Border style.| + + | Name| Type | Default Value | Mandatory| Description | + | -------- | ------------------------------------------------------------ | ----------------- | ---- | ---------- | + | width | [Length](../../ui/ts-types.md) \| EdgeWidth9+ | 0 | No | Border width.| + | color | [ResourceColor](../../ui/ts-types.md) \| EdgeColor9+ | 'Black' | No | Border color.| + | radius | [Length](../../ui/ts-types.md) \| BorderRadiuses9+ | 0 | No | Border radius.| + | style | BorderStyle \| EdgeStyle9+ | BorderStyle.Solid | No | Border style.| - EdgeWidth9+ @@ -48,23 +49,24 @@ None To reference this object, at least one parameter must be passed. - | Name | Type | Mandatory | Default Value | Description | - | ------ | ------------------------------------- | --------- | ------------- | --------------------------- | - | left | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the left border. | - | right | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the right border. | - | top | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the top border. | - | bottom | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the bottom border. | -- EdgeRadiuses9+ - + | Name | Type | Mandatory| Default Value | Description | + | ------ | ------------------------------------- | ---- | ------- | -------------- | + | left | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the left border.| + | right | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the right border.| + | top | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the top border.| + | bottom | [ResourceColor](../../ui/ts-types.md) | No | 'Black' | Color of the bottom border.| + +- BorderRadiuses9+ + To reference this object, at least one parameter must be passed. - + | Name | Type| Mandatory| Default Value| Description | | ----------- | -------- | ---- | ------ | ---------------- | | topLeft | length | No | 0 | Radius of the upper-left rounded corner.| | topRight | length | No | 0 | Radius of the upper-right rounded corner.| | bottomLeft | length | No | 0 | Radius of the lower-left rounded corner.| | bottomRight | length | No | 0 | Radius of the lower-right rounded corner.| - + - EdgeStyle9+ To reference this object, at least one parameter must be passed. diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md index e57cee1aef97a0c7c6c9f72b8740b30e599c4497..c416374b19222d4ca4c704a1c9d8a80b1f9b44e5 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md @@ -1,7 +1,8 @@ # Focus Control -> **NOTE**
-> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> **NOTE** +> +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -16,12 +17,14 @@ None | focusable | boolean | false | Whether the current component is focusable.| | tabIndex9+ | number | 0 | How the current component participates in sequential keyboard navigation.
- **tabIndex** >= 0: The component is focusable in sequential keyboard navigation, with its order defined by the value. A component with a larger value is focused after one with a smaller value. If multiple components share the same **tabIndex** value, their focus order follows their position in the component tree.
- **tabIndex** < 0 (usually **tabIndex** = -1): The component is focusable, but cannot be reached through sequential keyboard navigation. | -> **NOTE**
-> The following components support focus control: **\