diff --git a/ace/ace_standard/src/main/config.json b/ace/ace_standard/src/main/config.json
index 8174d6a813c43fd30170c07203648d78d02ca74b..f22db2a0e3bf9f2bd11ecdc59e8cb6955c65dee0 100755
--- a/ace/ace_standard/src/main/config.json
+++ b/ace/ace_standard/src/main/config.json
@@ -57,7 +57,8 @@
"pages/chart/router/index",
"pages/input/index",
"pages/slider/index",
- "pages/text/index",
+ "pages/text/router/index",
+ "pages/text/prop/index",
"pages/divider/router/index",
"pages/image/router/index",
"pages/label/router/index",
@@ -76,7 +77,8 @@
"pages/picker/prop/index",
"pages/pickerView/router/index",
"pages/pickerView/prop/index",
- "pages/piece/index",
+ "pages/piece/router/index",
+ "pages/piece/prop/index",
"pages/progress/router/index",
"pages/progress/prop/index",
"pages/qrcode/index",
@@ -90,12 +92,17 @@
"pages/listItemGroup/index",
"pages/marquee/index",
"pages/imageAnimator/index",
- "pages/panel/index",
- "pages/popup/index",
- "pages/refresh/index",
- "pages/stack/index",
+ "pages/panel/router/index",
+ "pages/panel/prop/index",
+ "pages/popup/router/index",
+ "pages/popup/prop/index",
+ "pages/refresh/router/index",
+ "pages/refresh/prop/index",
+ "pages/stack/router/index",
+ "pages/stack/prop/index",
"pages/stepper/index",
- "pages/swiper/index",
+ "pages/swiper/router/index",
+ "pages/swiper/prop/index",
"pages/tabs/router/index",
"pages/tabs/prop/index",
"pages/tab-bar/router/index",
diff --git a/ace/ace_standard/src/main/js/default/pages/panel/prop/index.css b/ace/ace_standard/src/main/js/default/pages/panel/prop/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e815b366974cb2a04e98ed2dd5b2ba57913ff8c2
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/panel/prop/index.css
@@ -0,0 +1,347 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.prop-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#idProp {
+ flex-weight: 1;
+ background-color:#f00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.classProp {
+ flex-weight: 1;
+ background-color:#0f0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#classPropNone {
+ flex-weight: 1;
+ background-color:#0000e0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refProp {
+ flex-weight: 1;
+ background-color:#00f000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refPropNone {
+ flex-weight: 1;
+ background-color:#00000e;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropTrue {
+ flex-weight: 1;
+ background-color:#000f00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropFalse {
+ flex-weight: 1;
+ background-color:#0000f0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropNone {
+ flex-weight: 1;
+ background-color:#d00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropTrue {
+ flex-weight: 1;
+ background-color:#00000f;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropFalse {
+ flex-weight: 1;
+ background-color:#ff0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropNone {
+ flex-weight: 1;
+ background-color:#0d0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataProp {
+ flex-weight: 1;
+ background-color:#0ff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataPropNone {
+ flex-weight: 1;
+ background-color:#00d000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropSmall {
+ height: 15px;
+ background-color:#00ff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropMedium {
+ height: 15px;
+ background-color:#000ff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropLarge {
+ height: 15px;
+ background-color:#fff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropNone{
+ height: 15px;
+ background-color:#000d00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropRtl {
+ flex-weight: 1;
+ background-color:#0fff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropAuto {
+ flex-weight: 1;
+ background-color:#00fff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropLtr {
+ flex-weight: 1;
+ background-color:#000fff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropNone {
+ flex-weight: 1;
+ background-color:#0000d0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropNull {
+ flex-weight: 1;
+ background-color:#ffff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropOne {
+ flex-weight: 1;
+ background-color:#00e000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropThree {
+ flex-weight: 1;
+ background-color:#000e00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropTrue {
+ flex-weight: 1;
+ background-color:#0ffff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropFalse {
+ flex-weight: 1;
+ background-color:#00ffff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropNone {
+ flex-weight: 1;
+ background-color:#00000d;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropTrue {
+ flex-weight: 1;
+ background-color:#e00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropFalse {
+ flex-weight: 1;
+ background-color:#0e0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropNone {
+ flex-weight: 1;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.specific-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/panel/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/panel/prop/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..746cdc7af4fde2d5dd56c77155f923997c7bca12
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/panel/prop/index.hml
@@ -0,0 +1,137 @@
+
+
+
+ panel通用属性
+
+
+
+ 通用属性 -- id
+
+
+
+
+
+ 通用属性 -- class
+
+
+
+
+
+
+
+
+ 通用属性 -- style
+
+
+
+
+
+ 通用属性 -- ref
+
+
+
+
+
+
+
+ 通用属性 -- data-*
+
+
+
+
+
+
+
+ 通用属性 -- click-effect
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性 -- dir
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ panel特有属性
+
+
+
+ 特有属性 -- type
+
+
+
+
+
+
+
+
+
+ 特有属性 -- mode
+
+
+
+
+
+
+
+
+
+ 特有属性 -- dragbar
+
+
+
+
+
+
+
+ 特有属性 -- fullheight
+
+
+
+
+
+ 特有属性 -- halfheight
+
+
+
+
+
+ 特有属性 -- miniheight
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/panel/prop/index.js b/ace/ace_standard/src/main/js/default/pages/panel/prop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..85ebf580a6619e309c72d71b2257ede3cc016329
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/panel/prop/index.js
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+ data:{
+ listOne:[{}],
+ listThree:[{},{},{}],
+ idProp : null,
+ classProp : null,
+ classPropNone : null,
+ styleProp : null,
+ refProp : null,
+ refPropNone : null,
+ dataProp : null,
+ dataPropNone : null,
+ clickEffectPropSmall : null,
+ clickEffectPropMedium : null,
+ clickEffectPropLarge : null,
+ clickEffectPropNone : null,
+ dirPropRtl : null,
+ dirPropAuto : null,
+ dirPropLtr : null,
+ dirPropNone : null,
+
+ typePropFoldAble : null,
+ typePropMinibar : null,
+ typePropTemporary : null,
+ modePropMini : null,
+ modePropHalf: null,
+ modePropFull: null,
+ dragBarPropTrue: null,
+ dragBarPropFalse: null,
+ fullHeightPro: null,
+ halfHeightPro: null,
+ miniHeightPro: null
+ },
+
+ onShow(){
+ this.getCommonPropValues();
+ globalThis.value = {
+ idProp : this.idProp,
+ classProp : this.classProp,
+ classPropNone : this.classPropNone,
+ styleProp : this.styleProp,
+ refProp : this.refProp,
+ refPropNone : this.refPropNone,
+ dataProp : this.dataProp,
+ dataPropNone : this.dataPropNone,
+ clickEffectPropSmall : this.clickEffectPropSmall,
+ clickEffectPropMedium : this.clickEffectPropMedium,
+ clickEffectPropLarge : this.clickEffectPropLarge,
+ clickEffectPropNone : this.clickEffectPropNone,
+ dirPropRtl : this.dirPropRtl,
+ dirPropAuto : this.dirPropAuto,
+ dirPropLtr : this.dirPropLtr,
+ dirPropNone : this.dirPropNone,
+
+ typePropFoldAble : this.typePropFoldAble,
+ typePropMinibar : this.typePropMinibar,
+ typePropTemporary : this.typePropTemporary,
+ modePropMini : this.modePropMini,
+ modePropHalf : this.modePropHalf,
+ modePropFull : this.modePropFull,
+ dragBarPropTrue : this.dragBarPropTrue,
+ dragBarPropFalse : this.dragBarPropFalse,
+
+ fullHeightPro : this.fullHeightPro,
+ halfHeightPro : this.halfHeightPro,
+ miniHeightPro : this.miniHeightPro,
+
+ }
+ },
+
+ getCommonPropValues(){
+ this.idProp = this.$element("idProp").getInspector()
+ this.classProp = this.$element("classProp").getInspector()
+ this.classPropNone = this.$element("classPropNone").getInspector()
+ this.styleProp = this.$element("styleProp").getInspector()
+ this.refProp = this.$element("refProp").getInspector()
+ this.refPropNone = this.$element("refPropNone").getInspector()
+ this.dataProp = this.$element("dataProp").getInspector()
+ this.dataPropNone = this.$element("dataPropNone").getInspector()
+ this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
+ this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
+ this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
+ this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
+ this.dirPropRtl = this.$element("dirPropRtl").getInspector()
+ this.dirPropAuto = this.$element("dirPropAuto").getInspector()
+ this.dirPropLtr = this.$element("dirPropLtr").getInspector()
+ this.dirPropNone = this.$element("dirPropNone").getInspector()
+
+ this.typePropFoldAble = this.$element("typePropFoldAble").getInspector()
+ this.typePropMinibar = this.$element("typePropMinibar").getInspector()
+ this.typePropTemporary = this.$element("typePropTemporary").getInspector()
+ this.modePropMini = this.$element("modePropMini").getInspector()
+ this.modePropHalf = this.$element("modePropHalf").getInspector()
+ this.modePropFull = this.$element("modePropFull").getInspector()
+ this.dragBarPropTrue = this.$element("dragBarPropTrue").getInspector()
+ this.dragBarPropFalse = this.$element("dragBarPropFalse").getInspector()
+ this.fullHeightPro = this.$element("fullHeightPro").getInspector()
+ this.halfHeightPro = this.$element("halfHeightPro").getInspector()
+ this.miniHeightPro = this.$element("miniHeightPro").getInspector()
+ },
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/panel/index.css b/ace/ace_standard/src/main/js/default/pages/panel/router/index.css
similarity index 100%
rename from ace/ace_standard/src/main/js/default/pages/panel/index.css
rename to ace/ace_standard/src/main/js/default/pages/panel/router/index.css
diff --git a/ace/ace_standard/src/main/js/default/pages/panel/index.hml b/ace/ace_standard/src/main/js/default/pages/panel/router/index.hml
similarity index 99%
rename from ace/ace_standard/src/main/js/default/pages/panel/index.hml
rename to ace/ace_standard/src/main/js/default/pages/panel/router/index.hml
index d9c399afab2ec1f62e47f8767ffd25d9055ead2d..acc614982c320f34d557af3bf5c1fd78ef666e13 100644
--- a/ace/ace_standard/src/main/js/default/pages/panel/index.hml
+++ b/ace/ace_standard/src/main/js/default/pages/panel/router/index.hml
@@ -99,7 +99,8 @@
+ dir ="ltr"
+ id = "prop2">