angular / angular/components

Navigation drawer - Mini variant behavior

オープン
#1,728 コメント 105 件 リアクション 272 件 担当者 0 名 GitHub で見る
area: material/sidenav feature P5
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### Feature request:
Add the "Mini variant" behavior of the Navigation drawer.
As defined in the Google Material guidelines:
https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-behavior

![](https://cloud.githubusercontent.com/assets/1202936/8023412/a6d190f4-0ce1-11e5-86b9-55448c4ae6bd.png)

#### What is the expected behavior?
When toggled, the navigation drawer change its width.
It's not fully hidden.

#### What is the current behavior?
Only two states are available: displayed, hidden

#### What are the steps to reproduce?
Create a sidenav and toggle it on and off.
The sidenav can only be opened or closed.
No intermediate state.

#### What is the use-case or motivation for changing an existing behavior?
Desktop users need to quickly change the current view.
The sliding effect of the sidenav could be annoying when used a lot.
It's common for desktop apps to keep the navigation opened by default.
But in some cases the icons are self explanatory so no need to display the associated labels.

#### Which versions of Angular, Material, OS, browsers are affected?
Angular2

#### Is there anything else we should know?
A similar feature request was submitted for Angular 1:
https://github.com/angular/material/issues/3158

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、既存の Angular Material sidenav 実装と、現在の開閉切り替えの経路を確認します。その動作を、リンクされている Google Material mini-variant ガイドラインと比較します。完了条件は、既存の表示状態と非表示状態を維持しながら、drawer が独立した縮小幅の状態をサポートすることです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
frontend
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
32/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。