javascript - Angular 6 中可滑动/可拖动的侧边导航栏，带有 Angular-material/Bootstrap

Question

我正在尝试使用 Angular 6 中的 Angular Material 实现垂直可滑动/可拉伸(stretch)侧导航栏。但我坚持使用鼠标实现导航栏的拉伸(stretch)。代码如下。

html代码如下。

<mat-drawer-container class="example-container mat-typography" autosize>
  <mat-drawer
    #drawer
    mode="side"
    disableClose="true"
    opened="true"
    class="nav-bar-expandable"
  >
  <perfect-scrollbar [config]="config" [scrollIndicators]="true">
      <div style="margin-top: 20px;">
        <mat-nav-list
          ><mat-list-item>
            <mat-icon
              *ngIf="!_toggleIsExpend"
              data-toggle="tooltip"
              title="Employee"
              mat-list-icon
              >people</mat-icon
            >
            <span
              *ngIf="_toggleIsExpend"
              data-toggle="tooltip"
              title="Employee"
              (click)="getElementNameTest('Employee')"
              >Employee</span
            ></mat-list-item
          ></mat-nav-list
        >
        <mat-nav-list
          ><mat-list-item>
            <mat-icon
              *ngIf="!_toggleIsExpend"
              data-toggle="tooltip"
              title="Tax Rates"
              mat-list-icon
              >money</mat-icon
            >
            <span
              *ngIf="_toggleIsExpend"
              data-toggle="tooltip"
              title="Tax Rates"
              (click)="getElementNameTest('Tax_Rates')"
              >Tax Rates</span
            ></mat-list-item
          ></mat-nav-list
        >
        </div>
    </perfect-scrollbar>
  </mat-drawer>
</mat-drawer-container>

Scss如下。

.example-container {
  min-height: 592px;
  height: 100%;
  .nav-bar-expandable {
    // background-color: aqua;
    max-width: 160px;
    .toggle-icon {
      margin: 10px;
      cursor: pointer;
    }
  }
}
.mat-nav-list {
  padding-top: 0px !important;
  .mat-list-item {
    height: 100% !important;
    margin: 10px 0;
    color: white;
    font-family: sans-serif;
    font-size: 14px !important;
    font-weight: bold !important;
    .mat-list-item-content {
      padding: 0 6px;
    }
  }
  a {
    white-space: nowrap;
    width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.nav-bar-expandable.mat-drawer {
  background: rgba(204, 0, 0, 0.6784313725490196);
  opacity: 0.9;
}
.mat-expansion-panel {
  background: rgba(204, 0, 0, 0);
  ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body {
    padding: 0 2px 4px !important;
  }
}

.mat-expansion-panel-header-title {
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  font-family: sans-serif;
}

.nav-bar-accordian > .mat-expansion-indicator:after {
  color: #ffffff !important;
}

.mat-expansion-panel-header {
  padding: 0 2px !important;
}

请帮助我，在此先感谢。我也可以转移到 Bootstrap，但最后。

Answer 1

你在找类似 Angular Split 的东西吗？ ？