代码拉取完成，页面将自动刷新
同步操作将从 OpenHarmony/docs 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
The <panel> component is a slidable panel. It provides a lightweight content display window with flexible sizes. The <panel> component pops up when it is displayed.
NOTE: This component is supported since API version 5.
None
Yes
|
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 or color of a specific border. To set the width or color, you need to set border-width or border-color 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. Both Internet and local image resources are supported. |
||||
|
|
|||
|
Repeating attribute of a background image. 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. |
|
{ size: { height: heightLength, width: widthLength }, mode: modeStr } |
Triggered when the status of the slidable panel changes. Available mode values are as follows: |
<!-- xxx.hml -->
<div class="doc-page">
<div class="btn-div">
<button type="capsule" value="Click here" onclick="showPanel"></button>
</div>
<panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Close" onclick="closePanel"></button>
</div>
</div>
</panel>
</div>
/* xxx.css */
.doc-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn-div {
width: 100%;
height: 200px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.txt {
color: #000000;
font-weight: bold;
font-size: 39px;
}
.panel-div {
width: 100%;
flex-direction: column;
align-items: center;
}
.inner-txt {
width: 100%;
height: 160px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.inner-btn {
width: 100%;
height: 120px;
justify-content: center;
align-items: center;
}
// xxx.js
export default {
data: {
modeFlag: "half"
},
showPanel(e) {
this.$element('simplepanel').show()
},
closePanel(e) {
this.$element('simplepanel').close()
},
changeMode(e) {
this.modeFlag = e.mode
}
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
