时间戳

首页 > 解决方案 > 用有角度的滑块进行折叠

html - 用有角度的滑块进行折叠

问题描述

我正在做角项目。我正在尝试崩溃。我的代码如下

 <div class="myClass">
            <mat-accordion>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                      <mat-panel-title>
                      </mat-panel-title>
                      <mat-panel-description>
                         Description           
                      </mat-panel-description>
                    </mat-expansion-panel-header>
                  </mat-expansion-panel>
              </mat-accordion>
        </div>

.myClass {
 display: flex;
    flex-direction: column;
    margin-top: auto;
}

 .mat-expansion-panel-header {
      width: 99.7vw;
  }

   .mat-expansion-panel-header-description {
      flex-grow: 1;
  }

使用原因，margin-top:auto因为我希望在页面末尾折叠。一旦我点击折叠图标，我的折叠应该打开，它应该如图所示我的问题

一旦我的折叠打开，我希望将这些类型的卡片与我的数据一起打开，并且在打开此折叠时，我想如图所示排列 4-5 个盒子/卡片，但如果存在更多数据，那么我想使用“>”滑动>”并展示这些盒子/卡片。如果我单击左侧的“<<”，那么它应该朝那个方向移动。我怎样才能做到这一点？

标签： htmlcssangularangular9

解决方案

这称为轮播。如果您不熟悉 Angular，这不是最容易做的事情。我建议只使用猫头鹰旋转木马。您可以使用一个角度包装器。或者，如果您想自己制作旋转木马，您可以按照本指南进行操作。

对于轮播的折叠，您必须制作一个切换折叠状态的按钮。像这样的东西-


    <button (click)="collapsed = !collapsed"></button>
    <div *ngIf="!collapsed" >
        <carousel-component></carousel-component>
    <div>

推荐阅读