Skip to content

Commit 0254ee2

Browse files
OriginRingOriginRing
authored
feat(module:hash-code): add HashCode component (#8111)
1 parent 1507ed0 commit 0254ee2

30 files changed

+841
-1
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ components/qr-code/** @OriginRing
7171
components/cron-expression/** @OriginRing
7272
components/water-mark/** @OriginRing
7373
components/color-picker/** @OriginRing
74+
components/hash-code/** @OriginRing
7475

7576
# The `components/core/*` owners
7677
components/core/config/** @hullis

‎components/components.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,4 @@
6666
@import './qr-code/style/entry.less';
6767
@import './water-mark/style/entry.less';
6868
@import './color-picker/style/entry.less';
69+
@import './hash-code/style/entry.less';

‎components/hash-code/demo/basic.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 0
3+
title:
4+
zh-CN: 基本
5+
en-US: Basic
6+
---
7+
8+
## zh-CN
9+
10+
最简单的用法。
11+
12+
## en-US
13+
14+
The simplest usage.

‎components/hash-code/demo/basic.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-hash-code-basic',
5+
template: ` <nz-hash-code [nzValue]="value"></nz-hash-code> `
6+
})
7+
export class NzDemoHashCodeBasicComponent {
8+
value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
9+
}

‎components/hash-code/demo/copy.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 1
3+
title:
4+
zh-CN: 复制
5+
en-US: Copy
6+
---
7+
8+
## zh-CN
9+
10+
点击复制的 icon
11+
12+
## en-US
13+
14+
Click on the copied icon.

‎components/hash-code/demo/copy.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-hash-code-copy',
5+
template: ` <nz-hash-code [nzValue]="value" (nzOnCopy)="getCopy($event)"></nz-hash-code> `
6+
})
7+
export class NzDemoHashCodeCopyComponent {
8+
value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
9+
10+
getCopy(value: string): void {
11+
console.log(`hashCode:${value}`);
12+
}
13+
}

‎components/hash-code/demo/logo.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 6
3+
title:
4+
zh-CN: 添加 Logo
5+
en-US: Logo
6+
---
7+
8+
## zh-CN
9+
10+
可设置右上角的标志
11+
12+
## en-US
13+
14+
Possibility to set the logo in the upper right corner.

‎components/hash-code/demo/logo.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-hash-code-logo',
5+
template: ` <nz-hash-code [nzValue]="value" nzLogo="Antd"></nz-hash-code> `
6+
})
7+
export class NzDemoHashCodeLogoComponent {
8+
value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
9+
}

‎components/hash-code/demo/module

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { NzHashCodeModule } from 'ng-zorro-antd/hash-code';
2+
3+
export const moduleList = [NzHashCodeModule];

‎components/hash-code/demo/primary.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 2
3+
title:
4+
zh-CN: 更换样式
5+
en-US: Style
6+
---
7+
8+
## zh-CN
9+
10+
更换样式。
11+
12+
## en-US
13+
14+
Replacement of styles.

‎components/hash-code/demo/primary.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-hash-code-primary',
5+
template: ` <nz-hash-code [nzValue]="value" nzType="primary"></nz-hash-code> `
6+
})
7+
export class NzDemoHashCodePrimaryComponent {
8+
value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
9+
}

‎components/hash-code/demo/rect.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 5
3+
title:
4+
zh-CN: 矩形模式
5+
en-US: Rect
6+
---
7+
8+
## zh-CN
9+
10+
同单行模式一样，不会展示原有的 `icon` 和顶部描述内容
11+
12+
## en-US
13+
14+
As in one-line mode, the original `icon` and top description will not be displayed.

‎components/hash-code/demo/rect.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-hash-code-rect',
5+
template: `
6+
<nz-hash-code [nzValue]="value" nzMode="rect"></nz-hash-code>
7+
<br />
8+
<nz-hash-code [nzValue]="value" nzMode="rect" nzType="primary"></nz-hash-code>
9+
`
10+
})
11+
export class NzDemoHashCodeRectComponent {
12+
value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
13+
}

‎components/hash-code/demo/single.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 3
3+
title:
4+
zh-CN: 单行模式
5+
en-US: Single
6+
---
7+
8+
## zh-CN
9+
10+
在单行模式下，不会展示原有的 `icon` 和顶部描述内容。
11+
12+
## en-US
13+
14+
In single-line mode, the original `icon` and top description are not displayed.

‎components/hash-code/demo/single.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-hash-code-single',
5+
template: `
6+
<nz-hash-code [nzValue]="value" nzMode="single"></nz-hash-code>
7+
<br />
8+
<nz-hash-code [nzValue]="value" nzMode="single" nzType="primary"></nz-hash-code>
9+
`
10+
})
11+
export class NzDemoHashCodeSingleComponent {
12+
value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
13+
}

‎components/hash-code/demo/strip.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 4
3+
title:
4+
zh-CN: 长条模式
5+
en-US: Strip
6+
---
7+
8+
## zh-CN
9+
10+
仅展示一行数据。
11+
12+
## en-US
13+
14+
Show only one row of data.

‎components/hash-code/demo/strip.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-hash-code-strip',
5+
template: `
6+
<nz-hash-code [nzValue]="value" nzMode="strip"></nz-hash-code>
7+
<br />
8+
<nz-hash-code [nzValue]="value" nzMode="strip" nzType="primary"></nz-hash-code>
9+
`
10+
})
11+
export class NzDemoHashCodeStripComponent {
12+
value = 'dfb5fe9ef7b99b2b1db102114a6d7d445d992f40a5d575f801c148990199a068';
13+
}

‎components/hash-code/doc/index.en-US.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
category: Components
3+
type: Featured Components
4+
title: HashCode
5+
tag: New
6+
cover: https://img.alicdn.com/imgextra/i3/O1CN01ePPF8q1cxXFz041Q9_!!6000000003667-0-tps-172-57.jpg
7+
---
8+
9+
## Import Module
10+
11+
- The hash code component is styled for 64-bit design, and if the data given is less than or more than 64-bit, it may bring some differences in presentation.
12+
13+
### Import Module
14+
15+
module:
16+
```ts
17+
import { NzHashCodeModule } from 'ng-zorro-antd/hash-code';
18+
```
19+
standalone:
20+
```ts
21+
import { NzHashCodeComponent } from 'ng-zorro-antd/hash-code';
22+
```
23+
24+
## API
25+
26+
### nz-hashCode:standalone
27+
28+
| Property | Description | Type | Default |
29+
| -------------- |-----------------------------------------------------|-------------------------------------|------------|
30+
| `[nzValue]` | The value of the hash code | `string` | - |
31+
| `[nzTitle]` | Description of the content in the upper left corner | `string` | `HashCode` |
32+
| `[nzLogo]` | Display in the upper right corner | `TemplateRef<void> \| string` | - |
33+
| `[nzMode]` | Demonstration Mode | `single \| double \| strip \| rect` | `double` |
34+
| `[nzType]` | style | `defalut \| primary` | `primary` |
35+
| `(nzOnCopy)` | Clicking the Copy callback | `EventEmitter<string>` | - |

‎components/hash-code/doc/index.zh-CN.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
category: Components
3+
subtitle: 哈希码
4+
type: 特色组件
5+
title: HashCode
6+
tag: New
7+
cover: https://img.alicdn.com/imgextra/i3/O1CN01ePPF8q1cxXFz041Q9_!!6000000003667-0-tps-172-57.jpg
8+
---
9+
10+
## 何时使用
11+
12+
- 哈希码组件是以 64 位设计的样式，如果给出的数据不足或者高于 64 位，可能会带来一些展示上的差异。
13+
14+
### 引入模块
15+
16+
module:
17+
```ts
18+
import { NzHashCodeModule } from 'ng-zorro-antd/hash-code';
19+
```
20+
standalone:
21+
```ts
22+
import { NzHashCodeComponent } from 'ng-zorro-antd/hash-code';
23+
```
24+
25+
## API
26+
27+
### nz-hashCode:standalone
28+
29+
| 参数 | 说明 | 类型 | 默认值 |
30+
| -------------- |-----------|-------------------------------------|------------|
31+
| `[nzValue]` | 哈希码的值 | `string` | - |
32+
| `[nzTitle]` | 左上角的描述内容 | `string` | `HashCode` |
33+
| `[nzLogo]` | 右上角的展示 | `TemplateRef<void> \| string` | - |
34+
| `[nzMode]` | 展示模式 | `single \| double \| strip \| rect` | `double` |
35+
| `[nzType]` | 样式 | `defalut \| primary` | `primary` |
36+
| `(nzOnCopy)` | 点击"复制"的回调 | `EventEmitter<string>` | - |

0 commit comments

Comments
 (0)