1# dialog<a name="EN-US_TOPIC_0000001162414613"></a> 2 3- [Permission List](#en-us_topic_0000001059148550_section11257113618419) 4- [Child Component](#en-us_topic_0000001059148550_section9288143101012) 5- [Attribute](#en-us_topic_0000001059148550_section2907183951110) 6- [Event](#en-us_topic_0000001059148550_section20424336163815) 7- [Style](#en-us_topic_0000001059148550_section5775351116) 8- [Method](#en-us_topic_0000001059148550_section11753103216253) 9- [Example Code](#en-us_topic_0000001059148550_section6663311114620) 10 11The **<dialog\>** component is a custom pop-up container. 12 13## Permission List<a name="en-us_topic_0000001059148550_section11257113618419"></a> 14 15None 16 17## Child Component<a name="en-us_topic_0000001059148550_section9288143101012"></a> 18 19A single child component is supported. 20 21## Attribute<a name="en-us_topic_0000001059148550_section2907183951110"></a> 22 23<a name="en-us_topic_0000001059148550_table20633101642315"></a> 24<table><thead align="left"><tr id="en-us_topic_0000001059148550_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a9ba8c579217b4b8b841b035f1d28b20e"></a>Name</p> 25</th> 26<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a633002333b024497914a4b172446f14e"></a>Type</p> 27</th> 28<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a4950f7884c6540b9ad523ac34657d952"></a>Default Value</p> 29</th> 30<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001059148550_p824610360217"><a name="en-us_topic_0000001059148550_p824610360217"></a><a name="en-us_topic_0000001059148550_p824610360217"></a>Mandatory</p> 31</th> 32<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a1313564aa9404a338447087d5918c17d"></a>Description</p> 33</th> 34</tr> 35</thead> 36<tbody><tr id="en-us_topic_0000001059148550_row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_adb8a73146d764f2aab50fc046169ab26"></a>id</p> 37</td> 38<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a06898db2627246f78e85d4fbadeee85c"></a>string</p> 39</td> 40<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ae685ead324a647bcba1bbb45c9402dd6"></a>-</p> 41</td> 42<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_p42461736102118"><a name="en-us_topic_0000001059148550_p42461736102118"></a><a name="en-us_topic_0000001059148550_p42461736102118"></a>No</p> 43</td> 44<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a692121725a9b4ebbae65cd22b94b672e"></a>Unique ID of a component.</p> 45</td> 46</tr> 47<tr id="en-us_topic_0000001059148550_row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a7c032d302e1d437eac59680e066308b0"></a>style</p> 48</td> 49<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a6ba72f5c52df4fba9b02b5dffa26677e"></a>string</p> 50</td> 51<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a23cec1f95fd04ff1b3b20f58844ea654"></a>-</p> 52</td> 53<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_p17246836142119"><a name="en-us_topic_0000001059148550_p17246836142119"></a><a name="en-us_topic_0000001059148550_p17246836142119"></a>No</p> 54</td> 55<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ab9c92d331da44a0e9114f6760340680a"></a>Style declaration of a component.</p> 56</td> 57</tr> 58<tr id="en-us_topic_0000001059148550_row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a3e97d6d2a5b84e06bf619049840a00a8"></a>class</p> 59</td> 60<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_af0974175e9434735b035a4db9146aa04"></a>string</p> 61</td> 62<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_aa5caace6225b440eba13dc2230f3ef0f"></a>-</p> 63</td> 64<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_p324614367213"><a name="en-us_topic_0000001059148550_p324614367213"></a><a name="en-us_topic_0000001059148550_p324614367213"></a>No</p> 65</td> 66<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a2f6321cf45ae481983a88dcc2f900900"></a>Style class of a component, which is used to refer to a style table.</p> 67</td> 68</tr> 69<tr id="en-us_topic_0000001059148550_row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p1786251117156"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p1786251117156"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p1786251117156"></a>ref</p> 70</td> 71<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p1086241119157"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p1086241119157"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p1086241119157"></a>string</p> 72</td> 73<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p586281111151"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p586281111151"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p586281111151"></a>-</p> 74</td> 75<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_p1624612362219"><a name="en-us_topic_0000001059148550_p1624612362219"></a><a name="en-us_topic_0000001059148550_p1624612362219"></a>No</p> 76</td> 77<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p113416153342"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p113416153342"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_p113416153342"></a>Used to register reference information of child elements<span id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ph5815920163518"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ph5815920163518"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ph5815920163518"></a> or child components</span>. The reference information is registered with the parent component on <strong id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_b08212202354"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_b08212202354"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_b08212202354"></a>$refs</strong>.</p> 78</td> 79</tr> 80<tr id="en-us_topic_0000001059148550_row1863421642313"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ab8d3c8007e0a42b9962e0db009e7be9d"></a>disabled</p> 81</td> 82<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a05782d6a1a5d42918bc95813dca610d6"></a>boolean</p> 83</td> 84<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a3e2f721f63a74e4b974e9bd5e2f88994"></a>false</p> 85</td> 86<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_p192476368214"><a name="en-us_topic_0000001059148550_p192476368214"></a><a name="en-us_topic_0000001059148550_p192476368214"></a>No</p> 87</td> 88<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a4065980a1e914cf98acce5250ee4ae5a"></a>Whether a component is disabled. If it is disabled, it cannot respond to user interaction.</p> 89</td> 90</tr> 91<tr id="en-us_topic_0000001059148550_row1263451617236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a751c9d46a62348ec902c7fdf97468b9d"></a>data</p> 92</td> 93<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_a8e6d1bb4d0bc423fb8466ee3acd1882f"></a>string</p> 94</td> 95<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_ab8cb15c9c3444b13b64945788131dce6"></a>-</p> 96</td> 97<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_p22471736132114"><a name="en-us_topic_0000001059148550_p22471736132114"></a><a name="en-us_topic_0000001059148550_p22471736132114"></a>No</p> 98</td> 99<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001058340523_aa3f56a32296b4e85bcda2d2c00d0884f"></a>Attribute set for a component to facilitate data storage and reading.</p> 100</td> 101</tr> 102</tbody> 103</table> 104 105## Event<a name="en-us_topic_0000001059148550_section20424336163815"></a> 106 107<a name="en-us_topic_0000001059148550_table1342413673818"></a> 108<table><thead align="left"><tr id="en-us_topic_0000001059148550_row94241436103816"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001059148550_p6424153610389"><a name="en-us_topic_0000001059148550_p6424153610389"></a><a name="en-us_topic_0000001059148550_p6424153610389"></a>Name</p> 109</th> 110<th class="cellrowborder" valign="top" width="30.769999999999996%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001059148550_p1742463611382"><a name="en-us_topic_0000001059148550_p1742463611382"></a><a name="en-us_topic_0000001059148550_p1742463611382"></a>Parameter</p> 111</th> 112<th class="cellrowborder" valign="top" width="50.77%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001059148550_p542483633813"><a name="en-us_topic_0000001059148550_p542483633813"></a><a name="en-us_topic_0000001059148550_p542483633813"></a>Description</p> 113</th> 114</tr> 115</thead> 116<tbody><tr id="en-us_topic_0000001059148550_row4424123611385"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001059148550_p5424193693814"><a name="en-us_topic_0000001059148550_p5424193693814"></a><a name="en-us_topic_0000001059148550_p5424193693814"></a>cancel</p> 117</td> 118<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001059148550_p2042493610387"><a name="en-us_topic_0000001059148550_p2042493610387"></a><a name="en-us_topic_0000001059148550_p2042493610387"></a>-</p> 119</td> 120<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001059148550_p242453613385"><a name="en-us_topic_0000001059148550_p242453613385"></a><a name="en-us_topic_0000001059148550_p242453613385"></a>Triggered when a user taps a non-dialog area to cancel the pop-up.</p> 121</td> 122</tr> 123</tbody> 124</table> 125 126## Style<a name="en-us_topic_0000001059148550_section5775351116"></a> 127 128The following style attributes are supported. 129 130<a name="en-us_topic_0000001059148550_table1744514388541"></a> 131<table><thead align="left"><tr id="en-us_topic_0000001059148550_row1244614388545"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a14a0c012a26248cfbec6b13dcc4f2cbe"></a>Name</p> 132</th> 133<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a8dc328a555a74157a00de86181fc3a7b"></a>Type</p> 134</th> 135<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a41a31e48d0c74ad4982add2655515c82"></a>Default Value</p> 136</th> 137<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001059148550_p117421754619"><a name="en-us_topic_0000001059148550_p117421754619"></a><a name="en-us_topic_0000001059148550_p117421754619"></a>Mandatory</p> 138</th> 139<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_af7a726e456f7485c87bd4e0527bc6584"></a>Description</p> 140</th> 141</tr> 142</thead> 143<tbody><tr id="en-us_topic_0000001059148550_row13446238145410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a8bc81ecef4934adf91deb1d6167045d7"></a>width</p> 144</td> 145<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a59692217b9c94353a020a2f0a20f01a7"></a><length> | <percentage></p> 146</td> 147<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p3948114217528"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p3948114217528"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p3948114217528"></a>-</p> 148</td> 149<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_p13174101704612"><a name="en-us_topic_0000001059148550_p13174101704612"></a><a name="en-us_topic_0000001059148550_p13174101704612"></a>No</p> 150</td> 151<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_a935a44a695314b919c619e13cc8fd95b"><a name="en-us_topic_0000001059148550_a935a44a695314b919c619e13cc8fd95b"></a><a name="en-us_topic_0000001059148550_a935a44a695314b919c619e13cc8fd95b"></a>Width of the component.</p> 152<p id="en-us_topic_0000001059148550_ac26d1804807944a080a22fc9231dab73"><a name="en-us_topic_0000001059148550_ac26d1804807944a080a22fc9231dab73"></a><a name="en-us_topic_0000001059148550_ac26d1804807944a080a22fc9231dab73"></a>If this attribute is not set, the default width of the pop-up window is used. </p> 153</td> 154</tr> 155<tr id="en-us_topic_0000001059148550_row7446738195418"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a738cc687552c4b8cb1aa9f9e7d9ea8c2"></a>height</p> 156</td> 157<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a82c5d9c65b3646ec92afe5f0f47a2149"></a><length><span id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_ph11748352163918"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_ph11748352163918"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_ph11748352163918"></a></span> | <percentage></p> 158</td> 159<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a7e6c7daafecf475888d0420835662eb4"></a>-</p> 160</td> 161<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_p71741417194619"><a name="en-us_topic_0000001059148550_p71741417194619"></a><a name="en-us_topic_0000001059148550_p71741417194619"></a>No</p> 162</td> 163<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_a516ecf6c4c404c4f90615a659c3c837c"><a name="en-us_topic_0000001059148550_a516ecf6c4c404c4f90615a659c3c837c"></a><a name="en-us_topic_0000001059148550_a516ecf6c4c404c4f90615a659c3c837c"></a>Height of the component.</p> 164<p id="en-us_topic_0000001059148550_a06379f9b762640f38d232c31d878a67a"><a name="en-us_topic_0000001059148550_a06379f9b762640f38d232c31d878a67a"></a><a name="en-us_topic_0000001059148550_a06379f9b762640f38d232c31d878a67a"></a>If this attribute is not set, the default height of the pop-up window is used. </p> 165</td> 166</tr> 167<tr id="en-us_topic_0000001059148550_row11447438175410"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_afa508e5429d948b2b561943d6b2f0f31"></a>margin</p> 168</td> 169<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a4dab4f9d97a74a27a45b7ef1d2ab08e6"></a><length> | <percentage><sup id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_sup1433352175220"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_sup1433352175220"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_sup1433352175220"></a>5+</sup></p> 170</td> 171<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a5e3c234d78214e8180b51d237adda154"></a>0</p> 172</td> 173<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p4730774285"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p4730774285"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p4730774285"></a>No</p> 174</td> 175<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a1d350e36a773420baf5ebb930cd5ad66"></a>Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:</p> 176<a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_ul5333133311105"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_ul5333133311105"></a><ul id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_ul5333133311105"><li><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p03345339103"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p03345339103"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p03345339103"></a>If you set only one value, it specifies the margin for all the four sides.</p> 177</li><li><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p1133420334108"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p1133420334108"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p1133420334108"></a>If you set two values, the first value is for the top and bottom sides and the second value for the left and right sides.</p> 178</li><li><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p193341533191015"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p193341533191015"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p193341533191015"></a>If you set three values, the first value is for the top, the second value for the left and right, and the third value for the bottom.</p> 179</li><li><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p733412334102"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p733412334102"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p733412334102"></a>If you set four values, they are margins for top, right, bottom, and left sides, respectively.</p> 180</li></ul> 181</td> 182</tr> 183<tr id="en-us_topic_0000001059148550_row144473383544"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a70939a36b2b04dd8bec21f5bddc8637e"></a>margin-[left|top|right|bottom]</p> 184</td> 185<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_ae53ac9ac370d483990e04ea9789c1e49"></a><length> | <percentage><sup id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_sup378331720532"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_sup378331720532"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_sup378331720532"></a>5+</sup></p> 186</td> 187<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a180cd037e6174e5c82f35a3a66b6f2ec"></a>0</p> 188</td> 189<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p773013742811"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p773013742811"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_p773013742811"></a>No</p> 190</td> 191<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a><a name="en-us_topic_0000001059148550_en-us_topic_0000001059340528_a487d09add6e54c5c89fa4f22e9318271"></a>Left, top, right, and bottom margins.</p> 192</td> 193</tr> 194<tr id="en-us_topic_0000001059148550_row10941742104517"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001059148550_p172551848154518"><a name="en-us_topic_0000001059148550_p172551848154518"></a><a name="en-us_topic_0000001059148550_p172551848154518"></a>margin-[start|end]<sup id="en-us_topic_0000001059148550_sup1949363312586"><a name="en-us_topic_0000001059148550_sup1949363312586"></a><a name="en-us_topic_0000001059148550_sup1949363312586"></a>5+</sup></p> 195</td> 196<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001059148550_p02551548174514"><a name="en-us_topic_0000001059148550_p02551548174514"></a><a name="en-us_topic_0000001059148550_p02551548174514"></a><length></p> 197</td> 198<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001059148550_p9255144811459"><a name="en-us_topic_0000001059148550_p9255144811459"></a><a name="en-us_topic_0000001059148550_p9255144811459"></a>0</p> 199</td> 200<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001059148550_p2255134874519"><a name="en-us_topic_0000001059148550_p2255134874519"></a><a name="en-us_topic_0000001059148550_p2255134874519"></a>No</p> 201</td> 202<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001059148550_p425524854513"><a name="en-us_topic_0000001059148550_p425524854513"></a><a name="en-us_topic_0000001059148550_p425524854513"></a>Start and end margins.</p> 203</td> 204</tr> 205</tbody> 206</table> 207 208## Method<a name="en-us_topic_0000001059148550_section11753103216253"></a> 209 210The following methods are supported. 211 212<a name="en-us_topic_0000001059148550_table20753173210251"></a> 213<table><thead align="left"><tr id="en-us_topic_0000001059148550_row575363214257"><th class="cellrowborder" valign="top" width="18.459999999999997%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001059148550_p157531032112517"><a name="en-us_topic_0000001059148550_p157531032112517"></a><a name="en-us_topic_0000001059148550_p157531032112517"></a>Name</p> 214</th> 215<th class="cellrowborder" valign="top" width="30.769999999999996%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001059148550_p77531632132518"><a name="en-us_topic_0000001059148550_p77531632132518"></a><a name="en-us_topic_0000001059148550_p77531632132518"></a>Parameter</p> 216</th> 217<th class="cellrowborder" valign="top" width="50.77%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001059148550_p147531232132512"><a name="en-us_topic_0000001059148550_p147531232132512"></a><a name="en-us_topic_0000001059148550_p147531232132512"></a>Description</p> 218</th> 219</tr> 220</thead> 221<tbody><tr id="en-us_topic_0000001059148550_row15753113210251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001059148550_p2314135812511"><a name="en-us_topic_0000001059148550_p2314135812511"></a><a name="en-us_topic_0000001059148550_p2314135812511"></a>show</p> 222</td> 223<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001059148550_p7314115819256"><a name="en-us_topic_0000001059148550_p7314115819256"></a><a name="en-us_topic_0000001059148550_p7314115819256"></a>-</p> 224</td> 225<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001059148550_p0314958162512"><a name="en-us_topic_0000001059148550_p0314958162512"></a><a name="en-us_topic_0000001059148550_p0314958162512"></a>Shows a dialog box.</p> 226</td> 227</tr> 228<tr id="en-us_topic_0000001059148550_row393410526251"><td class="cellrowborder" valign="top" width="18.459999999999997%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001059148550_p7314358182512"><a name="en-us_topic_0000001059148550_p7314358182512"></a><a name="en-us_topic_0000001059148550_p7314358182512"></a>close</p> 229</td> 230<td class="cellrowborder" valign="top" width="30.769999999999996%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001059148550_p1231455814253"><a name="en-us_topic_0000001059148550_p1231455814253"></a><a name="en-us_topic_0000001059148550_p1231455814253"></a>-</p> 231</td> 232<td class="cellrowborder" valign="top" width="50.77%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001059148550_p10314105842512"><a name="en-us_topic_0000001059148550_p10314105842512"></a><a name="en-us_topic_0000001059148550_p10314105842512"></a>Closes a dialog box.</p> 233</td> 234</tr> 235</tbody> 236</table> 237 238> **NOTE:** 239>Attributes and styles of a **<dialog\>** component cannot be dynamically updated. 240 241## Example Code<a name="en-us_topic_0000001059148550_section6663311114620"></a> 242 243``` 244<!-- xxx.hml --> 245<div class="doc-page"> 246 <div class="btn-div"> 247 <button type="capsule" value="Click here" class="btn" onclick="showDialog"></button> 248 </div> 249 <dialog id="simpledialog" class="dialog-main" oncancel="cancelDialog"> 250 <div class="dialog-div"> 251 <div class="inner-txt"> 252 <text class="txt">Simple dialog</text> 253 </div> 254 <div class="inner-btn"> 255 <button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button> 256 <button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button> 257 </div> 258 </div> 259 </dialog> 260</div> 261``` 262 263``` 264/* xxx.css */ 265.doc-page { 266 flex-direction: column; 267 justify-content: center; 268 align-items: center; 269} 270.btn-div { 271 width: 100%; 272 height: 200px; 273 flex-direction: column; 274 align-items: center; 275 justify-content: center; 276} 277.txt { 278 color: #000000; 279 font-weight: bold; 280 font-size: 39px; 281} 282.dialog-main { 283 width: 500px; 284} 285.dialog-div { 286 flex-direction: column; 287 align-items: center; 288} 289.inner-txt { 290 width: 400px; 291 height: 160px; 292 flex-direction: column; 293 align-items: center; 294 justify-content: space-around; 295} 296.inner-btn { 297 width: 400px; 298 height: 120px; 299 justify-content: space-around; 300 align-items: center; 301} 302``` 303 304``` 305// xxx.js 306import prompt from '@system.prompt'; 307 308export default { 309 showDialog(e) { 310 this.$element('simpledialog').show() 311 }, 312 cancelDialog(e) { 313 prompt.showToast({ 314 message: 'Dialog cancelled' 315 }) 316 }, 317 cancelSchedule(e) { 318 this.$element('simpledialog').close() 319 prompt.showToast({ 320 message: 'Successfully cancelled' 321 }) 322 }, 323 setSchedule(e) { 324 this.$element('simpledialog').close() 325 prompt.showToast({ 326 message: 'Successfully confirmed' 327 }) 328 } 329} 330``` 331 332 333 334
