feat(module:divider): add nzVariant option (#8827)

NG-ZORRO · Nov 20, 2024 · 2c63c87 · 2c63c87
1 parent 1406241
commit 2c63c87
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 15 deletions.
diff --git a/components/divider/demo/variant.md b/components/divider/demo/variant.md
@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 变体
+  en-US: Variant
+---
+
+## zh-CN
+
+分隔线默认为 `solid`（实线）变体。您可以将其更改为 `dashed`（虚线）或 `dotted`（点线）。
+
+## en-US
+
+Divider is of `solid` variant by default. You can change that to either `dashed` or `dotted`.
diff --git a/components/divider/demo/variant.ts b/components/divider/demo/variant.ts
@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+
+@Component({
+  selector: 'nz-demo-divider-variant',
+  standalone: true,
+  imports: [NzDividerModule],
+  template: `
+    <div>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
+        sunt a te dicta? Refert tamen, quo modo.
+      </p>
+      <nz-divider nzPlain nzText="Solid" nzVariant="solid"></nz-divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
+        sunt a te dicta? Refert tamen, quo modo.
+      </p>
+      <nz-divider nzPlain nzText="Dotted" nzVariant="dotted"></nz-divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
+        sunt a te dicta? Refert tamen, quo modo.
+      </p>
+      <nz-divider nzPlain nzText="Dashed" nzVariant="dashed"></nz-divider>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae
+        sunt a te dicta? Refert tamen, quo modo.
+      </p>
+    </div>
+  `,
+  styles: [
+    `
+      nz-divider::after,
+      nz-divider::before {
+        border-color: #7cb305 !important;
+      }
+    `
+  ]
+})
+export class NzDemoDividerVariantComponent {}
diff --git a/components/divider/divider.component.ts b/components/divider/divider.component.ts
@@ -36,7 +36,8 @@ import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
     '[class.ant-divider-with-text-left]': `nzText && nzOrientation === 'left'`,
     '[class.ant-divider-with-text-right]': `nzText && nzOrientation === 'right'`,
     '[class.ant-divider-with-text-center]': `nzText && nzOrientation === 'center'`,
-    '[class.ant-divider-dashed]': `nzDashed`
+    '[class.ant-divider-dashed]': `nzDashed || nzVariant === 'dashed'`,
+    '[class.ant-divider-dotted]': `nzVariant === 'dotted'`
   },
   imports: [NzOutletModule],
   standalone: true
@@ -45,6 +46,7 @@ export class NzDividerComponent {
   @Input() nzText?: string | TemplateRef<void>;
   @Input() nzType: 'horizontal' | 'vertical' = 'horizontal';
   @Input() nzOrientation: 'left' | 'right' | 'center' = 'center';
+  @Input() nzVariant: 'dashed' | 'dotted' | 'solid' = 'solid';
   @Input({ transform: booleanAttribute }) nzDashed = false;
   @Input({ transform: booleanAttribute }) nzPlain = false;
 

diff --git a/components/divider/divider.spec.ts b/components/divider/divider.spec.ts
@@ -72,6 +72,20 @@ describe('divider', () => {
       });
     });
   });
+
+  describe('#nzVariant', () => {
+    (['dashed', 'dotted'] as const).forEach(type => {
+      it(`with ${type}`, () => {
+        context.comp.nzVariant = type;
+        fixture.detectChanges();
+        expect(dl.query(By.css(`.ant-divider-${type}`)) != null).toBe(true);
+      });
+    });
+
+    it('should have solid as default value for nzVariant', () => {
+      expect(context.comp.nzVariant).toEqual('solid');
+    });
+  });
 });
 
 @Component({

diff --git a/components/divider/doc/index.en-US.md b/components/divider/doc/index.en-US.md
@@ -20,10 +20,11 @@ import { NzDividerModule } from 'ng-zorro-antd/divider';
 
 ### nz-divider:standalone
 
-| Property          | Description                      | Type                            | Default        |
-| ----------------- | -------------------------------- | ------------------------------- | -------------- |
-| `[nzDashed]`      | whether line is dashed           | `boolean`                       | `false`        |
-| `[nzType]`        | direction type of divider        | `'horizontal' \| 'vertical'`    | `'horizontal'` |
-| `[nzText]`        | inner text of divider            | `string \| TemplateRef<void>`   | -              |
-| `[nzPlain]`       | Divider text show as plain style | `boolean`                       | `false`        |
-| `[nzOrientation]` | inner text orientation           | `'center' \| 'left' \| 'right'` | `'center'`     |
+| Property          | Description                             | Type                              | Default        |
+| ----------------- | --------------------------------------- | --------------------------------- | -------------- |
+| `[nzDashed]`      | whether line is dashed                  | `boolean`                         | `false`        |
+| `[nzType]`        | direction type of divider               | `'horizontal' \| 'vertical'`      | `'horizontal'` |
+| `[nzText]`        | inner text of divider                   | `string \| TemplateRef<void>`     | -              |
+| `[nzPlain]`       | Divider text show as plain style        | `boolean`                         | `false`        |
+| `[nzOrientation]` | inner text orientation                  | `'center' \| 'left' \| 'right'`   | `'center'`     |
+| `[nzVariant]`     | Whether line is dashed, dotted or solid | `'dashed' \| 'dotted' \| 'solid'` | `'solid'`      |
diff --git a/components/divider/doc/index.zh-CN.md b/components/divider/doc/index.zh-CN.md
@@ -21,10 +21,11 @@ import { NzDividerModule } from 'ng-zorro-antd/divider';
 
 ### nz-divider:standalone
 
-| 参数              | 说明                       | 类型                            | 默认值         |
-| ----------------- | -------------------------- | ------------------------------- | -------------- |
-| `[nzDashed]`      | 是否虚线                   | `boolean`                       | `false`        |
-| `[nzType]`        | 水平还是垂直类型           | `'horizontal' \| 'vertical'`    | `'horizontal'` |
-| `[nzText]`        | 中间文字                   | `string \| TemplateRef<void>`   | -              |
-| `[nzPlain]`       | 文字是否显示为普通正文样式 | `boolean`                       | `false`        |
-| `[nzOrientation]` | 中间文字方向               | `'center' \| 'left' \| 'right'` | `'center'`     |
+| 参数              | 说明                       | 类型                              | 默认值         |
+| ----------------- | -------------------------- | --------------------------------- | -------------- |
+| `[nzDashed]`      | 是否虚线                   | `boolean`                         | `false`        |
+| `[nzType]`        | 水平还是垂直类型           | `'horizontal' \| 'vertical'`      | `'horizontal'` |
+| `[nzText]`        | 中间文字                   | `string \| TemplateRef<void>`     | -              |
+| `[nzPlain]`       | 文字是否显示为普通正文样式 | `boolean`                         | `false`        |
+| `[nzOrientation]` | 中间文字方向               | `'center' \| 'left' \| 'right'`   | `'center'`     |
+| `[nzVariant]`     | 分割线是虚线、点线还是实线 | `'dashed' \| 'dotted' \| 'solid'` | `'solid'`      |
diff --git a/components/divider/style/entry.less b/components/divider/style/entry.less
@@ -1 +1,2 @@
 @import './index.less';
+@import './patch.less';
diff --git a/components/divider/style/patch.less b/components/divider/style/patch.less
@@ -0,0 +1,19 @@
+.@{divider-prefix-cls} {
+  &-dotted {
+    background: none;
+    border-color: @divider-color;
+    border-style: dotted;
+    border-width: @border-width-base 0 0;
+  }
+
+  &-horizontal&-with-text&-dotted {
+    &::after,
+    &::before {
+      border-style: dotted none none;
+    }
+  }
+
+  &-vertical&-dotted {
+    border-width: 0 0 0 @border-width-base;
+  }
+}