带“半"的角形材料侧边栏侧面模式 [英] Angular Material Side Bar with "Half" side mode

问题描述

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

用户点击图标

有没有办法做到这一点?

谢谢.

解决方案

选项 1:自动生成:

您可以使用 'Angular CLI 组件原理图'

从 Material 本身提供的模板创建导航组件

ng generate @angular/material:nav your-component-name

上述命令将生成一个新组件，其中包括一个带有应用程序名称的工具栏和一个基于 Material 断点的响应式侧边导航.在

I am working on the dynamic side bar for our project, basically what we want to do is to set up a dynamic side bar when user click on the side bar it will spread when user click back sidebar should collapse and show only icons (but not totally collapse it will keep the icons) for example before user click the icon. We are using sidenav.toggle()from angular material function which basically closes the sidebar completely and if I don't use toggle() function "Side" mode for navbar does not work. So I want collapse to icon with side mode. (The other reason we need to keep the side mode is that we also need to make sure when user spread the sidebar, right side content should push to right)

After user click the icon

Is there a way to do that?

Thanks.

解决方案

Option 1: Generating Automatically:

You can create a navigation component from templates provided by Material itself using 'Angular CLI component schematics'

ng generate @angular/material:nav your-component-name

The above command will generate a new component that includes a toolbar with the app name and a responsive side nav based on Material breakpoints. See more about angular material schematics here

---

Option 2: Implementing Manually:

To implement that, you just have to refer these two links:

• Resizing Sidenav | Angular Material
• Navigation List | Angular Material

glance through the following code. Implementation will be something like this:

<mat-drawer-container class="example-container mat-typography" autosize>
  <mat-drawer #drawer mode="side" disableClose="true" opened="true">
    <button mat-mini-fab (click)="isExpanded = !isExpanded" color="warn" style="margin: 10px;">
      <mat-icon aria-label="Menu">menu</mat-icon>
    </button>

    <mat-nav-list>
      <mat-list-item>
        <mat-icon mat-list-icon>person</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management A</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>assignment</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management B</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>domain</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management C</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>folder_shared</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management X</h4>
      </mat-list-item>
    </mat-nav-list>
  </mat-drawer>

  <div class="example-sidenav-content">
    You cards and screen Contents goes here..
    Will be pushed towards right on expanding side navbar.
  </div>
</mat-drawer-container>

这篇关于带“半"的角形材料侧边栏侧面模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！