feat(badge): support to set border

varletjs · Sep 11, 2023 · 3da6054 · 3da6054
1 parent c640f5d
commit 3da6054
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/packages/varlet-ui/src/badge/badge.less b/packages/varlet-ui/src/badge/badge.less
@@ -1,5 +1,6 @@
 :root {
   --badge-content-padding: 2px 6px;
+  --badge-content-border: none;
   --badge-icon-size: 12px;
   --badge-default-color: #e0e0e0;
   --badge-primary-color: var(--color-primary);
@@ -16,12 +17,12 @@
 
   &__content {
     color: #fff;
-    border-radius: 100px;
     font-size: 12px;
     padding: 2px 6px;
     vertical-align: middle;
     text-align: center;
     display: inline-block;
+    border: var(--badge-content-border);
   }
 
   &__icon[var-badge-cover] {

diff --git a/packages/varlet-ui/src/badge/docs/en-US.md b/packages/varlet-ui/src/badge/docs/en-US.md
@@ -167,6 +167,7 @@ Here are the CSS variables used by the component, Styles can be customized using
 | Variable | Default |
 | --- | --- |
 | `--badge-content-padding` | `2px 6px` |
+| `--badge-content-border`| `none` |
 | `--badge-icon-size` | `12px` |
 | `--badge-default-color` | `#e0e0e0` |
 | `--badge-primary-color` | `var(--color-primary)`|

diff --git a/packages/varlet-ui/src/badge/docs/zh-CN.md b/packages/varlet-ui/src/badge/docs/zh-CN.md
@@ -169,6 +169,7 @@ function handleChange() {
 | 变量名 | 默认值 |
 | --- | --- |
 | `--badge-content-padding` | `2px 6px` |
+| `--badge-content-border`| `none` |
 | `--badge-icon-size` | `12px` |
 | `--badge-default-color` | `#e0e0e0` |
 | `--badge-primary-color` | `var(--color-primary)`|