# panel > phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+ > 说明 > > 从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 可滑动面板，提供一种轻量的内容展示窗口，在不同尺寸中切换，属于弹出式组件。 ## 子组件 可以包含子组件。 ## 属性 除支持[通用属性](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-common-attributes)外，还支持如下属性： |名称|类型|默认值|必填|描述| |:---------|:-------|:-------|:-|:---------------------------------------------------------------------------------------------------------------------------------------------------| |type|string|foldable|是|设置可滑动面板类型，不可动态变更，可选值有： - minibar：提供minibar和类全屏展示切换效果。 - foldable：内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 - temporary：内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。| |mode|string|full|否|设置初始状态，mode参数可选值为： - mini：类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。 - half: 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 - full: 类全屏状态。| |dragbar|boolean|true|否|设置是否存在dragbar，true表示存在，false表示不存在。| |fullheight||-|否|指定full状态下的高度，默认为屏幕尺寸 - 8px。| |halfheight||-|否|指定half状态下的高度，默认为屏幕尺寸的一半。| |miniheight||-|否|指定mini状态下的高度，默认为48px。| > 说明 > > * 不支持渲染属性，包括for、if和show。 > > * 不支持focusable和disabled属性。 ## 样式 仅支持如下样式： |名称|类型|默认值|必填|描述| |:--------------------------------------|:--------------------------------------------------------------|:------|:-|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |padding||0|否|该属性可以有1到4个值： - 指定一个值时，该值指定四个边的内边距。 - 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。 - 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。 - 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。| |padding-[left|top|right|bottom]||0|否|设置左、上、右、下内边距属性。| |padding-[start|end]||0|否|设置起始和末端内边距属性。| |margin||0|否|使用简写属性设置所有的外边距属性，该属性可以有1到4个值。 - 只有一个值时，这个值会被指定给全部的四个边。 - 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。 - 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。 - 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。| |margin-[left|top|right|bottom]||0|否|设置左、上、右、下外边距属性。| |margin-[start|end]||0|否|设置起始和末端外边距属性。| |border|-|0|否|使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。| |border-style|string|solid|否|使用简写属性设置所有边框的样式，可选值为： - dotted：显示为一系列圆点，圆点半径为border-width的一半。 - dashed：显示为一系列短的方形虚线。 - solid：显示为一条实线。| |border-[left|top|right|bottom]-style|string|solid|否|分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。| |border-[left|top|right|bottom]|-|-|否|使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。| |border-width||0|否|使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。| |border-[left|top|right|bottom]-width||0|否|分别设置左、上、右、下四个边框的宽度。| |border-color||black|否|使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。| |border-[left|top|right|bottom]-color||black|否|分别设置左、上、右、下四个边框的颜色。| |border-radius||-|否|border-radius属性是设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left|top|right|bottom]-width，border-[left|top|right|bottom]-color ，如果要设置color和width，需要将四个方向一起设置（border-width、border-color）。| |border-[top|bottom]-[left|right]-radius||-|否|分别设置左上，右上，右下和左下四个角的圆角半径。| |background||-|否|仅支持设置[渐变样式](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-common-gradient)，与background-color、background-image不兼容。| |background-color||-|否|设置背景颜色。| |background-image|string|-|否|设置背景图片。与background-color、background不兼容；支持本地图片资源地址。| |background-size|- string - - |auto|否|设置背景图片的大小。 - string可选值： - contain：把图像扩展至最大尺寸，以使其高度和宽度完全适应内容区域。 - cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。 - auto：保持原图的比例不变。 - length值参数方式： 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 - 百分比参数方式： 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。| |background-repeat|string|repeat|否|针对重复背景图像样式进行设置，背景图像默认在水平和垂直方向上重复。 - repeat：在水平轴和竖直轴上同时重复绘制图片。 - repeat-x：只在水平轴上重复绘制图片。 - repeat-y：只在竖直轴上重复绘制图片。 - no-repeat：不会重复绘制图片。| |background-position|- string string - - |0px 0px|否|- 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。 - left：水平方向上最左侧。 - right：水平方向上最右侧。 - top：竖直方向上最顶部。 - bottom：竖直方向上最底部。 - center：水平方向或竖直方向上中间位置。 - length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。 - 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。 - 可以混合使用和| |opacity|number|1|否|元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。| ## 事件 仅支持如下事件： |名称|参数|描述| |:---------|:--------------------------------------------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |sizechange|{ size: { height: heightLength, width: widthLength }, mode: modeStr }|当可滑动面板发生状态变化时触发，mode参数可选值为： - mini：类型为minibar和foldable时，处于最小状态； - half: 类型为foldable时，处于类半屏状态； - full: 类全屏状态。 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。| ## 方法 仅支持如下方法： |名称|参数|描述| |:----|:-|:------------| |show|-|弹出panel可滑动面板。| |close|-|关闭panel可滑动面板。| ## 示例 ```html
Simple panel in {{ modeFlag }} mode
``` ```css /* 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; } ``` ```js // xxx.js export default { data: { modeFlag: "half" }, showPanel() { this.$element('simplepanel').show() }, closePanel() { this.$element('simplepanel').close() }, changeMode(e) { this.modeFlag = e.mode } } ``` ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/51/v3/hofj0z5qRpqKl6O5jJHoPA/zh-cn_image_0000002757232875.gif?HW-CC-KV=V1&HW-CC-Date=20260915T034240Z&HW-CC-Expire=31536000000&HW-CC-Sign=97092AA19D5E17273CB5738D3882531BDA6D073B780DC4AD91F41C7D18DA03C3)