feat(ui/divider): add dashed divider

varletjs · Jun 9, 2021 · 9c6724e · 9c6724e
1 parent e01d452
commit 9c6724e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/packages/varlet-ui/src/divider/Divider.vue b/packages/varlet-ui/src/divider/Divider.vue
@@ -5,6 +5,7 @@
       vertical ? 'var-divider--vertical' : null,
       withText ? 'var-divider--with-text' : null,
       isInset ? 'var-divider--inset' : null,
+      dashed ? 'var-divider--dashed' : null,
     ]"
     :style="style"
   >

diff --git a/packages/varlet-ui/src/divider/divider.less b/packages/varlet-ui/src/divider/divider.less
@@ -7,19 +7,22 @@
 @divider-vertical-inset: 8px;
 
 .var-divider {
+  position: relative;
   width: 100%;
-  height: 1px;
+  height: 0;
+  border: none;
+  border-top: 1px solid @divider-color;
   margin: @divider-text-margin 0;
-  background-color: @divider-color;
-  position: relative;
   font-size: @font-size-md;
   color: #888;
 
   &--vertical {
-    width: 1px;
+    width: 0;
     height: 80%;
     margin: auto @divider-text-margin;
     padding: @divider-text-margin 0;
+    border-top: none;
+    border-left: 1px solid @divider-color;
   }
 
   &--inset {
@@ -28,7 +31,7 @@
   }
 
   &--vertical&--inset {
-    width: 1px;
+    width: 0;
     left: unset;
     height: calc(80% - @divider-vertical-inset);
   }
@@ -44,15 +47,24 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    border: none;
 
     &::before,
     &::after {
       display: inline-block;
       content: '';
-      position: relative;
       flex: 1;
-      height: 1px;
-      background-color: @divider-color;
+      height: 0;
+      border-top: 1px solid @divider-color;
     }
   }
+
+  &--dashed {
+    border-top-style: dashed;
+  }
+
+  &--dashed&--vertical {
+    border-top: none;
+    border-left-style: dashed;
+  }
 }
diff --git a/packages/varlet-ui/src/divider/props.ts b/packages/varlet-ui/src/divider/props.ts
@@ -13,4 +13,8 @@ export const props = {
   margin: {
     type: String,
   },
+  dashed: {
+    type: Boolean,
+    default: false,
+  },
 }