diff --git a/OAT.xml b/OAT.xml new file mode 100644 index 0000000..7b9f0f7 --- /dev/null +++ b/OAT.xml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/README.en.md b/README.en.md deleted file mode 100644 index 1daf29b..0000000 --- a/README.en.md +++ /dev/null @@ -1,36 +0,0 @@ -# manifest - -#### Description -{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**} - -#### Software Architecture -Software architecture description - -#### Installation - -1. xxxx -2. xxxx -3. xxxx - -#### Instructions - -1. xxxx -2. xxxx -3. xxxx - -#### Contribution - -1. Fork the repository -2. Create Feat_xxx branch -3. Commit your code -4. Create Pull Request - - -#### Gitee Feature - -1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md -2. Gitee blog [blog.gitee.com](https://blog.gitee.com) -3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) -4. The most valuable open source project [GVP](https://gitee.com/gvp) -5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) -6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) diff --git a/README.md b/README.md index 7dfe780..e3369d6 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,35 @@ -# manifest +# advanced_ui_component -#### 介绍 -{**以下是码云平台说明，您可以替换此简介** -码云是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台 -无论是个人、团队、或是企业，都能够用码云实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)} +## Introduction +advanced_ui is an ArkTS-based UI framework that offers efficient UI combinations for applications in different use cases, bolstered by closed, consistent, and out-of-the-box public component APIs. -#### 软件架构 -软件架构说明 +## Software Architecture +**Figure 1** Relationship between advanced_ui and ArkUI +![](figures/advanced_ui_en.png "Relationship between advanced_ui and ArkUI") +**Figure 2** advanced_ui architecture -#### 安装教程 +![](figures/advanced_ui_sub_en.png "advanced_ui architecture") -1. xxxx -2. xxxx -3. xxxx +## Directory Structure +The following figure shows the directory structure. -#### 使用说明 +``` +/arkui_advanced_ui_component +├── interface # APIs +│ ├── arkdialog # Components +│ └── composelistitem +│ └── ..... -1. xxxx -2. xxxx -3. xxxx +├── source # Framework source code +│ ├── arkdialog # Components +│ └── composelistitem +│ └── ..... +``` +## When to Use -#### 参与贡献 +With advanced_ui, you can develop your application UI must faster, leveraging its diverse array of UI component combinations with consistent design and style definitions. You can use and reuse any component anywhere as needed. -1. Fork 本仓库 -2. 新建 Feat_xxx 分支 -3. 提交代码 -4. 新建 Pull Request - - -#### 码云特技 - -1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md -2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com) -3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目 -4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目 -5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) -6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) +## How to Use +> See the [doc folder](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/doc). + diff --git a/README_zh.md b/README_zh.md new file mode 100644 index 0000000..d4416d7 --- /dev/null +++ b/README_zh.md @@ -0,0 +1,34 @@ +# advanced_ui_component + +## 介绍 +advanced_ui 是基于使用场景设计，为应用提供高效的UI组合，接口封闭、风格一致，开箱即用的组件接口；使用ArkTS语言开发，依赖系统的public API + +## 软件架构 +**图 1** advanced_ui和ArkUI架构关系 +![](figures/advanced_ui.png "advanced_ui和ArkUI架构关系") +**图 2** advanced_ui架构设计 +![](figures/advanced_ui_sub.png "advanced_ui架构设计") + +## 目录 +目录结构如下图所示： + +``` +/arkui_advanced_ui_component +├── interface # 接口目录 +│ ├── arkdialog # 各个组件目录 +│ └── composelistitem +│ └── ..... + +├── source # 框架源码 +│ ├── arkdialog # 各个组件目录 +│ └── composelistitem +│ └── ..... +``` +## 使用场景 + +advanced_ui框架提供了丰富的、ui设计统一的、高效的UI组合组件、样式定义，组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。开发者可以高效的使用，节省大量的工作量。 + +## 使用说明 +> 见[doc文件夹](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/doc) + + diff --git a/doc/Readme-CN.md b/doc/Readme-CN.md new file mode 100644 index 0000000..0728c2b --- /dev/null +++ b/doc/Readme-CN.md @@ -0,0 +1,15 @@ +# 组件目录 + +- [Dialog](ts-composite-components-arkdialog.md) +- [SplitLayout](ts-composite-components-splitlayout.md) +- [ToolBar](ts-composite-components-toolbar.md) +- [ProgressButton](ts-composite-components-progressbutton.md) +- [SubHeader](ts-composite-components-subheader.md) +- [Filter](ts-composite-components-filter.md) +- [TreeView](ts-composite-components-treeview.md) +- [ComposeListItem](ts-composite-components-composelistitem.md) +- [EditableTitleBar](ts-composite-components-editabletitlebar.md) +- [ComposeTitleBar](ts-composite-components-composetitlebar.md) +- [SelectTitleBar](ts-composite-components-selecttitlebar.md) +- [TabTitleBar](ts-composite-components-tabtitlebar.md) +- [SwipeRefresher](ts-composite-components-swiperefresher.md) diff --git a/doc/figures/20230728-101201.png b/doc/figures/20230728-101201.png new file mode 100644 index 0000000..614c169 Binary files /dev/null and b/doc/figures/20230728-101201.png differ diff --git a/doc/figures/20230728-101236.png b/doc/figures/20230728-101236.png new file mode 100644 index 0000000..e57a28b Binary files /dev/null and b/doc/figures/20230728-101236.png differ diff --git a/doc/figures/20230728-101306.png b/doc/figures/20230728-101306.png new file mode 100644 index 0000000..0070b57 Binary files /dev/null and b/doc/figures/20230728-101306.png differ diff --git a/doc/figures/20230728-101355.png b/doc/figures/20230728-101355.png new file mode 100644 index 0000000..8d840d1 Binary files /dev/null and b/doc/figures/20230728-101355.png differ diff --git a/doc/figures/20230728-111325.png b/doc/figures/20230728-111325.png new file mode 100644 index 0000000..53aefe6 Binary files /dev/null and b/doc/figures/20230728-111325.png differ diff --git a/doc/figures/Snipaste_2023-07-24_11-35-40.png b/doc/figures/Snipaste_2023-07-24_11-35-40.png new file mode 100644 index 0000000..742fccf Binary files /dev/null and b/doc/figures/Snipaste_2023-07-24_11-35-40.png differ diff --git a/doc/figures/zh-cn_image_0000001616913438.png b/doc/figures/zh-cn_image_0000001616913438.png new file mode 100644 index 0000000..f36a025 Binary files /dev/null and b/doc/figures/zh-cn_image_0000001616913438.png differ diff --git a/doc/figures/zh-cn_image_0000001616916278.png b/doc/figures/zh-cn_image_0000001616916278.png new file mode 100644 index 0000000..c4b0a43 Binary files /dev/null and b/doc/figures/zh-cn_image_0000001616916278.png differ diff --git a/doc/figures/zh-cn_image_0000001616957408.png b/doc/figures/zh-cn_image_0000001616957408.png new file mode 100644 index 0000000..2a0835b Binary files /dev/null and b/doc/figures/zh-cn_image_0000001616957408.png differ diff --git a/doc/figures/zh-cn_image_0000001616959836.png b/doc/figures/zh-cn_image_0000001616959836.png new file mode 100644 index 0000000..8bf1753 Binary files /dev/null and b/doc/figures/zh-cn_image_0000001616959836.png differ diff --git a/doc/figures/zh-cn_image_0000001617073302.png b/doc/figures/zh-cn_image_0000001617073302.png new file mode 100644 index 0000000..5aa7060 Binary files /dev/null and b/doc/figures/zh-cn_image_0000001617073302.png differ diff --git a/doc/figures/zh-cn_image_0000001617116972.png b/doc/figures/zh-cn_image_0000001617116972.png new file mode 100644 index 0000000..1b0d3aa Binary files /dev/null and b/doc/figures/zh-cn_image_0000001617116972.png differ diff --git a/doc/figures/zh-cn_image_0000001617233250.png b/doc/figures/zh-cn_image_0000001617233250.png new file mode 100644 index 0000000..b4ea8f8 Binary files /dev/null and b/doc/figures/zh-cn_image_0000001617233250.png differ diff --git a/doc/figures/zh-cn_image_0000001617393174.png b/doc/figures/zh-cn_image_0000001617393174.png new file mode 100644 index 0000000..739a1cb Binary files /dev/null and b/doc/figures/zh-cn_image_0000001617393174.png differ diff --git a/doc/figures/zh-cn_image_0000001617439304.png b/doc/figures/zh-cn_image_0000001617439304.png new file mode 100644 index 0000000..59694ce Binary files /dev/null and b/doc/figures/zh-cn_image_0000001617439304.png differ diff --git a/doc/figures/zh-cn_image_0000001658655445.png b/doc/figures/zh-cn_image_0000001658655445.png new file mode 100644 index 0000000..4c01b6d Binary files /dev/null and b/doc/figures/zh-cn_image_0000001658655445.png differ diff --git a/doc/figures/zh-cn_image_0000001664546481.png b/doc/figures/zh-cn_image_0000001664546481.png new file mode 100644 index 0000000..6e383ed Binary files /dev/null and b/doc/figures/zh-cn_image_0000001664546481.png differ diff --git a/doc/figures/zh-cn_image_0000001664713029.png b/doc/figures/zh-cn_image_0000001664713029.png new file mode 100644 index 0000000..99ff75f Binary files /dev/null and b/doc/figures/zh-cn_image_0000001664713029.png differ diff --git a/doc/figures/zh-cn_image_0000001664822257.png b/doc/figures/zh-cn_image_0000001664822257.png new file mode 100644 index 0000000..6d4a01a Binary files /dev/null and b/doc/figures/zh-cn_image_0000001664822257.png differ diff --git a/doc/figures/zh-cn_image_0000001665393297.png b/doc/figures/zh-cn_image_0000001665393297.png new file mode 100644 index 0000000..fe44722 Binary files /dev/null and b/doc/figures/zh-cn_image_0000001665393297.png differ diff --git a/doc/figures/zh-cn_image_0000001665513149.png b/doc/figures/zh-cn_image_0000001665513149.png new file mode 100644 index 0000000..00230be Binary files /dev/null and b/doc/figures/zh-cn_image_0000001665513149.png differ diff --git a/doc/figures/zh-cn_image_0000001665553957.png b/doc/figures/zh-cn_image_0000001665553957.png new file mode 100644 index 0000000..23685e0 Binary files /dev/null and b/doc/figures/zh-cn_image_0000001665553957.png differ diff --git a/doc/figures/zh-cn_image_0000001665793709.png b/doc/figures/zh-cn_image_0000001665793709.png new file mode 100644 index 0000000..6511f95 Binary files /dev/null and b/doc/figures/zh-cn_image_0000001665793709.png differ diff --git a/doc/figures/zh-cn_image_0000001665809293.png b/doc/figures/zh-cn_image_0000001665809293.png new file mode 100644 index 0000000..a5a22f5 Binary files /dev/null and b/doc/figures/zh-cn_image_0000001665809293.png differ diff --git a/doc/figures/zh-cn_image_2023072902.png b/doc/figures/zh-cn_image_2023072902.png new file mode 100644 index 0000000..2ddd83b Binary files /dev/null and b/doc/figures/zh-cn_image_2023072902.png differ diff --git a/doc/figures/zh-cn_image_2023072903.PNG b/doc/figures/zh-cn_image_2023072903.PNG new file mode 100644 index 0000000..6e64323 Binary files /dev/null and b/doc/figures/zh-cn_image_2023072903.PNG differ diff --git a/doc/figures/zh-cn_image_2023072904.PNG b/doc/figures/zh-cn_image_2023072904.PNG new file mode 100644 index 0000000..49d6c2a Binary files /dev/null and b/doc/figures/zh-cn_image_2023072904.PNG differ diff --git a/doc/figures/zh-cn_image_2023072905.PNG b/doc/figures/zh-cn_image_2023072905.PNG new file mode 100644 index 0000000..31ea0da Binary files /dev/null and b/doc/figures/zh-cn_image_2023072905.PNG differ diff --git a/doc/figures/zh-cn_image_2023072906.PNG b/doc/figures/zh-cn_image_2023072906.PNG new file mode 100644 index 0000000..1c93742 Binary files /dev/null and b/doc/figures/zh-cn_image_2023072906.PNG differ diff --git a/doc/figures/zh-cn_image_202307291.png b/doc/figures/zh-cn_image_202307291.png new file mode 100644 index 0000000..9b1e6b7 Binary files /dev/null and b/doc/figures/zh-cn_image_202307291.png differ diff --git a/doc/public_sys-resources/icon-caution.gif b/doc/public_sys-resources/icon-caution.gif new file mode 100644 index 0000000..6e90d7c Binary files /dev/null and b/doc/public_sys-resources/icon-caution.gif differ diff --git a/doc/public_sys-resources/icon-danger.gif b/doc/public_sys-resources/icon-danger.gif new file mode 100644 index 0000000..6e90d7c Binary files /dev/null and b/doc/public_sys-resources/icon-danger.gif differ diff --git a/doc/public_sys-resources/icon-note.gif b/doc/public_sys-resources/icon-note.gif new file mode 100644 index 0000000..6314297 Binary files /dev/null and b/doc/public_sys-resources/icon-note.gif differ diff --git a/doc/public_sys-resources/icon-notice.gif b/doc/public_sys-resources/icon-notice.gif new file mode 100644 index 0000000..86024f6 Binary files /dev/null and b/doc/public_sys-resources/icon-notice.gif differ diff --git a/doc/public_sys-resources/icon-tip.gif b/doc/public_sys-resources/icon-tip.gif new file mode 100644 index 0000000..93aa720 Binary files /dev/null and b/doc/public_sys-resources/icon-tip.gif differ diff --git a/doc/public_sys-resources/icon-warning.gif b/doc/public_sys-resources/icon-warning.gif new file mode 100644 index 0000000..6e90d7c Binary files /dev/null and b/doc/public_sys-resources/icon-warning.gif differ diff --git a/doc/ts-composite-components-arkdialog.md b/doc/ts-composite-components-arkdialog.md new file mode 100644 index 0000000..822dc6d --- /dev/null +++ b/doc/ts-composite-components-arkdialog.md @@ -0,0 +1,414 @@ +# Dialog + + +弹出框是一种模态窗口，通常用于在保持当前的上下文环境时，临时展示用户需关注的信息或待处理的操作，用户在模态弹出框内完成上述交互任务。模态弹出框需要用户进行交互才能够退出模态模式。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog } from '@ohos.arkui.advanced.Dialog' +``` + + +## 子组件 + +无 + + +## TipsDialog + + +TipsDialog({controller: CustomDialogController, imageRes: Resource, imageSize: SizeOptions, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) + + +提示弹出框，即为带图形确认框，必要时可通过图形化方式展现确认框。 + + +**装饰器类型：**\@CustomDialog + + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + + +**参数：** + + +| 参数名 | 参数类型 | 必填 | 装饰器类型 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| controller | [CustomDialogController](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md/) | 是 | - | 提示弹出框控制器。 | +| imageRes | [Resource](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resource) | 是 | - | 展示的图片。 | +| imageSize | [SizeOptions](https://docs.openharmony.cn/pages/v4.0/en/application-dev/reference/arkui-ts/ts-types.md/#sizeoptions) | 是 | - | 自定义图片尺寸。 | +| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | - | 提示弹出框标题。 | +| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | 提示弹出框内容。 | +| checkTips | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | checkbox的提示内容。 | +| isChecked | boolean | 否 | \@Prop | value为true时，表示checkbox已选中，value为false时，表示未选中。
默认值：false。 | +| primaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 提示框左侧按钮。 | +| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 提示框右侧按钮。 | + + +## SelectDialog + +SelectDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, selectedIndex?: number, confirm?: ButtonOptions, radioContent?: Array<SheetInfo>}) + +选择类弹出框，弹框中以列表或网格的形式提供可选的的内容。 + +**装饰器类型：**\@CustomDialog + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| controller | CustomDialogController | 是 | 选择弹出框控制器。 | +| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 选择弹出框标题。 | +| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 选择弹出框内容。 | +| selectedIndex | number | 否 | 选择弹出框的选中项。 | +| confirm | boolean | 否 | 确认按钮。 | +| radioContent | Array<[SheetInfo](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md/)> | 否 | 选择弹出框的子项内容列表，每个选择项支持设置图片、文本和选中的回调事件。 | + + +## ConfirmDialog + +ConfirmDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) + +信息确认类弹出框，操作未正确执行（如网络错误、电池电量过低），或未正确操作时（如指纹录入），反馈的错误或提示信息。 + +**装饰器类型：**\@CustomDialog + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| controller | CustomDialogController | 是 | - | 确认弹出框控制器。 | +| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | - | 确认弹出框标题。 | +| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | 确认弹出框内容。 | +| checkTips | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | - | checkbox的提示内容。 | +| isChecked | boolean | 否 | \@Prop | value为true时，表示checkbox已选中，value为false时，表示未选中。
默认值：false。 | +| primaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 确认框左侧按钮。 | +| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | - | 确认框右侧按钮。 | + + +## AlertDialog + +AlertDialog({controller: CustomDialogController, content?: ResourceStr, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) + +操作确认类弹出框，触发一个将产生严重后果的不可逆操作时，如删除、重置、取消编辑、停止等。 + +**装饰器类型：**\@CustomDialog + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必选 | 参数描述 | +| -------- | -------- | -------- | -------- | +| controller | CustomDialogController | 是 | 确认弹出框控制器。 | +| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 确认弹出框内容。 | +| primaryButton | [ButtonOptions](#buttonoptions) | 否 | 确认框左侧按钮。 | +| secondaryButton | [ButtonOptions](#buttonoptions) | 否 | 确认框右侧按钮。 | + + +## LoadingDialog + +LoadingDialog({controller: CustomDialogController, content?: ResourceStr}) + +**参数：** + +| 参数名 | 参数类型 | 必选 | 参数描述 | +| -------- | -------- | -------- | -------- | +| controller | CustomDialogController | 是 | 加载弹出框控制器。 | +| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 加载弹出框内容。 | + + +## ButtonOptions + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +| 名称 | 类型 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 按钮的内容。 | +| action | () => void | 否 | 按钮的点击事件。 | +| background | [ResourceColor](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-types.md/#resourcecolor) | 否 | 按钮的背景。 | +| fontColor | [ResourceColor](https://docs.openharmony.cn/pages/v3.2/en/application-dev/reference/arkui-ts/ts-types.md/#resourcecolor) | 否 | 按钮的字体颜色。 | + + +## 示例 + + +### 示例1 + +``` +import { TipsDialog } from '@ohos.arkui.advanced.Dialog' +@Entry +@Component +struct Index { + radioIndex = 0; + isChecked = false; + dialogControllerImage: CustomDialogController = new CustomDialogController({ + builder: TipsDialog({ + imageRes: $r('app.media.icon'), + title: '文本标题', + content: '文本文本文本文本文本文本文本文本文本', + isChecked: this.isChecked, + checkTips: '不再提示', + primaryButton: { + value: '取消', + action: () => { + console.info('Callback when the CheckBox is clicked') + }, + }, + secondaryButton: { + value: '确定', + action: () => { + console.info('Callback when the second button is clicked') + } + }, + }), + autoCancel: true, + customStyle: true, + alignment: DialogAlignment.Bottom + }) + + build() { + Row() { + Stack() { + Column(){ + Button("上图下文弹出框") + .width(96) + .height(40) + .onClick(() => { + this.dialogControllerImage.open() + }) + }.margin({bottom: 300}) + }.align(Alignment.Bottom) + .width('100%').height('100%') + } + .backgroundImageSize({ width: '100%', height: '100%' }) + .height('100%') + } +} +``` + +![20230728-111325(WeLinkPC)](figures/20230728-111325(WeLinkPC).png) + + +### 示例2 + +``` +import { SelectDialog } from '@ohos.arkui.advanced.Dialog' +@Entry +@Component +struct Index { + radioIndex = 0; + isChecked = false; +dialogControllerList: CustomDialogController = new CustomDialogController({ + builder: SelectDialog({ + title: '文本标题', + selectedIndex: this.radioIndex, + confirm: { + value: '取消', + action: () => null, + }, + radioContent: [ + { + title: '文本文本文本文本文本', + action: () => { + this.radioIndex = 0 + } + }, + { + title: '文本文本文本文本', + action: () => { + this.radioIndex = 1 + } + }, + { + title: '文本文本文本文本', + action: () => { + this.radioIndex = 2 + } + }, + ] + }), + customStyle: true, + alignment: DialogAlignment.Bottom, + autoCancel: false +}) + + build() { + Row() { + Stack() { + Column(){ + Button("纯列表弹出框") + .width(96) + .height(40) + .onClick(() => { + this.dialogControllerList.open() + }) + }.margin({bottom: 300}) + }.align(Alignment.Bottom) + .width('100%').height('100%') + } + .backgroundImageSize({ width: '100%', height: '100%' }) + .height('100%') + } +} +``` + +![20230728-101201(WeLinkPC)](figures/20230728-101201(WeLinkPC).png) + + +### 示例3 + +``` +import { ConfirmDialog } from '@ohos.arkui.advanced.Dialog' +@Entry +@Component +struct Index { + radioIndex = 0; + isChecked = false; +dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ + builder: CheckBoxDialog({ + title: '文本标题', + content: '文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本', + isChecked: this.isChecked, + checkTips: '禁止后不再提示', + primaryButton: { + value: '禁止', + action: () => null, + }, + secondaryButton: { + value: '允许', + action: () => { + this.isChecked = false + console.info('Callback when the second button is clicked') + } + }, + }), + autoCancel: true, + customStyle: true, + alignment: DialogAlignment.Bottom +}) + + build() { + Row() { + Stack() { + Column(){ + Button("文本+勾选弹出框") + .width(96) + .height(40) + .onClick(() => { + this.dialogControllerCheckBox.open() + }) + }.margin({bottom: 300}) + }.align(Alignment.Bottom) + .width('100%').height('100%') + } + .backgroundImageSize({ width: '100%', height: '100%' }) + .height('100%') + } +} +``` + +![20230728-101236(WeLinkPC)](figures/20230728-101236(WeLinkPC).png) + + +### 示例4 + +``` +import { AlertDialog } from '@ohos.arkui.advanced.Dialog' +@Entry +@Component +struct Index { + radioIndex = 0; + isChecked = false; +dialogControllerConfirm: CustomDialogController = new CustomDialogController({ + builder: AlertDialog({ + content: '文本文本文本文本文本', + primaryButton: { + value: '取消', + action: () => null, + }, + secondaryButton: { + value: '确认', + fontColor: $r('sys.color.ohos_id_color_warning'), + action: () => { + console.info('Callback when the second button is clicked') + } + }, + }), + autoCancel: true, + customStyle: true, + alignment: DialogAlignment.Bottom +}) + + build() { + Row() { + Stack() { + Column(){ + Button("纯文本弹出框") + .width(96) + .height(40) + .onClick(() => { + this.dialogControllerConfirm.open() + }) + }.margin({bottom: 300}) + }.align(Alignment.Bottom) + .width('100%').height('100%') + } + .backgroundImageSize({ width: '100%', height: '100%' }) + .height('100%') + } +} +``` + +![20230728-101355(WeLinkPC)](figures/20230728-101355(WeLinkPC).png) + + +### 示例5 + +``` +import { LoadingDialog } from '@ohos.arkui.advanced.Dialog' +@Entry +@Component +struct Index { + radioIndex = 0; + isChecked = false; +dialogControllerProgress: CustomDialogController = new CustomDialogController({ + builder: ProgressDialog({ + content: '文本文本文本文本文本...', + }), + autoCancel: true, + customStyle: true, + alignment: DialogAlignment.Bottom +}) + + build() { + Row() { + Stack() { + Column(){ + Button("进度条弹出框") + .width(96) + .height(40) + .onClick(() => { + this.dialogControllerProgress.open() + }) + }.margin({bottom: 300}) + }.align(Alignment.Bottom) + .width('100%').height('100%') + } + .backgroundImageSize({ width: '100%', height: '100%' }) + .height('100%') + } +} +``` + +![20230728-101306(WeLinkPC)](figures/20230728-101306(WeLinkPC).png) diff --git a/doc/ts-composite-components-composelistitem.md b/doc/ts-composite-components-composelistitem.md new file mode 100644 index 0000000..5134dec --- /dev/null +++ b/doc/ts-composite-components-composelistitem.md @@ -0,0 +1,240 @@ +# ComposeListItem + + +列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { ComposeListItem } from "@ohos.arkui.advanced.ComposeListItem" +``` + + +## 子组件 + +无 + + +## 接口 + +ComposeListItem({contentItem?: ContentItem, operateItem?: OperateItem}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + + +**参数：** + + +| 参数名 | 参数类型 | 必填 | 装饰器类型 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| contentItem | [ContentItem](#contentitem) | 否 | \@Prop | 定义左侧以及中间元素。 | +| operateItem | [OperateItem](#operateitem) | 否 | \@Prop | 定义右侧元素。 | + + +## ContentItem + +| 名称 | 值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| iconStyle | [IconType](#icontype枚举说明) | 否 | 左侧元素-图标样式。 | +| icon | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 左侧元素-图标。 | +| primaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 中间元素-标题内容。 | +| secondaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 中间元素-副标题内容。 | +| description | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 中间元素-描述内容。 | + + +## IconType枚举说明 + +| 名称 | 描述 | +| -------- | -------- | +| BADGE | 左侧图标为badge类型，图标大小为8\*8dp。 | +| NORMAL_ICON | 左侧图标为小图标类型，图标大小为16\*16dp。 | +| SYSTEM_ICON | 左侧图标为系统图标类型，图标大小为24\*24dp。 | +| HEAD_SCULPTURE | 左侧图标为头像类型，图标大小为40\*40dp。 | +| APP_ICON | 左侧图标为应用图标类型，图标大小为64\*64dp。 | +| PREVIEW | 左侧图标为预览图类型，图标大小为96\*96dp。 | +| LONGITUDINAL | 左侧图标为横向特殊比例（宽比高大），保持最长边为96dp。 | +| VERTICAL | 左侧图标为竖向特殊比例（高比宽大），保持最长边为96dp。 | + + +## OperateItem + +| 名称 | 值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| arrow | [OperateIcon](#operateicon) | 否 | 右侧元素-箭头，大小为12\*24dp。 | +| icon | [OperateIcon](#operateicon) | 否 | 右侧元素-第一个图标，大小为24\*24dp。 | +| subIcon | [OperateIcon](#operateicon) | 否 | 右侧元素-第二个图标，大小为24\*24dp。 | +| button | [OperateButton](#operatebutton) | 否 | 右侧元素-按钮。 | +| switch | [OperateCheck](#switchcheckboxradio-operatecheck) | 否 | 右侧元素-开关。 | +| checkbox | [OperateCheck](#switchcheckboxradio-operatecheck) | 否 | 右侧元素-多选框，大小为24\*24dp。 | +| radio | [OperateCheck](#switchcheckboxradio-operatecheck) | 否 | 右侧元素-单选，大小为24\*24dp。 | +| image | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 右侧元素-图片，大小为48\*48dp。 | +| text | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 右侧元素-文字。 | + + +## OperateIcon + +| 名称 | 值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 右侧元素-图标/箭头。 | +| action | ()=>void | 否 | 右侧元素-图标/箭头点击事件。 | + + +## OperateButton + +| 名称 | 值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| text | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 右侧元素-按钮文字。 | + + +## Switch/CheckBox/Radio-OperateCheck + +| 名称 | 值 | 必填 | 描述 | +| -------- | -------- | -------- | -------- | +| isCheck | boolean | 否 | 右侧元素-右侧Switch/CheckBox/Radio选中状态。 | +| onChange | (value: boolean)=>void | 否 | 右侧元素-右侧Switch/CheckBox/Radio选中状态改变时触发回调。 | + + +## 示例1-纯文本 + +```ts +import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; +import { ContentItem } from '@ohos.arkui.advanced.ComposeListItem'; + +@Entry +@Component +struct ComposeListItemExample { + build() { + Column() { + List() { + ListItem(){ + ComposeListItem({ + contentItem: ({ + primaryText: '单行列表' + }) + }) + } + } + } + } +} +``` + + +![示例1-纯文本](figures/zh-cn_image_2023072903.PNG) + + +## 示例2-左侧元素+文本 + +```ts +import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; +import { IconType } from '@ohos.arkui.advanced.ComposeListItem'; +import { ContentItem } from '@ohos.arkui.advanced.ComposeListItem'; + +@Entry +@Component +struct ComposeListItemExample { + build() { + Column() { + List() { + ListItem(){ + ComposeListItem({ + contentItem: ({ + iconStyle: IconType.NORMAL_ICON, + icon: $r('sys.media.ohos_app_icon'), + primaryText: '双行列表', + secondaryText: '辅助文字' + }) + }) + } + } + } + } +} +``` + + +![示例2-左侧元素+文本](figures/示例2-左侧元素+文本.PNG) + + +## 示例3-右侧元素 + +```ts +import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; +import { OperateItem } from '@ohos.arkui.advanced.ComposeListItem'; +import promptAction from '@ohos.promptAction' + +@Entry +@Component +struct ComposeListItemExample { + build() { + Column() { + List() { + ListItem() { + ComposeListItem({ + operateItem: ({ + icon: { + value: $r('sys.media.ohos_app_icon'), + action: () => { + promptAction.showToast({ message: 'icon' }) + } + }, + text: '右侧文本' + }) + }) + } + } + } + } +} +``` + + +![示例3-右侧元素](figures/示例3-右侧元素.PNG) + + +## 示例4-左右元素+文本 + +```ts +import { ComposeListItem } from '@ohos.arkui.advanced.ComposeListItem'; +import { IconType } from '@ohos.arkui.advanced.ComposeListItem'; +import { ContentItem } from '@ohos.arkui.advanced.ComposeListItem'; +import { OperateItem } from '@ohos.arkui.advanced.ComposeListItem'; +import promptAction from '@ohos.promptAction' + +@Entry +@Component +struct ComposeListItemExample { + build() { + Column() { + List() { + ListItem() { + ComposeListItem({ + contentItem: ({ + iconStyle: IconType.NORMAL_ICON, + icon: $r('sys.media.ohos_app_icon'), + primaryText: '双行列表', + secondaryText: '辅助文字' + }), + operateItem: ({ + icon: { + value: $r('sys.media.ohos_app_icon'), + action: () => { + promptAction.showToast({ message: 'icon' }) + } }, + text: '右侧文本' + }) + }) + } + } + } + } +``` + +![示例4-左右元素+文本](figures/示例4-左右元素+文本.PNG) diff --git a/doc/ts-composite-components-composetitlebar.md b/doc/ts-composite-components-composetitlebar.md new file mode 100644 index 0000000..94d7086 --- /dev/null +++ b/doc/ts-composite-components-composetitlebar.md @@ -0,0 +1,177 @@ +# ComposeTitleBar + + +普通型标题栏的一种，支持设置标题、头像（可选）、副标题（可选）；可用于一级页面、二级及其以上界面（配置返回键）。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar" +``` + + +## 子组件 + +无 + + +## 接口 + +ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必选 | 参数描述 | +| -------- | -------- | -------- | -------- | +| item | [ERROR:Invalid link:zh-cn_topic_0000001617072014.xml#xref1948916525328,link:zh-cn_topic_0000001609264184.xml#section478410410453](zh-cn_topic_0000001609264184.xml#section478410410453) | 否 | 用于左侧头像的单个菜单项目 | +| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 标题 | +| subtitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 副标题 | +| menuItems | Array<[ERROR:Invalid link:zh-cn_topic_0000001617072014.xml#xref33563123310,link:zh-cn_topic_0000001609264184.xml#section478410410453](zh-cn_topic_0000001609264184.xml#section478410410453)> | 否 | 右侧菜单项目列表 | + + +### ComposeTitleBarMenuItem + +| 名称 | 值 | 是否必填 | 描述 | +| -------- | -------- | -------- | -------- | +| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 图标资源 | +| isEnabled | boolean | 是 | 是否启用，默认启用 | +| action | () => void | 否 | 触发时的动作闭包 | + + +## 示例 1 - 单行文本 + +``` +import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar" + +@Entry +@Component +struct Index { + build() { + Row() { + Column() { + ComposeTitleBar({ + title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦" + }) + }.width('100%') + }.height('100%') + } +} +``` + +![zh-cn_image_0000001616913438](figures/zh-cn_image_0000001616913438.png) + + +## 示例 2 - 双行文本 + +``` +import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar" + +@Entry +@Component +struct Index { + build() { + Row() { + Column() { + ComposeTitleBar({ + title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦", + subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦" + }) + }.width('100%') + }.height('100%') + } +} +``` + +![zh-cn_image_0000001665513149](figures/zh-cn_image_0000001665513149.png) + + +## 示例 3 - 双行文本带菜单 + +``` +import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar" +import Prompt from '@system.prompt' + +@Entry +@Component +struct Index { + menuItems: { value: Resource, isEnabled: boolean, action: () => void }[] = + [ { isEnabled: true, value: $r('app.media.ic_public_save'), + action: () => prompt.showToast({ message: "show toast index 1" }) + }, + { isEnabled: true, value: $r('app.media.ic_public_reduce'), + action: () => prompt.showToast({ message: "show toast index 2" }) + }, + { isEnabled: true, value: $r('app.media.ic_public_edit'), + action: () => prompt.showToast({ message: "show toast index 3" }) + }, + { isEnabled: true, value: $r('app.media.ic_public_reduce'), + action: () => prompt.showToast({ message: "show toast index 4" }) + } ] + build() { + Row() { + Column() { + Divider().height(2).color(0xCCCCCC) + ComposeTitleBar({ + title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦", + subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦", + menuItems: this.menuItems.slice(0, 1), + }) + Divider().height(2).color(0xCCCCCC) + ComposeTitleBar({ + title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦", + subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦", + menuItems: this.menuItems.slice(0, 2), + }) + Divider().height(2).color(0xCCCCCC) + ComposeTitleBar({ + title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦", + subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦", + menuItems: this.menuItems, + }) + Divider().height(2).color(0xCCCCCC) + }.width('100%') + }.height('100%') + } +} +``` + +![zh-cn_image_0000001617233250](figures/zh-cn_image_0000001617233250.png) + + +## 示例 4 - 头像+双行文本带菜单 + +``` +import { ComposeTitleBar } from "@ohos.arkui.advanced.ComposeTitleBar" +import Prompt from '@system.prompt' + +@Entry +@Component +struct Index { + build() { + Row() { + Column() { + ComposeTitleBar({ + menuItems: [ { isEnabled: true, value: $r('app.media.ic_public_save'), + action: () => Prompt.showToast({ message: "show toast index 1" }) + } ], + title: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦", + subtitle: "啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦", + item: { isEnabled: true, value: $r('app.media.app_icon'), + action: () => Prompt.showToast({message:"show toast index portrait"}) + } }) + }.width('100%') + }.height('100%') + } +} +``` + +![zh-cn_image_0000001617393174](figures/zh-cn_image_0000001617393174.png) diff --git a/doc/ts-composite-components-editabletitlebar.md b/doc/ts-composite-components-editabletitlebar.md new file mode 100644 index 0000000..7063f37 --- /dev/null +++ b/doc/ts-composite-components-editabletitlebar.md @@ -0,0 +1,130 @@ +# EditableTitleBar + + +编辑型标题栏，适用于多选界面或者内容的编辑界面，一般采取左叉右勾的形式。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { EditableTitleBar } from "@ohos.arkui.advanced.EditableTitleBar" +``` + + +## 子组件 + +无 + + +## 接口 + +EditableTitleBar({leftIconType: EditableLeftIconType, title: ResourceStr, menuItems?: Array<EditableTitleBarMenuItem>, onSave?: () => void, onCancel?: () =>void}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必选 | 参数描述 | +| -------- | -------- | -------- | -------- | +| leftIconStyle | [ERROR:Invalid link:zh-cn_topic_0000001665632009.xml#xref19441410133613,link:zh-cn_topic_0000001658583341.xml#section1340683083317](zh-cn_topic_0000001658583341.xml#section1340683083317) | 是 | 左侧按钮类型 | +| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 标题 | +| menuItems | Array<[ERROR:Invalid link:zh-cn_topic_0000001665632009.xml#xref81499144365,link:zh-cn_topic_0000001658583341.xml#section1287821819325](zh-cn_topic_0000001658583341.xml#section1287821819325)> | 否 | 右侧菜单项目列表 | +| onSave | () => void | 否 | 保存时的动作闭包 | +| onCancel | () => void | 否 | 当左侧按钮类型为 Left，触发取消时的动作闭包 | + + +### EditableLeftIconType + +| 名称 | 描述 | +| -------- | -------- | +| Back | 返回按钮 | +| Cancel | 取消按钮 | + + +### EditableTitleBarMenuItem + +| 名称 | 值 | 是否必填 | 描述 | +| -------- | -------- | -------- | -------- | +| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 图标资源 | +| isEnabled | boolean | 是 | 是否启用，默认启用 | +| action | () => void | 否 | 触发时的动作闭包 | + + +## 示例 1 + +``` +import { EditableLeftIconType } from "@ohos.arkui.advanced.EditableTitleBar" +import { EditableTitleBar } from "@ohos.arkui.advanced.EditableTitleBar" +import Prompt from '@system.prompt' + +@Entry +@Component +struct Index { + build() { + Row() { + Column() { + EditableTitleBar({ + leftIconStyle: EditableLeftIconType.Cancel, + title: "编辑页面", + menuItems: [], + onCancel: () => { + Prompt.showToast({ message: "on cancel" }) + }, + onSave: () => { + Prompt.showToast({ message: "on save" }) + } + }) + }.width('100%') + }.height('100%') + } +} +``` + + +![zh-cn_image_0000001617073302](figures/zh-cn_image_0000001617073302.png) + + +## 示例 2 + +``` +import { EditableLeftIconType } from "@ohos.arkui.advanced.EditableTitleBar" +import { EditableTitleBar } from "@ohos.arkui.advanced.EditableTitleBar" +import Prompt from '@system.prompt' + +@Entry +@Component +struct Index { + build() { + Row() { + Column() { + EditableTitleBar({ + leftIconStyle: EditableLeftIconType.Back, + title: "编辑页面", + menuItems: [ + { value: $r('app.media.ic_public_reduce'), + isEnabled: false, + action: () => { + Prompt.showToast({ message: "show toast index 2" }) + } + } + ], + onCancel: () => { + Prompt.showToast({ message: "on cancel" }) + }, + onSave: () => { + Prompt.showToast({ message: "on save" }) + } + }) + }.width('100%') + }.height('100%') + } +} +``` + +![zh-cn_image_0000001665393297](figures/zh-cn_image_0000001665393297.png) diff --git a/doc/ts-composite-components-filter.md b/doc/ts-composite-components-filter.md new file mode 100644 index 0000000..04515f9 --- /dev/null +++ b/doc/ts-composite-components-filter.md @@ -0,0 +1,119 @@ +# Filter + + +多条件筛选，帮助用户在大量信息中找到所需内容，应结合具体场景选择合适筛选方式。多条件筛选控件由筛选器与悬浮条构成，悬浮条可下拉展示悬浮筛选器。筛选器样式可分为多行可折叠类型与多行列表类型，并可以在筛选器最后一行附加快捷筛选器。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { Filter } from '@ohos.arkui.advanced.Filter' +``` + + +## 子组件 + +无 + + +## Filter + +Filter({ multiFilters: Array<FilterParams>, additionFilters: FilterParams, filterType: FilterType, onFilterChanged: (Array<FilterResult>) => void }) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + + +| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| multiFilters | Array<[FilterParams](#filterparams)> | 是 | \@Prop | 多条件筛选列表。 | +| additionFilters | [FilterParams](#filterparams) | 否 | \@Prop | 附加快捷筛选项。 | +| filterType | [FilterType](#filtertype) | 否 | \@Prop | 筛选器的样式类型。 | +| onFilterChanged | (Array<[FilterResult](#filterresult)>) => void | 是 | \@Prop | 用户点击后的回调事件。回调函数的参数为选中的筛选项结果列表。 | +| container | ()=>void | 否 | \@BuilderParam | 筛选结果展示区域自定义内容，通过尾随闭包形式传入。 | + + +## FilterParams + +| 名称 | 值 | 是否必选 | 描述 | +| -------- | -------- | -------- | -------- | +| name | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 筛选项维度名称。 | +| options | Array<[ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr)> | 是 | 筛选项维度可选项列表。 | + + +## FilterType + +| 参数名 | 描述 | +| -------- | -------- | +| MULTI_LINE_FILTER | 多行可折叠类型筛选器。 | +| LIST_FILTER | 多行列表类型筛选器。 | + + +## FilterResult + +| 名称 | 值 | 是否必选 | 描述 | +| -------- | -------- | -------- | -------- | +| name | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 筛选项维度名称。 | +| index | number | 是 | 该维度筛选项选中项目的索引值。
默认值：-1 | +| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 该维度筛选项选中项目的值。
默认值："" | + + +## 示例 + +多行可折叠Filter：内容区可完全自定义。 + +``` +import { Filter, FilterParams, FilterResult, FilterType } from '@ohos.arkui.advanced.Filter' + +@Entry +@Component +struct Index { + private filterParam: Array = [{name: '月份', options: ['全部','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}, + {name: '年份', options: ['全部','2023','2022','2021','2020','2019','2018','2017','2016','2015','2014','2013','2012','2011','2010','2009','2008']}, + {name: '节气', options: ['全部','立春','雨水','惊蛰','春分','清明','谷雨','立夏','小满','芒种','夏至','小暑','大暑','立秋','处暑','白露','秋分','寒露','霜降','立冬','小雪','大雪','冬至','小寒','大寒']}] + private additionParam: FilterParams = { name: '您还可以搜', options: ['运营栏目1','运营栏目2','运营栏目3','运营栏目4','运营栏目5','运营栏目6']} + private arr: number[] = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]; + build() { + Column() { + Filter({ + multiFilters: this.filterParam, + additionFilters: this.additionParam, + filterType: FilterType.MULTI_LINE_FILTER, + onFilterChanged: (select: Array) => { + console.log('rec filter change') + for (let filter of select) { + console.log('name:' + filter.name + ',index:' + filter.index + ',value:' + filter.value) + } + } + }){ + List({ initialIndex: 0 }) { + ForEach(this.arr, (item, index: number) => { + ListItem() { + Text(item.toString()) + .width("100%") + .height(100) + .fontSize(16) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(Color.White) + .margin({ top:10, bottom: 10 }) + } + }) + }.backgroundColor(Color.Gray) + .padding({ left: 20, right: 20 }) + } + } + .height('100%') + .width('100%') + } +} +``` + +![zh-cn_image_0000001665809293](figures/zh-cn_image_0000001665809293.png) diff --git a/doc/ts-composite-components-progressbutton.md b/doc/ts-composite-components-progressbutton.md new file mode 100644 index 0000000..24cf250 --- /dev/null +++ b/doc/ts-composite-components-progressbutton.md @@ -0,0 +1,152 @@ +# ProgressButton + + +文本下载按钮，可显示具体下载进度。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { ProgressButton } from '@ohos.arkui.advanced.ProgressButton' +``` + + +## ProgressButton + +ProgressButton({progress: number, content: string, progressButtonWidth?: Length, clickCallback: () => void, enable: boolean}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必填 | 装饰器类型 | 描述 | +| -------- | -------- | -------- | -------- | -------- | +| progress | number | 是 | \@Prop | 下载按钮的当前进度值。 | +| content | string | 是 | | 下载按钮的文本。 | +| progressButtonWidth | Length | 否 | - | 下载按钮的宽度。 | +| clickCallback | void | 是 | | 下载按钮的点击回调。 | +| enable | boolean | 是 | | 下载按钮是否可以点击，
默认为true。 | + + +## 示例 + +``` +import { ProgressButton } from '@ohos.arkui.advanced.ProgressButton' +@Entry +@Component +struct Index { + @State halfProgress: number = 50 + @State smallProgress: number = 8 + @State bigProgress: number = 51 + @State textState1: string = '下载' + @State textState2: string = '下载' + @State textState3: string = '下载' + @State isRunning1: boolean = false + @State isRunning2: boolean = false + @State isRunning3: boolean = false + @State enableState1: boolean = true + @State enableState2: boolean = true + @State enableState3: boolean = true + build() { + Column({space: 20}) { + Text('6、下载按钮：') + ProgressButton({ + progress: this.halfProgress, + progressButtonWidth: "60", + content: this.textState1, + enable: this.enableState1, + clickCallback: () => { + if (this.textState1 && !this.isRunning1 && this.halfProgress < 100) { + this.textState1 = '继续' + } + this.isRunning1 = !this.isRunning1 + let timer = setInterval(() => { + if (this.isRunning1) { + if (this.halfProgress === 100) { + } else { + this.halfProgress++ + if (this.halfProgress === 100) { + // this.halfProgress = 0 + this.textState1 = '已完成' + this.enableState1 = false + } + console.info('x progress++ = ' + this.halfProgress) + } + } else { + console.info('x isRunning = ' + false) + clearInterval(timer) + } + }, 100) + } + }) + ProgressButton({ + progress: this.smallProgress, + progressButtonWidth: "100", + content: this.textState2, + enable: this.enableState2, + clickCallback: () => { + if (this.textState2 && !this.isRunning2 && this.smallProgress < 100) { + this.textState2 = '继续' + } + this.isRunning2 = !this.isRunning2 + let timer = setInterval(() => { + if (this.isRunning2) { + if (this.smallProgress === 100) { + + } else { + this.smallProgress++ + if (this.smallProgress === 100) { + this.textState2 = '已完成' + this.enableState2 = false + } + console.info('x progress++ = ' + this.smallProgress) + } + } else { + console.info('x isRunning = ' + false) + clearInterval(timer) + } + }, 100) + } + }) + ProgressButton({ + progress: this.bigProgress, + progressButtonWidth: '300', + content: this.textState3, + enable: this.enableState3, + clickCallback: () => { + this.isRunning3 = !this.isRunning3 + if (!this.isRunning3 && this.textState3 && this.bigProgress < 100) { + this.textState3 = '继续' + } + + let timer = setInterval(() => { + if (this.isRunning3) { + if (this.bigProgress === 100) { + } else { + this.bigProgress++ + if (this.bigProgress === 100) { + this.textState3 = '已完成' + this.enableState3 = false + } + console.info('x progress++ = ' + this.bigProgress) + } + } else { + console.info('x isRunning = ' + false) + clearInterval(timer) + } + }, 100) + } + }) + }.alignItems(HorizontalAlign.Center).width('100%') + } +} +``` + + +![zh-cn_image_0000001664713029](figures/zh-cn_image_0000001664713029.png) diff --git a/doc/ts-composite-components-selecttitlebar.md b/doc/ts-composite-components-selecttitlebar.md new file mode 100644 index 0000000..e7f5571 --- /dev/null +++ b/doc/ts-composite-components-selecttitlebar.md @@ -0,0 +1,186 @@ +# SelectTitleBar + + +普通型标题栏的一种，含有一个 Select 控件，可用于页面之间的切换；可用于一级页面、二级及其以上界面（配置返回键）。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar" +``` + + +## 子组件 + +无 + + +## 接口 + +SelectTitleBar({selected: number, options: Array<SelectOption>, menuItems?: Array<SelectTitleBarMenuItem>, subtitle?: ResourceStr, badgeValue?: number, hidesBackButton?: boolean, onSelected?: (index: number) => void}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| selected | number | 是 | \@Prop | 当前选中项目的索引 | +| options | Array<SelectOption> | 是 | - | 下拉菜单中的项目 | +| menuItems | Array Prompt.showToast({ message: 'page index ' + index }), + hidesBackButton: true + }) + }.width('100%') + }.height('100%') + } +} +``` + +![zh-cn_image_0000001665793709](figures/zh-cn_image_0000001665793709.png) + + +## 示例 2 - 二级页面下拉菜单 + +``` +import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar" +import Prompt from '@system.prompt' + +@Entry +@Component +struct Index { + build() { + Row() { + Column() { + Divider().height(2).color(0xCCCCCC) + SelectTitleBar({ + options: [ + { value: '所有照片' }, + { value: '本地（设备）' }, + { value: '本地本地本地本地本地（储存卡）' } + ], + selected: 0, + onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), + hidesBackButton: false + }) + Divider().height(2).color(0xCCCCCC) + SelectTitleBar({ + options: [ + { value: '所有照片' }, + { value: '本地（设备）' }, + { value: '本地本地本地本地本地（储存卡）' } + ], + selected: 1, + onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), + subtitle: "example@openharmony.cn" + }) + Divider().height(2).color(0xCCCCCC) + SelectTitleBar({ + options: [ + { value: '所有照片' }, + { value: '本地（设备）' }, + { value: '本地本地本地本地本地（储存卡）' } + ], + selected: 1, + onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), + subtitle: "example@openharmony.cn", + menuItems: [ { isEnabled: true, value: $r('app.media.ic_public_save'), + action: () => Prompt.showToast({ message: "show toast index 1" }) + } ] + }) + Divider().height(2).color(0xCCCCCC) + }.width('100%') + }.height('100%') + } +} +``` + +![zh-cn_image_0000001617439304](figures/zh-cn_image_0000001617439304.png) + + +## 示例 3 - 新事件标记 + +``` +import { SelectTitleBar } from "@ohos.arkui.advanced.SelectTitleBar" +import Prompt from '@system.prompt' + +@Entry +@Component +struct Index { + menuItems: { value: Resource, isEnabled: boolean, action: () => void }[] = + [ { isEnabled: true, value: $r('app.media.ic_public_save'), + action: () => prompt.showToast({ message: "show toast index 1" }) + }, + { isEnabled: true, value: $r('app.media.ic_public_reduce'), + action: () => prompt.showToast({ message: "show toast index 2" }) + }, + { isEnabled: true, value: $r('app.media.ic_public_edit'), + action: () => prompt.showToast({ message: "show toast index 3" }) + }, + { isEnabled: true, value: $r('app.media.ic_public_reduce'), + action: () => prompt.showToast({ message: "show toast index 4" }) + } ] + build() { + Row() { + Column() { + SelectTitleBar({ + options: [ + { value: '所有照片' }, + { value: '本地（设备）' }, + { value: '本地本地本地本地本地（储存卡）' } + ], + selected: 0, + onSelected: (index) => Prompt.showToast({ message: 'page index ' + index }), + subtitle: "example@openharmony.cn", + menuItems: this.menuItems, + badgeValue: 99, + hidesBackButton: true + }) + }.width('100%') + }.height('100%') + } +} +``` + +![zh-cn_image_0000001616959836](figures/zh-cn_image_0000001616959836.png) diff --git a/doc/ts-composite-components-splitlayout.md b/doc/ts-composite-components-splitlayout.md new file mode 100644 index 0000000..2be66fd --- /dev/null +++ b/doc/ts-composite-components-splitlayout.md @@ -0,0 +1,88 @@ +# SplitLayout + + +上下结构布局介绍了常用的页面布局样式。主要分为上下文本和上下图文两种类型。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { SplitLayout } from '@ohos.arkui.advanced.SplitLayout' +``` + + +## 子组件 + +无 + + +## 接口 + +SplitLayout({mainImage: Resource, primaryText: string, secondaryText?: string, tertiaryText?: string}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必选 | 参数描述 | +| -------- | -------- | -------- | -------- | +| mainImage | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 传入图片。 | +| primaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 标题内容。 | +| secondaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 副标题内容。 | +| tertiaryText | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 辅助文本。 | +| container | () => void | 否 | 容器内组件。 | + + +## 示例 + +``` +import { SplitLayout } from '@ohos.arkui.advanced.SplitLayout' +@Entry +@Component +struct Index { + @State demoImage: Resource = $r("app.media.music") + @State primaryText: string = "主标题" + @State secondaryText: string = "副标题" + + build() { + Column() { + SplitLayout({ + mainImage: this.demoImage, + primaryText: '新歌推荐', + secondaryText: '私人订制新歌精选站，为你推荐专属优质新歌;', + tertiaryText: "每日更新", + }) { + Text('示例：空白区域容器内可添加组件') + .margin({top:36}) + } + } + .justifyContent(FlexAlign.SpaceBetween) + .height('100%') + .width('100%') + } +} +``` + + +小于600Vp布局： + + +![zh-cn_image_0000001665553957](figures/zh-cn_image_0000001665553957.png) + + +大于600Vp小于840Vp布局： + + +![zh-cn_image_0000001616957408](figures/zh-cn_image_0000001616957408.png) + + +大于840Vp布局： + + +![zh-cn_image_0000001617116972](figures/zh-cn_image_0000001617116972.png) diff --git a/doc/ts-composite-components-subheader.md b/doc/ts-composite-components-subheader.md new file mode 100644 index 0000000..3beb78a --- /dev/null +++ b/doc/ts-composite-components-subheader.md @@ -0,0 +1,168 @@ +# SubHeader + + +子标题，用于列表项顶部，将该组列表划分为一个区块，子标题名称用来概括该区块内容；也可以用于内容项顶部，子标题名称用来概括该区块内容。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +```ts +import { SubHeader } from '@ohos.arkui.advanced.SubHeader' +``` + + +## 子组件 + +无 + + +## 接口 + +SubHeader({primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, icon?: ResourceStr, select?: SelectOptions, operationType?: OperationType, operationItem?: Array<OperationOption>}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + + +**参数：** + + +| 参数名 | 参数类型 | 必填 | 装饰器类型 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| primaryTitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | \@Prop | 标题内容。 | +| secondaryTitle | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | \@Prop | 副标题内容。 | +| icon | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | \@Prop | 图标设置项。 | +| select | SelectOptions | 否 | - | select内容以及事件。 | +| operationType | OperationType | 否 | \@Prop | 操作区(右侧)元素样式。
默认值：OperationType.BUTTON | +| operationItem | Array<OperationOption> | 否 | - | 操作区（右侧）的设置项。 | + + +## OperationType枚举说明 + +| 名称 | 描述 | +| -------- | -------- | +| TEXT_ARROW | 文本按钮（带右箭头）。 | +| BUTTON | 文本按钮（不带右箭头）。 | +| ICON_GROUP | 图标按钮（最多支持配置三张图标）。 | +| LOADING | 加载动画。 | + + +## SelectOptions + +| 名称 | 值 | 是否必填 | 描述 | +| -------- | -------- | -------- | -------- | +| options | Array<[SelectOption](https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md/)> | 是 | 下拉选项内容。 | +| selected | number | 否 | 设置下拉菜单初始选项的索引。
第一项的索引为0。
当不设置selected属性时，
默认选择值为-1，菜单项不选中。 | +| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 设置下拉按钮本身的文本内容。 | +| onSelect | callback: (index: number, value?: string) => void | 否 | 下拉菜单选中某一项的回调。
- index：选中项的索引。
- value：选中项的值。 | + + +## OperationOption + +| 名称 | 值 | 是否必填 | 描述 | +| -------- | -------- | -------- | -------- | +| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 文本内容。 | +| action | ()=>void | 否 | 事件。 | + + +## 示例 + +```ts +import promptAction from '@ohos.promptAction' +import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader' + +@Entry +@Component +struct SubHeaderExample { + build() { + Column() { + SubHeader({ + icon: $r('app.media.ic_public_community_messages'), + primaryTitle: '子标题', + operationType: OperationType.BUTTON, + operationItem: [{ value: '操作', + action: () => { + promptAction.showToast({ message: 'demo' }) + } + }] + }) + } + } +} +``` + +![子标题3](figures/zh-cn_image_202307291.png) + +```ts +import promptAction from '@ohos.promptAction' +import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader' + +@Entry +@Component +struct SubHeaderExample { + build() { + Column() { + SubHeader({ + primaryTitle: '标题', + secondaryTitle: '副文本副文本副文本副文本', + operationType: OperationType.TEXT_ARROW, + operationItem: [{ value: '更多', + action: () => { + promptAction.showToast({ message: 'demo' }) + } + }] + }) + } + } +} +``` + +![zh-cn_image_0000001664546481](figures/zh-cn_image_0000001664546481.png) + +```ts +import promptAction from '@ohos.promptAction' +import { OperationType, SubHeader } from '@ohos.arkui.advanced.SubHeader' + +@Entry +@Component +struct SubHeaderExample { + build() { + Column() { + SubHeader({ + select: { + options: [{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }], + value: 'selectdemo', + selected: 2, + onSelect: (index: number, value?: string) => { + promptAction.showToast({ message: 'demo' }) + } + }, + operationType: OperationType.ICON_GROUP, + operationItem: [{ + value: $r('app.media.ic_public_community_messages'), + action: () => { + promptAction.showToast({ message: 'demo' }) + } + }, { + value: $r('app.media.ic_public_community_messages'), + action: () => { + promptAction.showToast({ message: 'demo' }) + } + }, { + value: $r('app.media.ic_public_community_messages'), + action: () => { + promptAction.showToast({ message: 'demo' }) + } + } + }) + } + } +} +``` + +![子标题5](figures/zh-cn_image_2023072902.png) diff --git a/doc/ts-composite-components-swiperefresher.md b/doc/ts-composite-components-swiperefresher.md new file mode 100644 index 0000000..f00e914 --- /dev/null +++ b/doc/ts-composite-components-swiperefresher.md @@ -0,0 +1,63 @@ +# SwipeRefresher + + +内容加载指获取内容并加载出来。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件及其子组件从 API Version 10 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { SwipeRefresher } from '@ohos.arkui.advacned.SwipeRefresher' +``` + + +## 子组件 + +无 + + +## 接口 + +SwipeRefresher ({content: string, isLoading: boolean}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数值 | 参数类型 | 必填 | 装饰器类型 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| content | string | 否 | \@Prop | 内容加载时显示的文本。 | +| isLoading | boolean | 是 | \@Prop | 当前是否正在加载。 | + + +## 示例 + +``` +import { SwipeRefresher } from '@ohos.arkui.advacned.SwipeRefresher'; + +@Entry +@Component +struct Index { + build() { + Column() { + SwipeRefresher({ + content: '正在加载中', + isLoading: true }) + + SwipeRefresher({ + isLoading: true }) + SwipeRefresher({ + content: '正在加载中', + isLoading: false }) + } + } +} +``` + +![Snipaste_2023-07-24_11-35-40](figures/Snipaste_2023-07-24_11-35-40.png) diff --git a/doc/ts-composite-components-tabtitlebar.md b/doc/ts-composite-components-tabtitlebar.md new file mode 100644 index 0000000..17df6ce --- /dev/null +++ b/doc/ts-composite-components-tabtitlebar.md @@ -0,0 +1,126 @@ +# TabTitleBar + + +页签型标题栏，用于页面之间的切换；仅一级页面适用。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { TabTitleBar } from "@ohos.arkui.advanced.TabTitleBar" +``` + + +## 子组件 + +无 + + +## 接口 + +TabTitleBar({tabItems: Array<TabTitleBarTabItem>, menuItems?: Array<TabTitleBarMenuItem>, swiperContent: () => void}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 | +| -------- | -------- | -------- | -------- | -------- | +| tabItems | Array_<_[ERROR:Invalid link:zh-cn_topic_0000001665635385.xml#xref77363764816,link:zh-cn_topic_0000001658503585.xml#section151512317614](zh-cn_topic_0000001658503585.xml#section151512317614)_>_ | 是 | - | 左侧页签项目列表，定义标题栏左侧的页签项目。 | +| menuItems | Array_<_[ERROR:Invalid link:zh-cn_topic_0000001665635385.xml#xref1873737124811,link:zh-cn_topic_0000001658503585.xml#section5189124910420](zh-cn_topic_0000001658503585.xml#section5189124910420)_>_ | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目 | +| swiperContent | () => void | 否 | \@BuilderParam | 页签列表关联的页面内容构造器 | + + +### TabTitleBarMenuItem + +| 名称 | 值 | 是否必填 | 描述 | +| -------- | -------- | -------- | -------- | +| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 图标资源 | +| isEnabled | boolean | 是 | 是否启用 | +| action | () => void | 否 | 触发时的动作闭包 | + + +### TabTitleBarTabItem + +| 名称 | 值 | 是否必填 | 描述 | +| -------- | -------- | -------- | -------- | +| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 文字页签 | +| icon | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 图片页签资源 | + + +## 示例 + +``` +import { TabTitleBar } from "@ohos.arkui.advanced.TabTitleBar" +import Prompt from '@system.prompt' + +@Entry +@Component +struct Index { + @Builder componentBuilder() { + Text("#1ABC9C\nTURQUOISE") + .fontWeight(FontWeight.Bold) + .fontSize(14) + .width("100%") + .textAlign(TextAlign.Center) + .fontColor("#CCFFFFFF") + .backgroundColor("#1ABC9C") + Text("#16A085\nGREEN SEA") + .fontWeight(FontWeight.Bold) + .fontSize(14) + .width("100%") + .textAlign(TextAlign.Center) + .fontColor("#CCFFFFFF") + .backgroundColor("#16A085") + Text("#2ECC71\nEMERALD") + .fontWeight(FontWeight.Bold) + .fontSize(14) + .width("100%") + .textAlign(TextAlign.Center) + .fontColor("#CCFFFFFF") + .backgroundColor("#2ECC71") + Text("#27AE60\nNEPHRITIS") + .fontWeight(FontWeight.Bold) + .fontSize(14) + .width("100%") + .textAlign(TextAlign.Center) + .fontColor("#CCFFFFFF") + .backgroundColor("#27AE60") + } + private readonly tabItems: { title: ResourceStr, icon?: ResourceStr }[] = + [ { title: "页签1" }, + { title: "页签2" }, + { title: "页签3" }, + { title: "Happy", + icon: $r('app.media.emoji_happy') } ] + private readonly menuItems: { value: Resource, isEnabled: boolean, action: () => void }[] = + [ { isEnabled: true, value: $r('app.media.ic_public_reduce'), + action: () => Prompt.showToast({ message: "on item click! index 0" }) + }, + { isEnabled: true, value: $r('app.media.ic_public_edit'), + action: () => Prompt.showToast({ message: "on item click! index 1" }) + }, + { isEnabled: true, value: $r('app.media.ic_public_save'), + action: () => Prompt.showToast({ message: "on item click! index 2" }) + } ] + build() { + Row() { + Column() { + TabTitleBar({ + swiperContent: this.componentBuilder, + tabItems: this.tabItems, + menuItems: this.menuItems, + }) + }.width('100%') + }.height('100%') + } +} +``` + +![zh-cn_image_0000001616916278](figures/zh-cn_image_0000001616916278.png) diff --git a/doc/ts-composite-components-toolbar.md b/doc/ts-composite-components-toolbar.md new file mode 100644 index 0000000..5c94072 --- /dev/null +++ b/doc/ts-composite-components-toolbar.md @@ -0,0 +1,135 @@ +# ToolBar + + +工具栏用于展示针对当前界面内容的操作选项，在界面底部显示。底部最多显示5个入口，超过则收纳入“更多”子项中，在最右侧显示。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { ToolBar, ToolBarOptions } from '@ohos.arkui.advanced.ToolBar' +``` + + +## 子组件 + +无 + + +## 接口 + +Toolbar({toolBarList: ToolBarOptions, activateIndex?: number, controller: TabsController}) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + +**参数：** + +| 参数名 | 参数类型 | 必选 | 参数描述 | +| -------- | -------- | -------- | -------- | +| toolBarList | [ToolBarOptions](#toolbaroptions) | 是 | 工具栏列表。 | +| activateIndex | number | 否 | 激活态的子项。
默认值为-1。 | +| controller | [TabsController](https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md/#Tabscontroller) | 是 | 筛选器的样式类型。 | + + +## ToolBarOptions + +继承自Array<ToolBarOption> + +**ToolBarOption：** + +| 名称 | 值 | 是否必填 | 描述 | +| -------- | -------- | -------- | -------- | +| content | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 工具栏子项的文本。 | +| action | void | 否 | 工具栏子项点击事件。 | +| icon | [Resource](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resource) | 否 | 工具栏子项的图标。 | +| state | [ItemState](#itemstate) | 否 | 工具栏子项的状态，默认为ENABLE。 | + + +## ItemState + +| 名称 | 描述 | +| -------- | -------- | +| ENABLE | 工具栏子项为正常可点击状态。 | +| DISABLE | 工具栏子项为不可点击状态。 | +| ACTIVATE | 工具栏子项为激活状态，可点击。 | + + +## 示例 + +``` +import { ToolBar, ToolBarOptions } from '@ohos.arkui.advanced.ToolBar' +@Entry +@Component +struct Index { + @State toolbarList: ToolBarOptions = new ToolBarOptions() + aboutToAppear() { + this.toolbarList.push({ text: '剪贴我是超超超超超超超超超长样式', + icon: $r('sys.media.ohos_ic_public_share'), + action: () => { + }, + }) + this.toolbarList.push({ text: '拷贝', + icon: $r('sys.media.ohos_ic_public_copy'), + action: () => { + }, + state:2 + }) + this.toolbarList.push({ text: '粘贴', + icon: $r('sys.media.ohos_ic_public_paste'), + action: () => { + }, + state:3 + }) + this.toolbarList.push({ text: '全选', + icon: $r('sys.media.ohos_ic_public_select_all'), + action: () => { + }, + }) + this.toolbarList.push({ text: '分享', + icon: $r('sys.media.ohos_ic_public_share'), + action: () => { + }, + }) + this.toolbarList.push({ text: '分享', + icon: $r('sys.media.ohos_ic_public_share'), + action: () => { + }, + }) + } + build() { + Row() { + Stack() { + Column(){ + Button("修改减少item") + .width(96) + .height(40) + .onClick(() => { + this.toolbarList.pop() + }) + Button("修改增加item") + .width(96) + .height(40) + .onClick(() => { + this.toolbarList.push(this.toolbarList[1]) + }) + }.margin({bottom: 300}) + Column() { + ToolBar({ + currentIndex: 2, + hwToolBarList: this.toolbarList, + }) + } + }.align(Alignment.Bottom) + .width('100%').height('100%') + } + } +} +``` + +![zh-cn_image_0000001658655445](figures/zh-cn_image_0000001658655445.png) diff --git a/doc/ts-composite-components-treeview.md b/doc/ts-composite-components-treeview.md new file mode 100644 index 0000000..4eef716 --- /dev/null +++ b/doc/ts-composite-components-treeview.md @@ -0,0 +1,379 @@ +# TreeView + + +树视图作为一种分层显示的列表，适合显示嵌套结构。拥有父列表项和子列表项，可展开或折叠。子列表项支持选中一项或多项。 + + +用于效率型应用，如备忘录、电子邮件、图库中的侧边导航栏中。 + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 + + +## 导入模块 + +``` +import { TreeView } from "@ohos.arkui.advanced.TreeView" +``` + + +## 子组件 + +无 + + +## 接口 + +TreeView({ treeController: TreeController }) + +**装饰器类型：**\@Component + +**系统能力：**SystemCapability.ArkUI.ArkUI.Full + + +**参数：** + + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| treeController | [TreeController](#treecontroller) | 是 | 树视图节点信息。 | + + +## TreeController + +树视图组件的控制器，可以将此对象绑定至树视图组件，然后通过它控制树的节点信息，同一个控制器不可以控制多个树视图组件。 + + +### 导入对象 + +``` +treeController: TreeController = new TreeController() +``` + + +### addNode + + +addNode(nodeParam?: NodeParam): void + + +点击某个节点后，调用该方法可以触发新增孩子节点 + + +**参数：** + + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| nodeParam | [NodeParam](#nodeparam) | 否 | 节点信息。 | + + +### removeNode + +removeNode(): void + +点击某个节点后，调用该方法可以触发删除该节点 + + +### modifyNode + + +modifyNode(): void + + +点击某个节点后，调用该方法可以触发修改该节点 + + +### buildDone + +buildDone(): void + +建立树视图。节点增加完毕后，必须调用该方法，触发树信息的保存 + + +### refreshNode + +refreshNode(parentId: number, parentSubTitle: ResourceStr, currentSubtitle: ResourceStr): void + +**参数：** + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| parentId | number | 是 | 父节点Id。 | +| parentSubTitle | ResourceStr | 是 | 父节点副文本 | +| currentSubtitle | ResourceStr | 是 | 当前节点副文本 | + + +## NodeParam + +| 名称 | 值 | 是否必填 | 描述 | +| -------- | -------- | -------- | -------- | +| parentNodeId | number | 否 | 父亲节点 | +| currentNodeId | number | 否 | 当前孩子节点 | +| isFolder | boolean | 否 | 是否是目录 | +| icon | ResourceStr | 否 | 图标 | +| selectedIcon | ResourceStr | 否 | 选中图标 | +| editIcon | ResourceStr | 否 | 编辑图标 | +| primaryTitle | ResourceStr | 否 | 主标题 | +| secondaryTitle | ResourceStr | 否 | 副标题 | +| container | () => void | 否 | 绑定在节点上的子组件，子组件由[@Builder](https://docs.openharmony.cn/pages/v3.1/en/application-dev/ui/ts-component-based-builder.md/)修饰 | + + +## TreeListenerManager对象说明 + +树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。 + + +### 导入对象 + +``` +import { TreeListenerManager } from '@ohos.arkui.advanced.TreeView' +``` + + +### getInstance + +getInstance(): TreeListenerManager + +获取监听管理器单例对象 + + +### getTreeListener() + +getTreeListener(): TreeListener + +获取监听器 + + +## TreeListener对象说明 + +树视图组件的监听器，可以将此对象绑定至树视图组件，然后通过它监听树的节点的变化，同一个监听器不可以控制多个树视图组件。 + + +### 导入对象 + +``` +treeListener: TreeListener = TreeListenerManager.getInstance().getTreeListener() +``` + + +### on + +on(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; + +注册监听 + +**参数：** + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| type | [TreeListenType](#treelistentype) | 是 | 监听类型 | +| nodeParam | [NodeParam](#nodeparam) | 是 | 节点信息。 | + + +### once + +once(type: TreeListenType, callback: (callbackParam: CallbackParam) => void): void; + +注册一次监听 + +**参数：** + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| type | [TreeListenType](#treelistentype) | 是 | 监听类型 | +| nodeParam | [NodeParam](#nodeparam) | 是 | 节点信息。 | + + +### off + + +off(type: TreeListenType, callback?: (callbackParam: CallbackParam) => void): void; + + +取消监听 + + +**参数：** + + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| type | [TreeListenType](#treelistentype) | 是 | 监听类型 | +| nodeParam | [NodeParam](#nodeparam) | 是 | 节点信息。 | + + +## TreeListenType + +| 名称 | 描述 | +| -------- | -------- | +| NODE_CLICK | 监听节点点击事件 | +| NODE_ADD | 监听节点增加事件 | +| NODE_DELETE | 监听节点删除事件 | +| NODE_MODIFY | 监听节点修改事件 | +| NODE_MOVE | 监听节点移动事件 | + + +## CallbackParam + +| 名称 | 值 | 是否必填 | 描述 | +| -------- | -------- | -------- | -------- | +| currentNodeId | number | 是 | 当前孩子节点 | +| parentNodeId | number | 否 | 父亲节点表 | +| childIndex: number | number | 否 | 孩子索引 | + + +## 示例 + +``` +import { TreeController, TreeListener, TreeListenerManager, TreeListenType, NodeParam, TreeView, CallbackParam } from '@ohos.arkui.advanced.TreeView' + +@Entry +@Component +struct TreeViewDemo { + private listTreeNode: TreeController = new TreeController(); + private appEventBus: TreeListener = TreeListenerManager.getInstance().getTreeListener(); + @State clickNodeId: number = 0; + @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']; + + aboutToDisappear(): void { + this.appEventBus.off(TreeListenType.NODE_CLICK, null); + this.appEventBus.off(TreeListenType.NODE_ADD, null); + this.appEventBus.off(TreeListenType.NODE_DELETE, null); + } + + @Builder menuBuilder0() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) + .onClick((event: ClickEvent) => { + this.listTreeNode.removeNode(); + }) + }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'}) + } + + @Builder menuBuilder1() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Text('新增').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) + .onClick((event: ClickEvent) => { + this.listTreeNode.addNode(); + }) + Divider() + Text('删除').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) + .onClick((event: ClickEvent) => { + this.listTreeNode.removeNode(); + }) + Divider() + Text('重命名').fontSize(16).width(100).height(30).textAlign(TextAlign.Center) + .onClick((event: ClickEvent) => { + this.listTreeNode.modifyNode(); + }) + }.width(100).border({width: 1, color: 0x80808a, radius: '16dp'}) + } + + aboutToAppear(): void { + this.appEventBus.on(TreeListenType.NODE_MOVE, (callbackParam: CallbackParam) => { + }) + this.appEventBus.on(TreeListenType.NODE_CLICK, (callbackParam: CallbackParam) => { + }) + + let normalResource: Resource = $r('app.media.ic_public_collect_normal'); + let selectedResource: Resource = $r('app.media.ic_public_collect_selected'); + let editResource: Resource = $r('app.media.ic_public_collect_edit'); + let nodeParam: NodeParam = { parentNodeId:-1, currentNodeId: 1, isFolder: true, icon: normalResource, selectedIcon: selectedResource, + editIcon: editResource, primaryTitle: "目录1验证悬浮框自适应效果是否OK", + menu: this.menuBuilder1.bind(this), secondaryTitle: "6" }; + this.listTreeNode + .addNode(nodeParam) + .addNode({parentNodeId:1, currentNodeId: 2, isFolder: false, primaryTitle: "项目1_1" }) + .addNode({ parentNodeId:-1, currentNodeId: 7, isFolder: true, primaryTitle: "目录2", menu: this.menuBuilder1.bind(this) }) + .addNode({ parentNodeId:-1, currentNodeId: 23, isFolder: true, icon: normalResource, selectedIcon: selectedResource, + editIcon: editResource, primaryTitle: "目录3", menu: this.menuBuilder1.bind(this) }) + .addNode({ parentNodeId:-1, currentNodeId: 24, isFolder: false, primaryTitle: "项目4", menu: this.menuBuilder1.bind(this) }) + .addNode({ parentNodeId:-1, currentNodeId: 31, isFolder: true, icon: normalResource, selectedIcon: selectedResource, + editIcon: editResource, primaryTitle: "目录5", menu: this.menuBuilder1.bind(this), secondaryTitle: "0" }) + .addNode({ parentNodeId:-1, currentNodeId: 32, isFolder: true, icon: normalResource, selectedIcon: selectedResource, + editIcon: editResource, primaryTitle: "目录6", menu: this.menuBuilder1.bind(this), secondaryTitle: "0" }) + .addNode({ parentNodeId:32, currentNodeId: 35, isFolder: true, icon: normalResource, selectedIcon: selectedResource, + editIcon: editResource, primaryTitle: "目录6-1", menu: this.menuBuilder1.bind(this), secondaryTitle: "0" }) + .addNode({ parentNodeId:-1, currentNodeId: 33, isFolder: true, icon: normalResource, selectedIcon: selectedResource, + editIcon: editResource, primaryTitle: "目录7", menu: this.menuBuilder1.bind(this), secondaryTitle: "0" }) + .addNode({ parentNodeId:33, currentNodeId: 34, isFolder: false, primaryTitle: "项目8" }) + .addNode({ parentNodeId:-1, currentNodeId: 36, isFolder: false, primaryTitle: "项目9" }) + .buildDone(); + } + + @Builder subfieldPopup(item: any) { + Column() { + Text(item) + .width('50%').height(60).fontSize(16).borderRadius(10) + .textAlign(TextAlign.Center).backgroundColor(Color.Yellow) + } + } + + build() { + SideBarContainer(SideBarContainerType.Embed) + { + TreeView({ treeController: this.listTreeNode }) + Row() { + Divider().vertical(true).strokeWidth(2).color(0x000000).lineCap(LineCapStyle.Round) + Column() { + Row() { + Text('ClickNodeId=' + this.clickNodeId).fontSize('16fp') + Button('Add', { type: ButtonType.Normal, stateEffect: true }) + .borderRadius(8).backgroundColor(0x317aff).width(90) + .onClick((event: ClickEvent) => { + this.listTreeNode.addNode(); + }) + Button('Modify', { type: ButtonType.Normal, stateEffect: true }) + .borderRadius(8).backgroundColor(0x317aff).width(90) + .onClick((event: ClickEvent) => { + this.listTreeNode.modifyNode(); + }) + Button('Remove', { type: ButtonType.Normal, stateEffect: true }) + .borderRadius(8).backgroundColor(0x317aff).width(120) + .onClick((event: ClickEvent) => { + this.listTreeNode.removeNode(); + }) + } + + /* drag item. */ + List({ space: 10, initialIndex: 0 }) { + ForEach(this.numbers, (item) => { + ListItem() { + Text('' + item) + .width('100%').height(38).fontSize(16).borderRadius(10) + .textAlign(TextAlign.Center).backgroundColor(0xAFEEEE) + } + .onSelect((isSelected: boolean) => { + console.log('listItem selected') + }) + .onDragStart(() => { + this.listTreeNode.refreshNode(1,'选择节点','目标节点') + return this.subfieldPopup(item) + }) + }, item => item) + } + .editMode(true) + .multiSelectable(true) + .onDrop((event: DragEvent, extraParams: string) => { + console.log('outer onDrop') + }) + + }.height('100%').width('70%').alignItems(HorizontalAlign.Start) + } + } + .focusable(true) + .sideBarWidth(240) + .minSideBarWidth(0) + .maxSideBarWidth(900) + .showControlButton(false) + .showSideBar(true) + .onChange((value: boolean) => { + console.info('status:' + value); + }) + } +} +``` + +![zh-cn_image_0000001664822257](figures/zh-cn_image_0000001664822257.png) diff --git a/figures/advanced_ui.png b/figures/advanced_ui.png new file mode 100644 index 0000000..3ba1893 Binary files /dev/null and b/figures/advanced_ui.png differ diff --git a/figures/advanced_ui_en.png b/figures/advanced_ui_en.png new file mode 100644 index 0000000..b5be23e Binary files /dev/null and b/figures/advanced_ui_en.png differ diff --git a/figures/advanced_ui_sub.png b/figures/advanced_ui_sub.png new file mode 100644 index 0000000..a4c2880 Binary files /dev/null and b/figures/advanced_ui_sub.png differ diff --git a/figures/advanced_ui_sub_en.png b/figures/advanced_ui_sub_en.png new file mode 100644 index 0000000..03134cd Binary files /dev/null and b/figures/advanced_ui_sub_en.png differ