diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index 25736a22dced9dd795af1edd130de06ab02248cf..0c3a6be8dfa6ab66042b70d72fe1daf365aa05b9 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -42,6 +42,7 @@ - [Hit Test Control](ts-universal-attributes-hit-test-behavior.md) - [Background Blur](ts-universal-attributes-backgroundBlurStyle.md) - [restoreId](ts-universal-attributes-restoreId.md) + - [Foreground Color](ts-universal-attributes-foreground-color.md) - Gesture Processing - [Gesture Binding Methods](ts-gesture-settings.md) - Basic Gestures @@ -60,11 +61,15 @@ - [DataPanel](ts-basic-components-datapanel.md) - [DatePicker](ts-basic-components-datepicker.md) - [Divider](ts-basic-components-divider.md) + - [Formcomponent](ts-basic-components-formcomponent.md) - [Gauge](ts-basic-components-gauge.md) - [Image](ts-basic-components-image.md) - [ImageAnimator](ts-basic-components-imageanimator.md) - [LoadingProgress](ts-basic-components-loadingprogress.md) - [Marquee](ts-basic-components-marquee.md) + - [Menu](ts-basic-components-menu.md) + - [MenuItem](ts-basic-components-menuitem.md) + - [MenuItemGroup](ts-basic-components-menuitemgroup.md) - [Navigation](ts-basic-components-navigation.md) - [NavRouter](ts-basic-components-navrouter.md) - [NavDestination](ts-basic-components-navdestination.md) diff --git a/en/application-dev/reference/arkui-ts/figures/ColoringStrategy_circle.png b/en/application-dev/reference/arkui-ts/figures/ColoringStrategy_circle.png new file mode 100644 index 0000000000000000000000000000000000000000..1ea0edb63c1effab0ff368714baeece62b0cf49f Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/ColoringStrategy_circle.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/foregroundColorInherit.jpg b/en/application-dev/reference/arkui-ts/figures/foregroundColorInherit.jpg new file mode 100644 index 0000000000000000000000000000000000000000..576b20baebaafe45b8e360b2cc1d2aba1a0a9ba1 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/foregroundColorInherit.jpg differ diff --git a/en/application-dev/reference/arkui-ts/figures/foregroundColor_circle.png b/en/application-dev/reference/arkui-ts/figures/foregroundColor_circle.png new file mode 100644 index 0000000000000000000000000000000000000000..1d769ec260258ac57833600a8e3cbda3e985166b Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/foregroundColor_circle.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/menu1.png b/en/application-dev/reference/arkui-ts/figures/menu1.png new file mode 100644 index 0000000000000000000000000000000000000000..c431b6e9dd911b7f93b778eb6fb290063bb0338a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/menu1.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md b/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md new file mode 100644 index 0000000000000000000000000000000000000000..65f7d17c6cc5f494896482669b720539aa07ad41 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-menu.md @@ -0,0 +1,95 @@ +# Menu + +The **\** component is a vertical list of items presented to the user. + +> **NOTE** +> +> This component is supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. + +## Child Components + +This component contains the [MenuItem](ts-basic-components-menuitem.md) and [MenuItemGroup](ts-basic-components-menuitemgroup.md) child components. + +## APIs + +Menu() + +Creates a fixed container for a menu. This API does not have any parameters. + +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type | Description | +| -------- | ------------------------- | ---------------------------------------------------------------- | +| fontSize | [Length](ts-types.md#length) | Font size that applies to all texts in the menu. When **Length** is of the number type, the unit is fp.| + +## Example + +```ts +@Entry +@Component +struct Index { + @State select: boolean = true + private iconStr: ResourceStr = $r("app.media.view_list_filled") + private iconStr2: ResourceStr = $r("app.media.view_list_filled") + + @Builder + SubMenu() { + Menu() { + MenuItem({ content: "Copy", labelInfo: "Ctrl+C" }) + MenuItem({ content: "Paste", labelInfo: "Ctrl+V" }) + } + } + + @Builder + MyMenu(){ + Menu() { + MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) + MenuItem({ startIcon: $r("app.media.icon"), content: "Menu option" }) + .enabled(false) + MenuItem({ + startIcon: this.iconStr, + content: "Menu option", + endIcon: $r("app.media.arrow_right_filled"), + builder: this.SubMenu.bind(this) + }) + MenuItemGroup({ header: 'Subtitle' }) { + MenuItem ({ content: "Menu option" }) + .selectIcon(true) + .selected(this.select) + .onChange((selected) => { + console.info("menuItem select" + selected); + this.iconStr2 = $r("app.media.icon"); + }) + MenuItem({ + startIcon: $r("app.media.view_list_filled"), + content: "Menu option", + endIcon: $r("app.media.arrow_right_filled"), + builder: this.SubMenu.bind(this) + }) + } + MenuItem({ + startIcon: this.iconStr2, + content: "Menu option", + endIcon: $r("app.media.arrow_right_filled") + }) + } + } + + build() { + Row() { + Column() { + Text('click to show menu') + .fontSize(50) + .fontWeight(FontWeight.Bold) + } + .bindMenu(this.MyMenu) + .width('100%') + } + .height('100%') + } +} +``` + +![menu1](figures/menu1.png) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md new file mode 100644 index 0000000000000000000000000000000000000000..cce67b34b9d5c4b50f1ac55dcfffcc2fda09e3ee --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md @@ -0,0 +1,50 @@ +# MenuItem + +The **\** component represents an item in a menu. + +> **NOTE** +> +> This component is supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. + +## Child Components + +Not supported + +## APIs + +MenuItem(value?: MenuItemOptions| CustomBuilder) + +**Parameters** + +| Name | Type | Mandatory| Description | +| ----- | ----------------------------------------------------------------------------------------------------------------------------- | ---- | ---------------------------- | +| value | [MenuItemOptions](ts-basic-components-menuitem.md#menuitemoptions) \| [CustomBuilder](ts-types.md#custombuilder8) | No | Information about the menu item.| + +## MenuItemOptions + +| Name | Type | Mandatory| Description | +| --------- | ---------------------------------------- | ---- | -------------------------------------- | +| startIcon | [ResourceStr](ts-types.md#resourcestr) | No | Path to the icon displayed on the left of the menu item. | +| content | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the menu item. | +| endIcon | [ResourceStr](ts-types.md#resourcestr) | No | Path to the icon displayed on the right of the menu item. | +| labelInfo | [ResourceStr](ts-types.md#resourcestr) | No | Information about the ending label, for example, shortcut **Ctrl+C**. | +| builder | [CustomBuilder](ts-types.md#custombuilder8) | No | Builder for a level-2 menu. | + +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. + +| Name | Type| Description | +| ---------- | -------- | ---------------------------------------- | +| selected | boolean | Whether the menu item is selected.
Default value: **false** | +| selectIcon | boolean | Whether to display the icon of the menu item being selected.| + +## Events + +| Name | Type | Description | +| -------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| onChange | (selected: boolean) => void | Triggered when the selection status of the menu item is changed manually.
The value **true** means that the menu item is selected, and **false** means the opposite. | + +## Example + +For details, see [Example in Menu](ts-basic-components-menu.md#example). diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md new file mode 100644 index 0000000000000000000000000000000000000000..1c1b19c668d4a95ef6ab10bb2d5549b643374e40 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md @@ -0,0 +1,32 @@ +# MenuItemGroup + +The **\** component represents a group of menu items. + +> **NOTE** +> +> This component is supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. + +## Child Components + +This component contains the [MenuItem](ts-basic-components-menuitem.md) child component. + +## APIs + +MenuItemGroup(value?: MenuItemGroupOptions) + +**Parameters** + +| Name | Type | Mandatory| Description | +| ----- | -------------------------------------------------------------------------------------- | ---- | ------------------------------------------- | +| value | [MenuItemGroupOptions](ts-basic-components-menuitemgroup.md#menuitemgroupoptions) | No | Header and footer of the menu item group.| + +## MenuItemGroupOptions + +| Name | Type | Mandatory| Description | +| ------ | ----------------------------------------------------------------------------------------- | ---- | ----------------------------- | +| header | [ResourceStr](ts-types.md#resourcestr) \| [CustomBuilder](ts-types.md#custombuilder8) | No | Header of the menu item group.| +| footer | [ResourceStr](ts-types.md#resourcestr) \| [CustomBuilder](ts-types.md#custombuilder8) | No | Footer of the menu item group.| + +## Sample + +For details, see [Example in Menu](ts-basic-components-menu.md#example). diff --git a/en/application-dev/reference/arkui-ts/ts-components-summary.md b/en/application-dev/reference/arkui-ts/ts-components-summary.md index e83d70ccecae5afbb194451ca6ccc03de75ad0e6..3e5b4706f279043c2d77839cdc7da587faaec3dc 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-summary.md +++ b/en/application-dev/reference/arkui-ts/ts-components-summary.md @@ -109,7 +109,7 @@ - [Button](ts-basic-components-button.md) - A component that can be used to create different types of buttons. + A component that is used to create different types of buttons. - [Toggle](ts-basic-components-toggle.md) A component that provides a clickable element in the check box, button, or switch type. @@ -231,7 +231,7 @@ - [Canvas](ts-components-canvas-canvas.md) - A component that can be used to customize drawings. + A component that is used to customize drawings. - [Circle](ts-drawing-components-circle.md) A component that is used to draw a circle. @@ -262,10 +262,10 @@ - [Web](ts-basic-components-web.md) - A component that can be used to display web pages. + A component that is used to display web pages. -## Miscellaneous +## Miscellaneous - [ScrollBar](ts-basic-components-scrollbar.md) @@ -288,3 +288,15 @@ - [RemoteWindow](ts-basic-components-remotewindow.md) A component that is used to control the application window, providing the component animator and application window linkage animator during application startup and exit. +- [Formcomponent](ts-basic-components-formcomponent.md) + + A component that is used to display widgets. +- [Menu](ts-basic-components-menu.md) + + A component that is used to present a vertical list of items to the user. Preferentially used on computers. +- [MenuItem](ts-basic-components-menuitem.md) + + A component that is used to represent an item in a menu. +- [MenuItemGroup](ts-basic-components-menuitemgroup.md) + + A component that is used to represent a group of menu items. diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md index 7a944fbdedacd17582182a44a8ef03c51f8af141..7e00b5a33df637eba2cb20e9c36b49920dc9dcfc 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-list.md +++ b/en/application-dev/reference/arkui-ts/ts-container-list.md @@ -1,6 +1,6 @@ # List -The **\** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text. +The **\** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text. > **NOTE** > diff --git a/en/application-dev/reference/arkui-ts/ts-types.md b/en/application-dev/reference/arkui-ts/ts-types.md index ffc46108ad8944d16f354ef022581cca6494f0a0..78d1c4fb2c2fc836b19e1ea17e96c662f72075c7 100644 --- a/en/application-dev/reference/arkui-ts/ts-types.md +++ b/en/application-dev/reference/arkui-ts/ts-types.md @@ -128,6 +128,14 @@ The **ResourceColor** type is used to describe the color types of resources. | string | Color in RGB or RGBA notation. | | [Resource](#resource) | Color referenced from system or application resources.| +## ColoringStrategy + +The **ColoringStrategy** type is used to describe the foreground colors. + +| Name | Description | +| --------- | ------- | +| Invert | Inverse of the component background color.| + ## LengthConstrain The **LengthConstrain** type is used to describe the maximum and minimum lengths of a component. diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-color.md new file mode 100644 index 0000000000000000000000000000000000000000..cfa2a0310f83db2933638297865c0f1674ea07b5 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-foreground-color.md @@ -0,0 +1,75 @@ +# Foreground Color + +The foreground color attributes set the foreground color of a component. + +> **NOTE** +> +> The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version. + +## Attributes + +| Name| Type| Description| +| -------- | -------- | -------- | +| foregroundColor | [ResourceColor](ts-types.md#resourcecolor) \| [ColoringStrategy](ts-types.md#coloringstrategy) | Foreground color. The value can be a specific color or a coloring strategy.| + +## Example + +### Example 1 +```ts +// xxx.ets +@Entry +@Component +struct ForegroundColorExample { + build() { + Column({ space: 100 }) { + // Draw a circle with a diameter of 150 and the default fill color black. + Circle({ width: 150, height: 200 }) + // Draw a circle with a diameter of 150. + Circle({ width: 150, height: 200 }).foregroundColor(Color.Red) + }.width('100%').backgroundColor(Color.Blue) + } +} +``` + +![foregroundColor_circle](figures/foregroundColor_circle.png) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct ColoringStrategyExample { + build() { + Column({ space: 100 }) { + // Draw a circle with a diameter of 150 and the default fill color black. + Circle({ width: 150, height: 200 }) + // Draw a circle with a diameter of 150 and set its foreground color to the inverse of the component background color. + Circle({ width: 150, height: 200 }) + .backgroundColor(Color.Black) + .foregroungColor(ColoringStrategy.Invert) + }.width('100%') + } +} +``` + +![foregroundColor_circle](figures/ColoringStrategy_circle.png) + +### Example 3 + +```ts +// xxx.ets +@Entry +@Component +struct foregroundColorInherit { + build() { + Column() { + Button('Foreground Color Set to Orange').fontSize(20).foregroundColor(Color.Orange).backgroundColor(Color.Gray) + Divider() + Button ('Foreground Color Inherited from Parent Component When Not Set').fontSize(20).backgroundColor(Color.Gray) + }.foregroundColor(Color.Red) + } +} +``` + +![foregroundColor_circle](figures/foregroundColorInherit.jpg)