1# dialog
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<dialog>** component is a custom dialog box.
8
9## Required Permissions
10
11None
12
13
14## Child Components
15
16This component supports only one child component.
17
18
19## Attributes
20
21In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
22
23| Name                   | Type     | Default Value  | Mandatory  | Description          |
24| --------------------- | ------- | ----- | ---- | ------------ |
25| dragable<sup>7+</sup> | boolean | false | No   | Whether the dialog box can be dragged.|
26
27>  **NOTE**
28>
29>  The **\<dialog>** component does not support the **focusable** and **click-effect** attributes.
30
31
32## Styles
33
34Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](js-components-common-styles.md) are supported.
35
36
37## Events
38
39The following events are supported. The [universal events](js-components-common-events.md) are not supported.
40
41| Name                | Parameter  | Description                        |
42| ------------------ | ---- | -------------------------- |
43| cancel             | -    | Triggered when a user touches an area outside the dialog box to cancel the dialog box.|
44| show<sup>7+</sup>  | -    | Triggered when the dialog box is displayed.              |
45| close<sup>7+</sup> | -    | Triggered when the dialog box is closed.              |
46
47
48## Methods
49
50The following methods are supported. The [universal methods](js-components-common-methods.md) are not supported.
51
52| Name   | Parameter  | Description    |
53| ----- | ---- | ------ |
54| show  | -    | Shows a dialog box.|
55| close | -    | Close the dialog box.|
56
57>  **NOTE**
58>
59>  Attributes and styles of a **\<dialog>** component cannot be dynamically updated.
60
61
62## Example
63
64```html
65<!-- xxx.hml -->
66<div class="doc-page">
67  <div class="btn-div">
68    <button type="capsule" value="Click here" class="btn" onclick="showDialog"></button>
69  </div>
70  <dialog id="simpledialog" dragable="true" class="dialog-main" oncancel="cancelDialog">
71    <div class="dialog-div">
72      <div class="inner-txt">
73        <text class="txt" ondoubleclick="doubleclick">Simple dialog</text>
74      </div>
75      <div class="inner-btn">
76        <button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
77        <button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
78      </div>
79    </div>
80  </dialog>
81</div>
82```
83
84```css
85/* xxx.css */
86.doc-page {
87  flex-direction: column;
88  justify-content: center;
89  align-items: center;
90}
91.btn-div {
92  width: 100%;
93  height: 200px;
94  flex-direction: column;
95  align-items: center;
96  justify-content: center;
97}
98.btn {
99  background-color: #F2F2F2;
100  text-color: #0D81F2;
101}
102.txt {
103  color: #000000;
104  font-weight: bold;
105  font-size: 39px;
106}
107.dialog-main {
108  width: 500px;
109}
110.dialog-div {
111  flex-direction: column;
112  align-items: center;
113}
114.inner-txt {
115  width: 400px;
116  height: 160px;
117  flex-direction: column;
118  align-items: center;
119  justify-content: space-around;
120}
121.inner-btn {
122  width: 400px;
123  height: 120px;
124  justify-content: space-around;
125  align-items: center;
126}
127.btn-txt {
128  background-color: #F2F2F2;
129  text-color: #0D81F2;
130}
131```
132
133```js
134// xxx.js
135import promptAction from '@ohos.promptAction';
136export default {
137  showDialog() {
138    this.$element('simpledialog').show()
139  },
140  cancelDialog() {
141    promptAction.showToast({
142      message: 'Dialog cancelled'
143    })
144  },
145  cancelSchedule() {
146    this.$element('simpledialog').close()
147    promptAction.showToast({
148      message: 'Successfully cancelled'
149    })
150  },
151  setSchedule() {
152    this.$element('simpledialog').close()
153    promptAction.showToast({
154      message: 'Successfully confirmed'
155    })
156  },
157  doubleclick(){
158    promptAction.showToast({
159      message: 'doubleclick'
160    })
161  }
162}
163```
164
165![4](figures/4.gif)
166