具有“半”侧模式的角材料侧栏

Question

我正在为我们的项目开发动态侧边栏，基本上我们想要做的是设置一个动态侧边栏，当用户点击侧边栏时，它会在用户点击后侧栏时展开，侧边栏应该折叠并只显示图标（但不是完全折叠它将保留图标），例如在用户单击图标之前。我们使用 sidenav.toggle() from angular material 函数，它基本上完全关闭了侧边栏，如果我不使用 toggle() 函数，导航栏的“Side”模式不起作用。所以我想折叠到带有侧面模式的图标。 （我们需要保持侧边模式的另一个原因是我们还需要确保当用户展开侧边栏时，右侧的内容应该向右推）

用户点击图标后

有没有办法做到这一点？

谢谢。

原文由 Terry Zhang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我创建了一个基于 scss 的示例。也许有人可以根据这个示例帮助创建移动版本。

• 第 1 步：将以下样式添加到 styles.scss

 // src/styles.scss
:root {
  --menu-width-open: 200px;
  --menu-width-closed: 64px;
}

.mat-drawer-container {
  .mat-drawer {
    box-sizing: content-box;
    width: var(--menu-width-open);
    transition: all 0.3s ease-in-out !important;
  }

  .mat-drawer-content {
    // transform: translateX(200px);
    margin-left: var(--menu-width-open) !important;
    transition: all 0.3s ease-in-out !important;
  }

  &.container-closed {
    .mat-drawer {
      width: var(--menu-width-closed);
    }

    .mat-drawer-content {
      // transform: translateX(64px) !important;
      margin-left: var(--menu-width-closed) !important;
    }
  }
}

• 第2步：添加抽屉到 app.componenet.html

 <mat-drawer-container class="example-container" autosize [ngClass]="{ 'container-closed': !showFiller }">
  <mat-drawer #drawer class="example-sidenav" mode="side" disableClose="true" opened="true">
    <button (click)="showFiller = !showFiller" mat-raised-button>click</button>
  </mat-drawer>
  <div class="example-sidenav-content">
    <router-outlet></router-outlet>
    <button type="button" mat-button (click)="drawer.toggle()">Toggle sidenav</button>
  </div>
</mat-drawer-container>

• 第 3 步：并将 showFiller = false; 添加到 app.component.ts 文件。

 // app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  showFiller = false;
}

原文由 Serkan KONAKCI 发布，翻译遵循 CC BY-SA 4.0 许可协议