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

效果图