feat(badge): support to set border

varletjs · Sep 11, 2023 · b355149 · b355149
1 parent c640f5d
commit b355149
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
@@ -7,6 +7,7 @@
   --badge-success-color: var(--color-success);
   --badge-warning-color: var(--color-warning);
   --badge-info-color: var(--color-info);
+  --badge-content-border: none;
 }
 
 .var-badge {
@@ -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
@@ -174,3 +174,4 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--badge-success-color` | `var(--color-success)`|
 | `--badge-warning-color` |  `var(--color-warning)`|
 | `--badge-info-color` | `var(--color-info)`|
+| `--badge-content-border`| `none` |
diff --git a/packages/varlet-ui/src/badge/docs/zh-CN.md b/packages/varlet-ui/src/badge/docs/zh-CN.md
@@ -176,3 +176,4 @@ function handleChange() {
 | `--badge-success-color` | `var(--color-success)`|
 | `--badge-warning-color` |  `var(--color-warning)`|
 | `--badge-info-color` | `var(--color-info)`|
+| `--badge-content-border`| `none` |