angular / angular/components

mat-expansion-panel - styles get messed up if panel is a child of another element

Aperta
#13,419 0 commenti 16 reazioni 0 assegnatari Vedi su GitHub
area: material/expansion P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Bug, feature request, or proposal:
The styles of panels will get messed up in the panels are placed in another element (ex: `div`)
Please see pseudo-code example below:
```html


...


...

```

#### What is the expected behavior?
Panels should be styled correctly

#### What is the current behavior?
![capture](https://user-images.githubusercontent.com/2098175/46462875-67203600-c777-11e8-9fc4-a1c11cc0f397.PNG)

#### What is the use-case or motivation for changing an existing behavior?
I was trying to implement draggable panels and my implementation has panels inside divs.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material 7.0.0-beta.2

#### Is there anything else we should know?
To fix replace [lines 15-29 in expansion-panel.scss](https://github.com/angular/material2/blob/master/src/lib/expansion/expansion-panel.scss#L15-L29):
```scss
.mat-accordion & {
&:not(.mat-expanded), &:not(.mat-expansion-panel-spacing) {
border-radius: 0;
}

&:first-of-type {
border-top-right-radius: $border-radius;
border-top-left-radius: $border-radius;
}

&:last-of-type {
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
}
```
... with the following:
```scss
.mat-accordion & {
&:not(.mat-expanded), &:not(.mat-expansion-panel-spacing) {
border-radius: 0;
}
}

.mat-accordion > &:first-child,
.mat-accordion > &:first-child:not(.mat-expansion-panel) & {
border-top-right-radius: $border-radius;
border-top-left-radius: $border-radius;
}

.mat-accordion > &:last-child,
.mat-accordion > *:last-child:not(.mat-expansion-panel) & {
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
```

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia in src/lib/expansion/expansion-panel.scss alle righe indicate 15-29 e riproduci il markup annidato di mat-expansion-panel con wrapper div. Confronta la sostituzione del selettore segnalata con gli stili esistenti, quindi verifica che il primo e l’ultimo pannello mantengano raggi dei bordi corretti quando i pannelli sono annidati all’interno di altri elementi.

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

Valutazione

Stack tecnologico
angular
Ambito
frontend
Tipo di issue
Bug
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
48/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.