1# panel 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9> **说明：** 10> 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12可滑动面板，提供一种轻量的内容展示窗口，在不同尺寸中切换，属于弹出式组件。 13 14 15## 子组件 16 17可以包含子组件。 18 19 20## 属性 21 22除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 23 24| 名称 | 类型 | 默认值 | 必填 | 描述 | 25| ---------- | -------------- | -------- | ---- | ---------------------------------------- | 26| type | string | foldable | 是 | 设置可滑动面板类型，不可动态变更，可选值有：<br/>- minibar：提供minibar和类全屏展示切换效果。<br/>- foldable：内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。<br/>- temporary：内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 | 27| mode | string | full | 否 | 设置初始状态，mode参数可选值为：<br/>- mini：类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。<br/>- half: 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。<br/>- full: 类全屏状态。 | 28| dragbar | boolean | true | 否 | 设置是否存在dragbar，true表示存在，false表示不存在。 | 29| fullheight | <length> | - | 否 | 指定full状态下的高度，默认为屏幕尺寸 - 8px。 | 30| halfheight | <length> | - | 否 | 指定half状态下的高度，默认为屏幕尺寸的一半。 | 31| miniheight | <length> | - | 否 | 指定mini状态下的高度，默认为48px。 | 32 33> **说明：** 34> - 不支持渲染属性，包括for、if和show。 35> 36> - 不支持focusable和disabled属性。 37 38 39## 样式 40 41仅支持如下样式： 42 43| 名称 | 类型 | 默认值 | 必填 | 描述 | 44| ---------------------------------------- | ---------------------------------------- | ------------ | ---- | ---------------------------------------- | 45| padding | <length> | 0 | 否 | 该属性可以有1到4个值：<br/>- 指定一个值时，该值指定四个边的内边距。<br/>- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。<br/>- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。<br/>- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 | 46| padding-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下内边距属性。 | 47| padding-[start\|end] | <length> | 0 | 否 | 设置起始和末端内边距属性。 | 48| margin | <length> | 0 | 否 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。<br/>- 只有一个值时，这个值会被指定给全部的四个边。<br/>- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。<br/>- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。<br/>- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 | 49| margin-[left\|top\|right\|bottom] | <length> | 0 | 否 | 设置左、上、右、下外边距属性。 | 50| margin-[start\|end] | <length> | 0 | 否 | 设置起始和末端外边距属性。 | 51| border | - | 0 | 否 | 使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。 | 52| border-style | string | solid | 否 | 使用简写属性设置所有边框的样式，可选值为：<br/>- dotted：显示为一系列圆点，圆点半径为border-width的一半。<br/>- dashed：显示为一系列短的方形虚线。<br/>- solid：显示为一条实线。 | 53| border-[left\|top\|right\|bottom]-style | string | solid | 否 | 分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。 | 54| border-[left\|top\|right\|bottom] | - | - | 否 | 使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。 | 55| border-width | <length> | 0 | 否 | 使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。 | 56| border-[left\|top\|right\|bottom]-width | <length> | 0 | 否 | 分别设置左、上、右、下四个边框的宽度。 | 57| border-color | <color> | black | 否 | 使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。 | 58| border-[left\|top\|right\|bottom]-color | <color> | black | 否 | 分别设置左、上、右、下四个边框的颜色。 | 59| border-radius | <length> | - | 否 | border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width，border-[left\|top\|right\|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。 | 60| border-[top\|bottom]-[left\|right]-radius | <length> | - | 否 | 分别设置左上，右上，右下和左下四个角的圆角半径。 | 61| background | <linear-gradient> | - | 否 | 仅支持设置[渐变样式](js-components-common-gradient.md)，与background-color、background-image不兼容。 | 62| background-color | <color> | - | 否 | 设置背景颜色。 | 63| background-image | string | - | 否 | 设置背景图片。与background-color、background不兼容；支持本地图片资源地址。 | 64| background-size | - string<br/>- <length> <length><br/>- <percentage> <percentage> | auto | 否 | 设置背景图片的大小。<br/>- string可选值：<br/> - contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。<br/> - cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。<br/> - auto：保持原图的比例不变。<br/>- length值参数方式：<br/> 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。<br/>- 百分比参数方式：<br/> 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 | 65| background-repeat | string | repeat | 否 | 针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。<br/>- repeat：在水平轴和竖直轴上同时重复绘制图片。<br/>- repeat-x：只在水平轴上重复绘制图片。<br/>- repeat-y：只在竖直轴上重复绘制图片。<br/>- no-repeat：不会重复绘制图片。 | 66| background-position | - string string<br/>- <length> <length><br/>- <percentage> <percentage> | 0px 0px | 否 | - 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。<br/> - left：水平方向上最左侧。<br/> - right：水平方向上最右侧。<br/> - top：竖直方向上最顶部。<br/> - bottom：竖直方向上最底部。<br/> - center：水平方向或竖直方向上中间位置。<br/>- length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。<br/>- 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。<br/>- 可以混合使用<percentage>和<length> | 67| opacity | number | 1 | 否 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 | 68 69 70## 事件 71 72仅支持如下事件： 73 74| 名称 | 参数 | 描述 | 75| ---------- | ---------------------------------------- | ---------------------------------------- | 76| sizechange | { size: { height: heightLength, width: widthLength }, mode: modeStr } | 当可滑动面板发生状态变化时触发，mode参数可选值为：<br/>- mini：类型为minibar和foldable时，处于最小状态；<br/>- half: 类型为foldable时，处于类半屏状态；<br/>- full: 类全屏状态。<br/>返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 | 77 78 79## 方法 80 81仅支持如下方法： 82 83| 名称 | 参数 | 描述 | 84| ----- | ---- | ------------- | 85| show | - | 弹出panel可滑动面板。 | 86| close | - | 关闭panel可滑动面板。 | 87 88 89## 示例 90 91```html 92<!-- xxx.hml --> 93<div class="doc-page"> 94 <div class="btn-div"> 95 <button type="capsule" value="Click here" onclick="showPanel"></button> 96 </div> 97 <panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px"> 98 <div class="panel-div"> 99 <div class="inner-txt"> 100 <text class="txt">Simple panel in {{ modeFlag }} mode</text> 101 </div> 102 <div class="inner-btn"> 103 <button type="capsule" value="Close" onclick="closePanel"></button> 104 </div> 105 </div> 106 </panel> 107</div> 108``` 109 110```css 111/* xxx.css */ 112.doc-page { 113 flex-direction: column; 114 justify-content: center; 115 align-items: center; 116} 117 118.btn-div { 119 width: 100%; 120 height: 200px; 121 flex-direction: column; 122 align-items: center; 123 justify-content: center; 124} 125 126.txt { 127 color: #000000; 128 font-weight: bold; 129 font-size: 39px; 130} 131 132.panel-div { 133 width: 100%; 134 flex-direction: column; 135 align-items: center; 136} 137 138.inner-txt { 139 width: 100%; 140 height: 160px; 141 flex-direction: column; 142 align-items: center; 143 justify-content: center; 144} 145 146.inner-btn { 147 width: 100%; 148 height: 120px; 149 justify-content: center; 150 align-items: center; 151} 152``` 153 154```js 155// xxx.js 156export default { 157 data: { 158 modeFlag: "half" 159 }, 160 showPanel() { 161 this.$element('simplepanel').show() 162 }, 163 closePanel() { 164 this.$element('simplepanel').close() 165 }, 166 changeMode(e) { 167 this.modeFlag = e.mode 168 } 169} 170``` 171 172 173
