angular / angular/components

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

Aperta
#14,994 3 commenti 5 reazioni 0 assegnatari Vedi su GitHub
area: material/expansion area: material/list feature needs: discussion P5
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con lo StackBlitz collegato per riprodurre il comportamento attuale, quindi confronta i componenti List e Expansion Panel esistenti con la specifica List collegata. Il lavoro è completato quando il comportamento di espansione/compressione, i divisori, lo stile degli elementi dell’elenco e il posizionamento del pulsante per l’azione secondaria corrispondono al design richiesto; il payload non indica file o test specifici.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.