css - 动态显示带有网格的右侧面板

Question

我有一排卡片，希望当我点击一张卡片时，有一个面板会从右侧出现，当然，推我的卡片。

我很确定这是css的问题，但我对那部分很不满意。

这是它的初稿：

<div class="row" style="padding: 2em" *ngIf="!listView">
  <div [ngClass]="gridColUnitsCss">
    <div class="row">
      <div [ngClass]="gridViewCss" *ngFor="let unit of units">
        <div class="card" (click)="backupSelectedUnit(unit)">
          <div class="card-header">
            {{ unit.s.name.value }}
          </div>
        </div>
      </div>
  </div>

  <div class="col-xl-2 col-lg-2 col-md-2" *ngIf="showUnitDetails">
    <!-- panel info -->
  </div>
</div

谢谢

标签： cssangularvmware-clarity