css 类似抽屉

背景;angular6+ng-alain

要点：不是通过隐藏dom，而是通过调整样式，来遮盖部分样式

html：

<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>

css:

.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;
}

ts：

isCollapsed = false;
toggleCollapsed(): void {
this.isCollapsed = !this.isCollapsed;
}

效果图

最后

以上就是坚定大侠为你收集整理的css 类似抽屉的全部内容，希望文章能够帮你解决css 类似抽屉所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。