홈>2020-02-01 00:44

css - "반쪽"측면 모드가있는 각도 재료 사이드 바

프로젝트의 동적 사이드 바를 작업 중입니다. 기본적으로 우리가하고 싶은 것은 사용자가 사이드 바를 클릭 할 때 동적 사이드 바를 설정하는 것입니다. 예를 들어 사용자가 아이콘을 클릭하기 전에 (완전히 접히지 않으면 아이콘이 유지됩니다). 우리는 기본적으로 사이드 바를 완전히 닫는 앵귤러 머티리얼 함수에서 sidenav.toggle ()을 사용하고 있으며 toggle () 함수를 사용하지 않으면 navbar에 대해 "Side"모드가 작동하지 않습니다. 사이드 모드의 아이콘으로 축소하고 싶습니다. (사이드 모드를 유지해야하는 다른 이유는 사용자가 사이드 바를 펼칠 때 오른쪽 콘텐츠가 오른쪽으로 밀려 야한다는 것입니다)

사용자가

아이콘을 클릭 한 후

할 방법이 있습니까?

감사합니다.

답변 # 1

이를 구현하려면 다음 두 링크 만 참조하면됩니다.

측면 탐색 크기 조정 | 앵귤러 소재

탐색 목록 | 앵귤러 소재

다음 코드를 살펴보십시오. 구현은 다음과 같습니다 :

<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>

답변 # 2

이 https : // github에 대한 기능 요청이 있습니다. com/angular/material2/issues/1728

댓글을 읽으면 공식적으로 사용할 수없는 상태에서 직접 구현하는 방법에 대한 몇 가지 예도 있습니다.

Python2.net

css - "반쪽"측면 모드가있는 각도 재료 사이드 바

관련 자료