Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
62a25258
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
62a25258
编写于
2月 22, 2023
作者:
O
openharmony_ci
提交者:
Gitee
2月 22, 2023
浏览文件
操作
浏览文件
下载
差异文件
!14615 【需求文档】增加Menu、MenuItem、Menu Item Group组件
Merge pull request !14615 from zhaoxinyu/addMenuDocs
上级
8137e33c
3942b266
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
190 addition
and
1 deletion
+190
-1
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+3
-0
zh-cn/application-dev/reference/arkui-ts/figures/menu1.png
zh-cn/application-dev/reference/arkui-ts/figures/menu1.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menu.md
...cation-dev/reference/arkui-ts/ts-basic-components-menu.md
+95
-0
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md
...on-dev/reference/arkui-ts/ts-basic-components-menuitem.md
+50
-0
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md
...v/reference/arkui-ts/ts-basic-components-menuitemgroup.md
+32
-0
zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md
...plication-dev/reference/arkui-ts/ts-components-summary.md
+10
-1
未找到文件。
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @
62a25258
...
@@ -66,6 +66,9 @@
...
@@ -66,6 +66,9 @@
-
[
ImageAnimator
](
ts-basic-components-imageanimator.md
)
-
[
ImageAnimator
](
ts-basic-components-imageanimator.md
)
-
[
LoadingProgress
](
ts-basic-components-loadingprogress.md
)
-
[
LoadingProgress
](
ts-basic-components-loadingprogress.md
)
-
[
Marquee
](
ts-basic-components-marquee.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
)
-
[
Navigation
](
ts-basic-components-navigation.md
)
-
[
NavRouter
](
ts-basic-components-navrouter.md
)
-
[
NavRouter
](
ts-basic-components-navrouter.md
)
-
[
NavDestination
](
ts-basic-components-navdestination.md
)
-
[
NavDestination
](
ts-basic-components-navdestination.md
)
...
...
zh-cn/application-dev/reference/arkui-ts/figures/menu1.png
0 → 100644
浏览文件 @
62a25258
113.2 KB
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menu.md
0 → 100644
浏览文件 @
62a25258
# Menu
以垂直列表形式显示的菜单,优先用于PC端的菜单开发。
> **说明:**
>
> 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
包含
[
MenuItem
](
ts-basic-components-menuitem.md
)
、
[
MenuItemGroup
](
ts-basic-components-menuitemgroup.md
)
子组件。
## 接口
Menu()
作为菜单的固定容器,无参数。
## 属性
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| -------- | ------------------------- | ---------------------------------------------------------------- |
| fontSize |
[
Length
](
ts-types.md#length
)
| 统一设置Menu中所有文本的尺寸,Length为number类型时,使用fp单位。 |
## 示例
```
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
:
"
复制
"
,
labelInfo
:
"
Ctrl+C
"
})
MenuItem
({
content
:
"
粘贴
"
,
labelInfo
:
"
Ctrl+V
"
})
}
}
@
Builder
MyMenu
(){
Menu
()
{
MenuItem
({
startIcon
:
$r
(
"
app.media.icon
"
),
content
:
"
菜单选项
"
})
MenuItem
({
startIcon
:
$r
(
"
app.media.icon
"
),
content
:
"
菜单选项
"
})
.
enabled
(
false
)
MenuItem
({
startIcon
:
this
.
iconStr
,
content
:
"
菜单选项
"
,
endIcon
:
$r
(
"
app.media.arrow_right_filled
"
),
builder
:
this
.
SubMenu
.
bind
(
this
)
})
MenuItemGroup
({
header
:
'
小标题
'
})
{
MenuItem
({
content
:
"
菜单选项
"
})
.
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
:
"
菜单选项
"
,
endIcon
:
$r
(
"
app.media.arrow_right_filled
"
),
builder
:
this
.
SubMenu
.
bind
(
this
)
})
}
MenuItem
({
startIcon
:
this
.
iconStr2
,
content
:
"
菜单选项
"
,
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
)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitem.md
0 → 100644
浏览文件 @
62a25258
# MenuItem
用来展示菜单Menu中具体的item菜单项。
> **说明:**
>
> 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
无
## 接口
MenuItem(value?: MenuItemOptions| CustomBuilder)
**参数:**
| 参数 | 类型 | 必填 | 参数描述 |
| ----- | ----------------------------------------------------------------------------------------------------------------------------- | ---- | ---------------------------- |
| value |
[
MenuItemOptions
](
ts-basic-components-menuitem.md#menuitemoptions类型说明
)
\|
[
CustomBuilder
](
ts-types.md#custombuilder8
)
| 否 | 包含设置MenuItem的各项信息。 |
## MenuItemOptions类型说明
| 名称 | 类型 | 必填 | 描述 |
| --------- | ---------------------------------------- | ---- | -------------------------------------- |
| startIcon |
[
ResourceStr
](
ts-types.md#resourcestr
)
| 否 | item中显示在左侧的图标信息路径。 |
| content |
[
ResourceStr
](
ts-types.md#resourcestr
)
| 是 | item的内容信息。 |
| endIcon |
[
ResourceStr
](
ts-types.md#resourcestr
)
| 否 | item中显示在右侧的图标信息路径。 |
| labelInfo |
[
ResourceStr
](
ts-types.md#resourcestr
)
| 否 | 定义结束标签信息,如快捷方式Ctrl+C等。 |
| builder |
[
CustomBuilder
](
ts-types.md#custombuilder8
)
| 否 | 用于构建二级菜单。 |
## 属性
除支持
[
通用属性
](
ts-universal-attributes-size.md
)
外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| ---------- | -------- | ---------------------------------------- |
| selected | boolean | 设置菜单项是否选中。
<br
/>
默认值:false |
| selectIcon | boolean | 当菜单项被选中时,是否显示被选中的图标。 |
## 事件
| 名称 | 参数类型 | 描述 |
| -------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onChange | (selected: boolean) => void | 当选中状态发生变化时,触发该回调。只有手动触发且MenuItem状态改变时才会触发onChange回调。
<br
/>
- value为true时,表示已选中。
<br
/>
- value为false时,表示未选中。 |
## 示例
详见
[
Menu组件示例
](
ts-basic-components-menu.md#示例
)
。
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-menuitemgroup.md
0 → 100644
浏览文件 @
62a25258
# MenuItemGroup
该组件用来展示菜单MenuItem的分组。
> **说明:**
>
> 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
包含
[
MenuItem
](
ts-basic-components-menuitem.md
)
子组件。
## 接口
MenuItemGroup(value?: MenuItemGroupOptions)
**参数:**
| 参数 | 类型 | 必填 | 参数描述 |
| ----- | -------------------------------------------------------------------------------------- | ---- | ------------------------------------------- |
| value |
[
MenuItemGroupOptions
](
ts-basic-components-menuitemgroup.md#menuitemgroupoptions类型说明
)
| 否 | 包含设置MenuItemGroup的标题和尾部显示信息。 |
## MenuItemGroupOptions类型说明
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------------------------------------------------------------------------- | ---- | ----------------------------- |
| header |
[
ResourceStr
](
ts-types.md#resourcestr
)
\|
[
CustomBuilder
](
ts-types.md#custombuilder8
)
| 否 | 设置对应group的标题显示信息。 |
| footer |
[
ResourceStr
](
ts-types.md#resourcestr
)
\|
[
CustomBuilder
](
ts-types.md#custombuilder8
)
| 否 | 设置对应group的尾部显示信息。 |
## 示例
详见
[
Menu组件示例
](
ts-basic-components-menu.md#示例
)
。
zh-cn/application-dev/reference/arkui-ts/ts-components-summary.md
浏览文件 @
62a25258
...
@@ -284,4 +284,13 @@
...
@@ -284,4 +284,13 @@
远程控制窗口组件,可以通过此组件控制应用窗口,提供启动退出过程中控件动画和应用窗口联动动画的能力。
远程控制窗口组件,可以通过此组件控制应用窗口,提供启动退出过程中控件动画和应用窗口联动动画的能力。
-
[
Formcomponent
](
ts-basic-components-formcomponent.md
)
-
[
Formcomponent
](
ts-basic-components-formcomponent.md
)
提供卡片组件,实现卡片的显示功能。
提供卡片组件,实现卡片的显示功能。
\ No newline at end of file
-
[
Menu
](
ts-basic-components-menu.md
)
以垂直列表形式显示的菜单,优先用于PC端的菜单开发。
-
[
MenuItem
](
ts-basic-components-menuitem.md
)
用来展示菜单Menu中具体的item菜单项。
-
[
MenuItemGroup
](
ts-basic-components-menuitemgroup.md
)
用来展示菜单MenuItem的分组。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录