Feature/capsules (#183)

* feat: 胶囊组件
vusion · Oct 27, 2023 · cec9eef · cec9eef
1 parent 36dcae1
commit cec9eef
Show file tree

Hide file tree

Showing 26 changed files with 1,003 additions and 414 deletions.
diff --git a/scripts/genThemeConfig/property.json b/scripts/genThemeConfig/property.json
@@ -478,5 +478,25 @@
     "--van-toast-font-size": "14px",
     "--van-toast-text-color": "#fff",
     "--van-toast-background-color": "rgba(0, 0, 0, 0.7)",
-    "--van-toast-custom-icon-color": "white"
+    "--van-toast-custom-icon-color": "white",
+    "--van-capsules-item-font-size": "12px",
+    "--van-capsules-item-padding": "4px 20px",
+    "--van-capsules-item-border-color": "#e5e5e5",
+    "--van-capsules-item-background": "#fff",
+    "--van-capsules-item-color": "#333",
+    "--van-capsules-border-radius": "4px",
+    "--van-capsules-item-active-border-color": "#337eff",
+    "--van-capsules-item-active-background": "#337eff",
+    "--van-capsules-item-active-color": "#fff",
+    "--van-capsules-item-disabled-border-color": "#337eff",
+    "--van-capsules-item-disabled-background": "#f5f5f5",
+    "--van-capsules-item-disabled-color": "#aaa",
+    "--van-capsules-item-active-disabled-border-color": "#bbd4ff",
+    "--van-capsules-item-active-disabled-background": "#bbd4ff",
+    "--van-capsules-item-active-disabled-color": "#fff",
+    "--van-capsules-item-label-font-size": "10px",
+    "--van-capsules-item-label-background": "#f24957",
+    "--van-capsules-item-label-color": "#fff",
+    "--van-capsules-item-label-max-width": "100%",
+    "--van-capsules-item-flag-color": "#f24957"
 }
diff --git a/scripts/genThemeConfig/result.json b/scripts/genThemeConfig/result.json
@@ -2124,6 +2124,136 @@
                         "desc": "弹出消息的自定义图标颜色"
                     }
                 }
+            },
+            {
+                "id": "4fcd4dfd-683b-4d7e-9211f-gv9sdf08e0899nbnanb112eeeea5",
+                "name": "van-capsules",
+                "title": "胶囊",
+                "toPosition": "capsules",
+                "type": [],
+                "preview": {
+                    "template": "<van-capsules>\n        <van-capsules-item value=\"1\" disabled>胶囊项</van-capsules-item>\n        <van-capsules-item value=\"2\" flag>胶囊项</van-capsules-item>\n        <van-capsules-item value=\"3\" label=\"label\">胶囊项</van-capsules-item>\n      </van-capsules>"
+                },
+                "cssProperty": {
+                    "--van-capsules-item-font-size": {
+                        "type": "input",
+                        "desc": "胶囊字体大小",
+                        "prefix": "van-capsules-item",
+                        "group": "通用"
+                    },
+                    "--van-capsules-item-padding": {
+                        "type": "input",
+                        "desc": "胶囊内边距",
+                        "prefix": "van-capsules-item",
+                        "group": "通用"
+                    },
+                    "--van-capsules-item-border-color": {
+                        "type": "color",
+                        "desc": "胶囊边框颜色",
+                        "prefix": "van-capsules-item",
+                        "group": "通用"
+                    },
+                    "--van-capsules-item-background": {
+                        "type": "color",
+                        "desc": "胶囊背景色",
+                        "prefix": "van-capsules-item",
+                        "group": "通用"
+                    },
+                    "--van-capsules-item-color": {
+                        "type": "color",
+                        "desc": "胶囊字体颜色",
+                        "prefix": "van-capsules-item",
+                        "group": "通用"
+                    },
+                    "--van-capsules-border-radius": {
+                        "type": "input",
+                        "desc": "胶囊圆角",
+                        "group": "通用"
+                    },
+                    "--van-capsules-item-active-border-color": {
+                        "type": "color",
+                        "desc": "胶囊选中时边框颜色",
+                        "prefix": "van-capsules-item",
+                        "group": "选中"
+                    },
+                    "--van-capsules-item-active-background": {
+                        "type": "color",
+                        "desc": "胶囊选中时背景色",
+                        "prefix": "van-capsules-item",
+                        "group": "选中"
+                    },
+                    "--van-capsules-item-active-color": {
+                        "type": "color",
+                        "desc": "胶囊选中时字体颜色",
+                        "prefix": "van-capsules-item",
+                        "group": "选中"
+                    },
+                    "--van-capsules-item-disabled-border-color": {
+                        "type": "color",
+                        "desc": "胶囊禁用时边框颜色",
+                        "prefix": "van-capsules-item",
+                        "group": "禁用"
+                    },
+                    "--van-capsules-item-disabled-background": {
+                        "type": "color",
+                        "desc": "胶囊禁用时背景色",
+                        "prefix": "van-capsules-item",
+                        "group": "禁用"
+                    },
+                    "--van-capsules-item-disabled-color": {
+                        "type": "color",
+                        "desc": "胶囊禁用时字体颜色",
+                        "prefix": "van-capsules-item",
+                        "group": "禁用"
+                    },
+                    "--van-capsules-item-active-disabled-border-color": {
+                        "type": "color",
+                        "desc": "胶囊选中时的禁用边框颜色",
+                        "prefix": "van-capsules-item",
+                        "group": "选中时禁用"
+                    },
+                    "--van-capsules-item-active-disabled-background": {
+                        "type": "color",
+                        "desc": "胶囊选中时的禁用背景色",
+                        "prefix": "van-capsules-item",
+                        "group": "选中时禁用"
+                    },
+                    "--van-capsules-item-active-disabled-color": {
+                        "type": "color",
+                        "desc": "胶囊选中时的禁用字体颜色",
+                        "prefix": "van-capsules-item",
+                        "group": "选中时禁用"
+                    },
+                    "--van-capsules-item-label-font-size": {
+                        "type": "input",
+                        "desc": "胶囊标签字体大小",
+                        "prefix": "van-capsules-item",
+                        "group": "标签"
+                    },
+                    "--van-capsules-item-label-background": {
+                        "type": "color",
+                        "desc": "胶囊标签背景色",
+                        "prefix": "van-capsules-item",
+                        "group": "标签"
+                    },
+                    "--van-capsules-item-label-color": {
+                        "type": "color",
+                        "desc": "胶囊标签字体颜色",
+                        "prefix": "van-capsules-item",
+                        "group": "标签"
+                    },
+                    "--van-capsules-item-label-max-width": {
+                        "type": "input",
+                        "desc": "胶囊标签最大宽度",
+                        "prefix": "van-capsules-item",
+                        "group": "标签"
+                    },
+                    "--van-capsules-item-flag-color": {
+                        "type": "color",
+                        "desc": "胶囊flag颜色",
+                        "prefix": "van-capsules-item"
+                    }
+                }
             }
         ]
     },