angular / angular/components

make mat-step-header header scrollable

Offen
#15,181 6 Kommentare 7 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/stepper feature P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

#### Please describe the feature you would like to request.
I would like to see the mat-step-header made scrollable in a similar fashion to mat-tab. IOf you have multiple steps on a smaller resolution or inside a container with a specific width the steps simply overflow over the edge and would be better if you have a left/right scroll button on either side of the header like the mat-tab

#### What is the use-case or motivation for this proposal?
I have several apps that use the material stepper (specifically the horizontal stepper) where there are many steps in the flow, the stepper is usually displayed inside a mat-card with a specific width (responsive to difference screen sizes)

On smaller screen sizes where there are more steps than permitted on the screen the step headers simply overflow off the screen

#### Is there anything else we should know?

This is a screen shot of one example on a large mobile (width: 425px)

screenshot 2019-02-13 at 18 38 30

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, das Verhalten von horizontalem mat-step-header mit dem scrollbaren mat-tab-Header zu vergleichen, wobei der Schwerpunkt darauf liegt, wie beide mit vielen Elementen in einem schmalen Container umgehen. Bestätige das erwartete Verhalten für den mobilen Screenshot und definiere als abgeschlossen, dass ein Überlaufen der Step-Header verhindert wird und gleichzeitig benutzbare Scroll-Steuerelemente nach links und rechts bereitgestellt werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.