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

问题描述

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

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)

用户单击图标后

有办法吗?

谢谢.

推荐答案

选项1:自动生成:

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

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

选项2:手动实施:

要实现此目的，您只需引用以下两个链接:

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

• 调整Sidenav大小|角材料
• 导航列表|角材料

• 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屋！