Skip to content

Commit dab4d66

Browse files
OriginRingOriginRing
authored
feat(module:float-button): add float-button component (#7884)
1 parent 3a5ba37 commit dab4d66

38 files changed

+1831
-2
lines changed

‎.github/CODEOWNERS

+1
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ components/water-mark/** @OriginRing
7373
components/color-picker/** @OriginRing
7474
components/hash-code/** @OriginRing
7575
components/flex/** @ParsaArvanehPA
76+
components/float-button/** @OriginRing
7677

7778
# The `components/core/*` owners
7879
components/core/config/** @simplejason

‎components/back-top/doc/index.en-US.md

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ title: BackTop
55
cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
66
---
77

8+
* Note: This component will be removed later. Please use `<nz-float-button-top></nz-float-button-top>` in the FloatButton component.
9+
810
`nz-back-top` makes it easy to go back to the top of the page.
911

1012
## When To Use

‎components/back-top/doc/index.zh-CN.md

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ title: BackTop
66
cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
77
---
88

9+
* 注意：该组件将在后续移除，请前往 FloatButton 组件中使用 `<nz-float-button-top></nz-float-button-top>`
10+
911
返回页面顶部的操作按钮。
1012

1113
## 何时使用

‎components/components.less

+1
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,4 @@
6868
@import './water-mark/style/entry.less';
6969
@import './color-picker/style/entry.less';
7070
@import './hash-code/style/entry.less';
71+
@import './float-button/style/entry.less';

‎components/float-button/demo/basic.md

+14
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 most basic usage.

‎components/float-button/demo/basic.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-float-button-basic',
5+
template: `
6+
<div class="basic">
7+
<nz-float-button></nz-float-button>
8+
</div>
9+
`,
10+
styles: [
11+
`
12+
.basic {
13+
height: 300px;
14+
position: relative;
15+
}
16+
nz-float-button {
17+
position: absolute;
18+
}
19+
`
20+
]
21+
})
22+
export class NzDemoFloatButtonBasicComponent {}

‎components/float-button/demo/description.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
order: 3
3+
title:
4+
zh-CN: 描述
5+
en-US: Description
6+
---
7+
8+
## zh-CN
9+
10+
可以通过 `nzDescription` 设置文字内容。
11+
12+
> 仅当 `shape` 属性为 `square` 时支持。由于空间较小，推荐使用比较精简的双数文字。
13+
14+
## en-US
15+
16+
Setting `nzDescription` prop to show FloatButton with description.
17+
18+
> supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.

‎components/float-button/demo/description.ts

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-float-button-description',
5+
template: `
6+
<div class="description">
7+
<nz-float-button
8+
[nzIcon]="icon"
9+
[nzDescription]="description"
10+
nzShape="square"
11+
style="right: 24px"
12+
></nz-float-button>
13+
<nz-float-button [nzDescription]="description" nzShape="square" style="right: 94px"></nz-float-button>
14+
</div>
15+
<ng-template #description>HELP</ng-template>
16+
17+
<ng-template #icon>
18+
<span nz-icon nzType="file-text" nzTheme="outline"></span>
19+
</ng-template>
20+
`,
21+
styles: [
22+
`
23+
.description {
24+
height: 300px;
25+
position: relative;
26+
}
27+
nz-float-button {
28+
position: absolute;
29+
}
30+
`
31+
]
32+
})
33+
export class NzDemoFloatButtonDescriptionComponent {}

‎components/float-button/demo/group-menu.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 5
3+
title:
4+
zh-CN: 菜单模式
5+
en-US: Menu mode
6+
---
7+
8+
## zh-CN
9+
10+
设置 `nzTrigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。
11+
12+
## en-US
13+
14+
Open menu mode with `nzTrigger`, which could be `hover` or `click`.

‎components/float-button/demo/group-menu.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-float-button-group-menu',
5+
template: `
6+
<div class="menu">
7+
<nz-float-button-group
8+
[nzIcon]="icon"
9+
nzType="primary"
10+
nzTrigger="click"
11+
style="right: 24px"
12+
(nzOnOpenChange)="openChange($event)"
13+
>
14+
<nz-float-button></nz-float-button>
15+
<nz-float-button [nzIcon]="inner"></nz-float-button>
16+
</nz-float-button-group>
17+
<nz-float-button-group
18+
[nzIcon]="icon"
19+
nzType="primary"
20+
nzTrigger="hover"
21+
style="right: 94px"
22+
(nzOnOpenChange)="openChange($event)"
23+
>
24+
<nz-float-button></nz-float-button>
25+
<nz-float-button [nzIcon]="inner"></nz-float-button>
26+
</nz-float-button-group>
27+
</div>
28+
<ng-template #icon>
29+
<span nz-icon nzType="customer-service" nzTheme="outline"></span>
30+
</ng-template>
31+
<ng-template #inner>
32+
<span nz-icon nzType="comment" nzTheme="outline"></span>
33+
</ng-template>
34+
`,
35+
styles: [
36+
`
37+
.menu {
38+
height: 300px;
39+
position: relative;
40+
}
41+
nz-float-button-group,
42+
nz-float-button {
43+
position: absolute;
44+
}
45+
`
46+
]
47+
})
48+
export class NzDemoFloatButtonGroupMenuComponent {
49+
openChange(status: boolean): void {
50+
console.log(status);
51+
}
52+
}

‎components/float-button/demo/group.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 4
3+
title:
4+
zh-CN: 浮动按钮组
5+
en-US: FloatButton Group
6+
---
7+
8+
## zh-CN
9+
10+
按钮组合使用时，推荐使用 `nz-float-button-group`，并通过设置 `nzShape` 属性改变悬浮按钮组的形状。
11+
12+
## en-US
13+
14+
When multiple buttons are used together, `nz-float-button-group` is recommended. By setting `nzShape` of FloatButtonGroup, you can change the shape of group.

‎components/float-button/demo/group.ts

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-float-button-group',
5+
template: `
6+
<div class="group">
7+
<nz-float-button-group nzShape="circle" style="right: 24px">
8+
<nz-float-button [nzIcon]="icon"></nz-float-button>
9+
<nz-float-button></nz-float-button>
10+
<nz-float-button-top [nzVisibilityHeight]="600"></nz-float-button-top>
11+
<nz-float-button [nzIcon]="customer"></nz-float-button>
12+
</nz-float-button-group>
13+
<nz-float-button-group nzShape="square" style="right: 94px">
14+
<nz-float-button [nzIcon]="icon"></nz-float-button>
15+
<nz-float-button></nz-float-button>
16+
<nz-float-button-top [nzVisibilityHeight]="600"></nz-float-button-top>
17+
<nz-float-button [nzIcon]="customer"></nz-float-button>
18+
</nz-float-button-group>
19+
</div>
20+
<ng-template #icon>
21+
<span nz-icon nzType="question-circle" nzTheme="outline"></span>
22+
</ng-template>
23+
<ng-template #customer>
24+
<span nz-icon nzType="customer-service" nzTheme="outline"></span>
25+
</ng-template>
26+
`,
27+
styles: [
28+
`
29+
.group {
30+
height: 300px;
31+
position: relative;
32+
}
33+
nz-float-button-group,
34+
nz-float-button {
35+
position: absolute;
36+
}
37+
`
38+
]
39+
})
40+
export class NzDemoFloatButtonGroupComponent {}

‎components/float-button/demo/module

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { NzFloatButtonModule } from 'ng-zorro-antd/float-button';
2+
import { NzIconModule } from 'ng-zorro-antd/icon';
3+
import { NzSwitchModule } from 'ng-zorro-antd/switch';
4+
5+
export const moduleList = [ NzFloatButtonModule, NzIconModule, NzSwitchModule ];

‎components/float-button/demo/open.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 6
3+
title:
4+
zh-CN: 受控模式
5+
en-US: Controlled mode
6+
---
7+
8+
## zh-CN
9+
10+
设置 `nzOpen` 属性控制 `nz-float-button-group` 是否展开
11+
12+
## en-US
13+
14+
Set the `nzOpen` property to control whether `nz-float-button-group` is expanded.

‎components/float-button/demo/open.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-float-button-open',
5+
template: `
6+
<div class="open">
7+
<nz-float-button-group [nzIcon]="icon" [nzOpen]="isOpen" nzType="primary" nzTrigger="hover" style="right: 24px">
8+
<nz-float-button></nz-float-button>
9+
<nz-float-button [nzIcon]="inner"></nz-float-button>
10+
</nz-float-button-group>
11+
<nz-switch [(ngModel)]="isOpen"></nz-switch>
12+
<ng-template #icon>
13+
<span nz-icon nzType="customer-service" nzTheme="outline"></span>
14+
</ng-template>
15+
<ng-template #inner>
16+
<span nz-icon nzType="comment" nzTheme="outline"></span>
17+
</ng-template>
18+
</div>
19+
`,
20+
styles: [
21+
`
22+
.open {
23+
height: 300px;
24+
position: relative;
25+
}
26+
nz-float-button-group,
27+
nz-float-button {
28+
position: absolute;
29+
}
30+
`
31+
]
32+
})
33+
export class NzDemoFloatButtonOpenComponent {
34+
isOpen: boolean = true;
35+
}

‎components/float-button/demo/shape.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 2
3+
title:
4+
zh-CN: 形状
5+
en-US: Shape
6+
---
7+
8+
## zh-CN
9+
10+
通过 `nsShape` 设置不同的形状。
11+
12+
## en-US
13+
14+
Change the shape of the FloatButton with `nsShape`.

‎components/float-button/demo/shape.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-float-button-shape',
5+
template: `
6+
<div class="shape">
7+
<nz-float-button nzShape="circle" style="right: 94px" nzType="primary" [nzIcon]="icon"> </nz-float-button>
8+
<nz-float-button nzShape="square" style="right: 24px" nzType="primary" [nzIcon]="icon"></nz-float-button>
9+
<ng-template #icon>
10+
<span nz-icon nzType="customer-service" nzTheme="outline"></span>
11+
</ng-template>
12+
</div>
13+
`,
14+
styles: [
15+
`
16+
.shape {
17+
height: 300px;
18+
position: relative;
19+
}
20+
nz-float-button {
21+
position: absolute;
22+
}
23+
`
24+
]
25+
})
26+
export class NzDemoFloatButtonShapeComponent {}

‎components/float-button/demo/top.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 7
3+
title:
4+
zh-CN: 返回顶部
5+
en-US: Back Top
6+
---
7+
8+
## zh-CN
9+
10+
返回页面顶部的操作按钮。
11+
12+
## en-US
13+
14+
Set the `nzOpen` property to control whether `nz-float-button-group` is expanded.

‎components/float-button/demo/top.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-float-button-top',
5+
template: `
6+
<nz-float-button-top></nz-float-button-top>
7+
Scroll down to see the back to top button on the bottom right
8+
`
9+
})
10+
export class NzDemoFloatButtonTopComponent {}

‎components/float-button/demo/type.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 1
3+
title:
4+
zh-CN: 类型
5+
en-US: Type
6+
---
7+
8+
## zh-CN
9+
10+
通过 `nzType` 改变悬浮按钮的类型。
11+
12+
## en-US
13+
14+
Change the type of the FloatButton with `nzType`.

0 commit comments

Comments
 (0)