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

Update docs (14615)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 c3c9f690
......@@ -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)
......
# Menu
The **\<Menu>** 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)
# MenuItem
The **\<MenuItem>** 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.<br>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.<br>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).
# MenuItemGroup
The **\<MenuItemGroup>** 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).
......@@ -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.
# List
The **\<list>** 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 **\<List>** 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**
>
......
......@@ -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.
......
# 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)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册