popup
The <popup> component is used to display a pop-up to instruct user operations after a user clicks a bound control.
Permission List
None
Child Component
All child components are supported. Each <popup> can have only one child component5+.
Attribute
Event
Style
Color configuration of the mask layer. By default, the mask layer is completely transparent. |
||||
|
If this attribute is not set, the width required for the element content is used. |
||||
|
If this length attribute is not set, the length required for the element content is used. |
||||
Shorthand attribute to set all padding attributes. The attribute can have one to four values:
|
||||
Shorthand attribute to set margins for all sides in a declaration. The attribute can have one to four values:
|
||||
Shorthand attribute to set all borders. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. |
||||
Shorthand attribute to set the style for all borders. Available values are as follows: |
||||
Styles of the left, top, right, and bottom borders. The available values are dotted, dashed, and solid. |
||||
Shorthand attribute to set the borders for every side respectively. You can set border-width, border-style, and border-color in sequence. Default values are used for attributes that are not set. |
||||
Shorthand attribute to set the width of all borders, or separately set the width of each border. |
||||
Attribute to set widths of left, top, right, and bottom borders. |
||||
Shorthand attribute to set the color of all borders, or separately set the color of each border. |
||||
Attribute to set colors of left, top, right, and bottom borders. |
||||
Attribute to set the radius of round borders of an element. This attribute cannot be used to set the width, color, or style of a specific border. To set the width or color, you need to set border-width, border-color, or border-style for all the borders at the same time. |
||||
Attribute to receptively set the radii of upper-left, upper-right, lower-right, and lower-left rounded corners |
||||
This attribute supports Gradient Styles only but is not compatible with background-color or background-image. |
||||
Background image. Currently, this attribute is not compatible with background-color or background. Local image resources are supported. |
||||
|
|
|||
How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically. |
||||
|
|
|||
Transparency of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent. |
||||
How and whether to display the box containing an element. Available values are as follows: |
||||
Whether to display an element. Invisible borders occupy layout space. (To remove the borders, set the display attribute to none.) Available values are as follows: |
Method
NOTE:
- Attributes and styles of a <popup> component cannot be dynamically updated.
- Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only margin-top takes effect; if the pop-up displays on the upper left of the target element, only margin-bottom and margin-right take effect.
- Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is 0, the first configured border style (in the sequence of left, top, right, and bottom) takes effect. Otherwise, the border attribute does not take effect.
- The click event bound to the target element of a pop-up does not take effect.
Example Code
<!-- xxx.hml -->
<div class="container">
<text id="text">Click to show the pop-up</text>
<!-- popup supports single child of any type5+ -->
<popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true" arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup">
<text class="text">Text content of the pop-up</text>
</popup>
<button class="button" onclick="showpopup">Click to show the pop-up</button>
</div>
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
padding: 200px;
}
.popup {
mask-color: gray;
}
.text {
color: white;
}
.button {
width: 220px;
height: 70px;
margin-top: 50px;
}
// xxx.js
import prompt from '@system.prompt'
export default {
visibilitychange(e) {
prompt.showToast({
message: 'visibility change visibility: ' + e.visibility,
duration: 3000,
});
},
showpopup() {
this.$element("popup").show();
},
hidepopup() {
this.$element("popup").hide();
},
}
