angular / angular/components

[List] support "expand and collapse" from List spec

Offen
#14,994 3 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/expansion area: material/list feature needs: discussion P5
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.
The [List spec](https://material.io/design/components/lists.html#types) includes an "Expand and collapse" control. This functions more or less like an Expansion Panel but with List Item styling: dividers are used instead of a surrounding border / different background color, and the expand/collapse button is placed according to the rules for secondary action buttons.

#### What is the use-case or motivation for this proposal?
Support full capabilities of List as described in the spec

#### Is there anything else we should know?
I put together [a StackBlitz](https://stackblitz.com/edit/angular-material2-issue-list-expand) showing the current behavior when an expansion panel is placed in a list. The behavior is more or less as expected but the styling does not work as a list item, and just "fixing up" the current behavior is a lot to ask of consumers.

In my own project I built a component to implement this behavior, but it's not going to be as robust as it would be if supported directly here. Of course, styling an expansion panel to behave correctly when used as a list item is only one approach, and I don't mean to suggest a specific design. My custom component tracks its own expansion state and handles divider logic, etc, internally.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit dem verknüpften StackBlitz, um das aktuelle Verhalten zu reproduzieren, und vergleiche dann die vorhandenen List- und Expansion Panel-Komponenten mit der verknüpften List-Spezifikation. Die Arbeit ist abgeschlossen, wenn das Expandieren-/Reduzieren-Verhalten, Trennlinien, das Styling der Listenelemente und die Platzierung der Schaltfläche für die sekundäre Aktion dem angeforderten Design entsprechen; der Payload nennt keine spezifischen Dateien oder Tests.

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.