HarmonyOS Update and modification instructions of application development documents ：dialog Component supplement sample code and sample renderings , It is convenient for developers to master the usage of the component
Custom pop up container .
Support devices
<>
surface 1 Component device support
Zhihuiping
Smart wear
support
support
Permission list
<>
nothing
Subcomponents
<>
Support single subcomponent .
attribute
<>
name
type
Default value
Required
describe
id
string
-
no
Unique identification of the component .
style
string
-
no
Style declaration of component .
class
string
-
no
The style class of the component , Used to reference style sheets .
ref
string
-
no
Use to specify reference information to a child element or component , The reference is registered with the parent component's $refs Property object .
disabled
boolean
false
no
Is the current component disabled , In the disabled scenario , The component will not be able to respond to user interaction .
data
string
-
no
Set the current component data attribute , Corresponding data storage and reading .
event
<>
name
parameter
describe
cancel
-
Users click non dialog Area triggers the event triggered when the pop-up window is cancelled .
style
<>
The following styles are supported ：
name
type
Default value
Required
describe
width
<length> | <percentage>
-
no
Sets the width of the component itself .
The default width of pop-up window is used when it is not set .
height
<length> | <percentage>
-
no
Set the height of the component itself
The default height of pop-up window is used when it is not set .
margin
<length>
0
no
Use the shorthand property to set all outer margin properties , This property can have 1 reach 4 Values .
*
<> When there is only one value , This value is assigned to all four sides .
*
<> Two values , The first value is matched to the top and bottom , The second value is matched to the left and right .
*
<> Three values , The first value is matched to the previous value , The second value is matched to the left and right , The third value is matched to the next value .
*
<> Four values , They will press up in turn , right , lower , Left order matching ( That is, clockwise sequence ).
margin-[left|top|right|bottom]
<length>
0
no
Set left , upper , right , Lower outer margin attribute .
method
<>
The following methods are supported .
name
parameter
describe
show
-
Pop up dialog box
close
-
close dialog boxes
explain
dialog attribute , Styles do not support dynamic update .
Examples
<!-- xxx.hml --> <div class="doc-page"> <div class="btn-div"> <button
type="capsule" value="Click here" class="btn" onclick="showDialog"></button>
</div> <dialog id="simpledialog" class="dialog-main" oncancel="cancelDialog">
<div class="dialog-div"> <div class="inner-txt"> <text class="txt">Simple
dialog</text> </div> <div class="inner-btn"> <button type="capsule"
value="Cancel" onclick="cancelSchedule" class="btn-txt"></button> <button
type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div> </div> </dialog> </div> /* xxx.css */ .doc-page { flex-direction:
column; } .btn-div { width: 100%; height: 200px; flex-direction: column;
align-items: center; justify-content: center; } .btn { background-color:
#a9a9a9; } .txt { color: #000000; font-weight: bold; font-size: 39px; }
.dialog-main { width: 500px; } .dialog-div { flex-direction: column;
align-items: center; } .inner-txt { width: 400px; height: 160px;
flex-direction: column; align-items: center; justify-content: space-around; }
.inner-btn { width: 400px; height: 120px; justify-content: space-around;
align-items: center; } .btn-txt { text-color: #1e90ff; } // xxx.js import
prompt from '@system.prompt'; export default { showDialog(e) {
this.$element('simpledialog').show() }, cancelDialog(e) { prompt.showToast({
message: 'Dialog cancelled' }) }, cancelSchedule(e) {
this.$element('simpledialog').close() prompt.showToast({ message: 'Successfully
cancelled' }) }, setSchedule(e) { this.$element('simpledialog').close()
prompt.showToast({ message: 'Successfully confirmed' }) } }
Technology