diff --git a/packages/banana/src/progress/index.ts b/packages/banana/src/progress/index.ts index a9e19e27..2e3385a4 100644 --- a/packages/banana/src/progress/index.ts +++ b/packages/banana/src/progress/index.ts @@ -20,7 +20,7 @@ export default class BProgress extends LitElement { @property({ reflect: true }) color: string | undefined; - @property({ reflect: true }) + @property({ reflect: true, attribute: 'background-color' }) backgroundColor: string | undefined; @property({ reflect: true, type: Number }) diff --git a/public/Overlay/OverlayBaseUse.html b/public/Overlay/OverlayBaseUse.html new file mode 100644 index 00000000..3e9de0cb --- /dev/null +++ b/public/Overlay/OverlayBaseUse.html @@ -0,0 +1,15 @@ +展开遮罩层 + + + diff --git a/public/Overlay/OverlayWithContent.html b/public/Overlay/OverlayWithContent.html new file mode 100644 index 00000000..d4205747 --- /dev/null +++ b/public/Overlay/OverlayWithContent.html @@ -0,0 +1,17 @@ +展开遮罩层（带内容） + +
+ + + diff --git a/public/Popup/BasicUsage.html b/public/Popup/BasicUsage.html new file mode 100644 index 00000000..4333e918 --- /dev/null +++ b/public/Popup/BasicUsage.html @@ -0,0 +1,104 @@ +
+ 从顶部弹出 + 从右边弹出 + 从底部弹出 + 从左边弹出 +
+ + +
+
line 1
+
line 2
+
line 3
+
line 4
+
line 5
+
line 6
+
line 7
+
line 8
+
line 9
+
line 10
+
+ + + +
+
line 1
+
line 2
+
line 3
+
line 4
+
line 5
+
line 6
+
line 7
+
line 8
+
line 9
+
line 10
+
+ + + +
+
line 1
+
line 2
+
line 3
+
line 4
+
line 5
+
line 6
+
line 7
+
line 8
+
line 9
+
line 10
+
+ + + +
+
line 1
+
line 2
+
line 3
+
line 4
+
line 5
+
line 6
+
line 7
+
line 8
+
line 9
+
line 10
+
+ + + diff --git a/public/Progress/basicUsage.html b/public/Progress/basicUsage.html new file mode 100644 index 00000000..f6145ea4 --- /dev/null +++ b/public/Progress/basicUsage.html @@ -0,0 +1,4 @@ + + + + diff --git a/public/Progress/customColor.html b/public/Progress/customColor.html new file mode 100644 index 00000000..fd40caf4 --- /dev/null +++ b/public/Progress/customColor.html @@ -0,0 +1,13 @@ +你可以使用 color 参数和 background-color 参数来自定义进度条和背景颜色。 + +当然你也可以实现一个渐变的进度条： + +你还可以使用 css变量 来自定义进度条和背景颜色。 + diff --git a/public/Progress/customHeight.html b/public/Progress/customHeight.html new file mode 100644 index 00000000..55685cf8 --- /dev/null +++ b/public/Progress/customHeight.html @@ -0,0 +1,10 @@ +

你可以使用 height 参数来自定义进度条的高度。

+ +

也可以使用 css变量 来自定义进度条的高度。

+ +

+ 默认情况下，进度条的 border-radius 是高度的一半，也就是说进度条是圆角的。 + 一般来说，你很少需要改变这个值，但是如果你需要的话，你可以使用 css变量 来自定义进度条的 + border-radius 。 +

+ diff --git a/public/Progress/dynamic.html b/public/Progress/dynamic.html new file mode 100644 index 00000000..00c84c46 --- /dev/null +++ b/public/Progress/dynamic.html @@ -0,0 +1,19 @@ +
+ + +10% + Reset +
+ + diff --git a/public/Radio/basicUsage.html b/public/Radio/basicUsage.html new file mode 100644 index 00000000..314d502d --- /dev/null +++ b/public/Radio/basicUsage.html @@ -0,0 +1,4 @@ + + Banana 🍌 + Apple 🍎 + diff --git a/public/Radio/disabled.html b/public/Radio/disabled.html new file mode 100644 index 00000000..17ae2301 --- /dev/null +++ b/public/Radio/disabled.html @@ -0,0 +1,11 @@ + + Banana🍌 + Apple🍎 + Cherry🍒 + + + + Banana🍌 + Apple🍎 + Cherry🍒 + diff --git a/public/Radio/sizes.html b/public/Radio/sizes.html new file mode 100644 index 00000000..f92405e8 --- /dev/null +++ b/public/Radio/sizes.html @@ -0,0 +1,5 @@ + + small + medium (default) + large + diff --git a/public/Radio/vertical.html b/public/Radio/vertical.html new file mode 100644 index 00000000..cfe7e941 --- /dev/null +++ b/public/Radio/vertical.html @@ -0,0 +1,5 @@ + + Banana 🍌 + Apple 🍎 + Cherry 🍒 + diff --git a/public/Rating/basicUsage.html b/public/Rating/basicUsage.html new file mode 100644 index 00000000..e82dd7c0 --- /dev/null +++ b/public/Rating/basicUsage.html @@ -0,0 +1 @@ + diff --git a/public/Rating/character.html b/public/Rating/character.html new file mode 100644 index 00000000..79175cbe --- /dev/null +++ b/public/Rating/character.html @@ -0,0 +1,25 @@ + + + + + diff --git a/public/Rating/disabled.html b/public/Rating/disabled.html new file mode 100644 index 00000000..cb5c2868 --- /dev/null +++ b/public/Rating/disabled.html @@ -0,0 +1 @@ + diff --git a/public/Rating/halfAllowed.html b/public/Rating/halfAllowed.html new file mode 100644 index 00000000..351e21e1 --- /dev/null +++ b/public/Rating/halfAllowed.html @@ -0,0 +1 @@ + diff --git a/public/Rating/precision.html b/public/Rating/precision.html new file mode 100644 index 00000000..5096b9f5 --- /dev/null +++ b/public/Rating/precision.html @@ -0,0 +1,4 @@ +Precision + +Precision & Readonly + diff --git a/public/Rating/readonly.html b/public/Rating/readonly.html new file mode 100644 index 00000000..30aca056 --- /dev/null +++ b/public/Rating/readonly.html @@ -0,0 +1 @@ + diff --git a/public/Select/Clearable.html b/public/Select/Clearable.html new file mode 100644 index 00000000..6bb05ae5 --- /dev/null +++ b/public/Select/Clearable.html @@ -0,0 +1,18 @@ +
+ + 🍎 Apple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🚫 Disabled + + + 🍎 Apple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🚫 Disabled + +
diff --git a/public/Select/Disabled.html b/public/Select/Disabled.html new file mode 100644 index 00000000..ed5a4367 --- /dev/null +++ b/public/Select/Disabled.html @@ -0,0 +1,18 @@ +
+ + 🍎 Apple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🚫 Disabled + + + 🍎 Apple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🚫 Disabled + +
diff --git a/public/Select/Multiple.html b/public/Select/Multiple.html new file mode 100644 index 00000000..ee1ede53 --- /dev/null +++ b/public/Select/Multiple.html @@ -0,0 +1,22 @@ + + 🍎 AppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleApple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🍓 Strawberry + 🍍 Pineapple + 🍒 Cherry + 🚫 Disabled + + diff --git a/public/Select/Size.html b/public/Select/Size.html new file mode 100644 index 00000000..81cd0485 --- /dev/null +++ b/public/Select/Size.html @@ -0,0 +1,26 @@ +
+ + 🍎 Apple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🚫 Disabled + + + 🍎 Apple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🚫 Disabled + + + 🍎 Apple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🚫 Disabled + +
diff --git a/public/Select/basicUsage.html b/public/Select/basicUsage.html new file mode 100644 index 00000000..26230512 --- /dev/null +++ b/public/Select/basicUsage.html @@ -0,0 +1,18 @@ +
+ + 🍎 Apple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🚫 Disabled + + + 🍎 Apple + 🍌 Banana + 🍊 Orange + 🍐 Pear + 🍇 Grape + 🚫 Disabled + +
diff --git a/public/Stepper/basicUsage.html b/public/Stepper/basicUsage.html new file mode 100644 index 00000000..9a0ece53 --- /dev/null +++ b/public/Stepper/basicUsage.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/public/Stepper/inputRange.html b/public/Stepper/inputRange.html new file mode 100644 index 00000000..dce93b01 --- /dev/null +++ b/public/Stepper/inputRange.html @@ -0,0 +1 @@ + diff --git a/public/Stepper/setStepLen.html b/public/Stepper/setStepLen.html new file mode 100644 index 00000000..dd176b87 --- /dev/null +++ b/public/Stepper/setStepLen.html @@ -0,0 +1,24 @@ +
+
+ 增加步长 + 减少步长 +
+ 当前步长: 1 + +
+ + diff --git a/public/Stepper/stepChange.html b/public/Stepper/stepChange.html new file mode 100644 index 00000000..132061d8 --- /dev/null +++ b/public/Stepper/stepChange.html @@ -0,0 +1,13 @@ + + diff --git a/public/Tooltip/backgroundColor.html b/public/Tooltip/backgroundColor.html new file mode 100644 index 00000000..98c4c8c2 --- /dev/null +++ b/public/Tooltip/backgroundColor.html @@ -0,0 +1,24 @@ +你可以通过 background-color 参数设置背景色。 +

+ + maroon + + + #015AE0 + + + rgb(16, 145, 11) + +

+也可以通过css变量来实现这一点 +

+ + marron + + + #015AE0 + + + rgb(16, 145, 11) + +

diff --git a/public/Tooltip/basicUsage.html b/public/Tooltip/basicUsage.html new file mode 100644 index 00000000..2c81e97c --- /dev/null +++ b/public/Tooltip/basicUsage.html @@ -0,0 +1,3 @@ + + Hover me! + diff --git a/public/Tooltip/empty.html b/public/Tooltip/empty.html new file mode 100644 index 00000000..1462cd76 --- /dev/null +++ b/public/Tooltip/empty.html @@ -0,0 +1,16 @@ +Hide + + Hover me! + + + diff --git a/public/Tooltip/maxWidth.html b/public/Tooltip/maxWidth.html new file mode 100644 index 00000000..bc00ccd9 --- /dev/null +++ b/public/Tooltip/maxWidth.html @@ -0,0 +1,13 @@ +你可以通过max-width参数设置最大宽度。 +

+ + Hover me! + + + Hover me! + +

+也可以通过css变量来实现这一点 + + Hover me! + diff --git a/public/Tooltip/noArrow.html b/public/Tooltip/noArrow.html new file mode 100644 index 00000000..68b8853a --- /dev/null +++ b/public/Tooltip/noArrow.html @@ -0,0 +1,3 @@ + + No Arrow + diff --git a/public/Tooltip/placement.html b/public/Tooltip/placement.html new file mode 100644 index 00000000..206f71b4 --- /dev/null +++ b/public/Tooltip/placement.html @@ -0,0 +1,66 @@ + + +
+
+ + TL + + + Top + + + TR + +
+
+ + LT + + + RT + +
+
+ + Left + + + Right + +
+
+ + LB + + + RB + +
+
+ + BL + + + Bottom + + + BR + +
+
diff --git a/public/Tooltip/triggerAction.html b/public/Tooltip/triggerAction.html new file mode 100644 index 00000000..d942e9be --- /dev/null +++ b/public/Tooltip/triggerAction.html @@ -0,0 +1,6 @@ + + Hover + + + Click +