feat(cdk-overlay): add css position classnames to parent panel when strategy is connected positioning
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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.
コントリビューションガイド
調査の方向性
まず、Angular CDK overlay の接続された配置戦略を追跡し、それが親パネルにどのようにクラスを適用するかを確認します。ターゲットの上および下の位置での動作を検証し、選択された位置が overlay のコンテンツとアニメーションを対象にできる CSS クラス名を公開していることを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- 機能追加
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 45/100