feat(cdk-overlay): add css position classnames to parent panel when strategy is connected positioning
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
### 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.
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par suivre la stratégie de positionnement connecté de Angular CDK overlay et la manière dont elle applique des classes au panneau parent. Vérifiez le comportement pour les positions au-dessus et au-dessous de la cible, et confirmez que la position sélectionnée expose des noms de classes CSS permettant de cibler le contenu et les animations de l’overlay.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100