css 类似抽屉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div nz-row nzGutter="24">
<div nz-col nzXs="24" nzMd="24">
<div class="showPanel " [class.hide]="isCollapsed">
<nz-button-group >
<button nz-button>Cancel</button>
<button nz-button nzType="primary">OK</button>
</nz-button-group>
<div class="fixicons" (click)="toggleCollapsed()"
>
<i class="anticon" [class.anticon-caret-up]="isCollapsed" [class.anticon-caret-down]="!isCollapsed">
</i>
</div>
</div>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.showPanel{
position: absolute;
/*margin-left: 389px;*/
left: 25%;
/*text-align: center;*/
height: 100px;
width: 800px;
/*display: block;*/
border-right: 2px solid lightskyblue;
border-bottom: 2px solid lightskyblue;
border-left: 2px solid lightskyblue;
}
.fixicons {
position: absolute;
width: 40px;
background: white;
/*bottom: -122px;*/
bottom: -22px;
left: 48%;
margin-left: -20px;
/*cursor: pointer;*/
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
box-shadow: 2px 5px 7px #888;
text-align: center;
}
.hide{
bottom: -12px;
}

1
2
3
4
5
isCollapsed = false;
toggleCollapsed(): void {
this.isCollapsed = !this.isCollapsed;
}