angular / angular/components

Navigation drawer - Mini variant behavior

Ouverte
#1,728 105 commentaires 272 réactions 0 personnes assignées Voir sur GitHub
area: material/sidenav feature P5
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par examiner l’implémentation existante de Angular Material sidenav et son chemin actuel de basculement entre les états ouvert et fermé. Comparez ce comportement aux directives Google Material mini-variant liées ; le travail est considéré comme terminé lorsque le drawer prend en charge un état distinct de largeur réduite tout en préservant les états affiché et masqué existants.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
32/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.