angular / angular/components

feat(cdk-overlay): add css position classnames to parent panel when strategy is connected positioning

Aperta
#30,146 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
area: cdk/overlay feature P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### Feature Description

Currently, the only way to apply css to an overlay and target styles to a specific overlay position relative to a target element (e.g. above, below, etc.), you have to provide positions to the strategy you are using (such is this case in your autocomplete trigger where you need to swap the corner radius of the panel depending on if the position is above or below the target element). If you want to use the defaults of your connected position strategy, without providing positions to a position's strategy, it would be helpful to leverage css classnames that were automatically applied depending on whatever the position the cdk chose to apply.

### Use Case

A use case is exactly what you are doing in your autocomplete trigger. Rather than using an explicit css class we could leverage selectors supplied by the cdk overlay. For example, if the overlay was positioned above an element, the cdk would automatically apply '.cdk-overlay-positioned-above') to the parent element so we could leverage it to directly apply styles to the content in our overlay appropriately without needing to do so explicitly in our code. A common use case other than corner radius would be css animations where we would need to know the position to appropriately target our animations (slide down or slide up, for example). This would simplify our code and make applying styles under different positions much easier.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia tracciando la strategia di posizionamento connesso di Angular CDK overlay e il modo in cui applica le classi al pannello padre. Verifica il comportamento per le posizioni sopra e sotto il target e conferma che la posizione selezionata esponga nomi di classi CSS che possano essere usati per indirizzare il contenuto e le animazioni dell’overlay.

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

Valutazione

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.