README.md
1# JS Dialog Box
2
3
4
5### Introduction
6
7The JS UI component **\<dialog>** allows users to customize the dialog box style and layout. This sample shows how to use a custom dialog box to implement contacts addition and deletion.
8
9### Usage
10
111. Touch **Add Contact**. A dialog box is displayed. Touch **OK** to add a contact, or touch **Cancel** to cancel the addition.
12
132. In the contact list, touch **Delete** next to the new contact. A dialog box is displayed. Touch **Delete** to delete the contact, or touch **Cancel** to cancel the deletion.
14
15### Constraints
16
17This sample can only be run on standard-system devices.
18
README_zh.md
1# 页面弹窗
2
3### 简介
4
5JS中支持用户自定义弹窗，<dialog/>组件作为容器组件，用户可以自定义弹窗的样式和布局。本示例完成了添加和删除联系人功能，在添加和删除时使用自定义弹窗来实现。实现效果如下：
6
7
8
9### 相关概念
10
11自定义弹窗：自定义弹窗为容器组件，用户可以自定义弹窗显示内容和样式。
12
13### 相关权限
14
15不涉及。
16
17### 使用说明
18
191.点击**添加联系人**会弹出添加联系人弹窗，点击**确定**会添加该联系人，点击**取消**则取消添加。
20
212.在添加的联系人列表中，点击**删除**，会弹出确认弹窗，点击**删除**则会将此联系人从列表中删除，点击**取消**则取消删除操作。
22
23### 约束与限制
24
251.本示例支持标准系统上运行。
26
272.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。
28
