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
©2020 ioDraw All rights reserved
python gui Interface examples -Python GUI Programming complete example IO flow —— Classification of flow ,InputStream,OutputStream,Reader,Writer etc. Thread.setDaemon Set up the Daemons STM32 RS485 modbus Communication source program , The test is effective stay MATLAB 2018 Time series prediction with deep learning vue3 Write component library and publish to npm The process of Questions and answers for the interviewer : How did you get a project in the project team ??? In the applet form Multiple cycles input How to get each input Value of 2021 Front end high frequency interview questions ( You have to watch it !!!)js Array method