angular / angular/components

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

Đang mở
#30,146 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/overlay feature P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách theo dõi chiến lược định vị được kết nối của Angular CDK overlay và cách chiến lược này áp dụng các class cho panel cha. Xác minh hành vi đối với các vị trí phía trên và phía dưới mục tiêu, đồng thời xác nhận rằng vị trí được chọn cung cấp các tên class CSS có thể nhắm đến nội dung và các animation của overlay.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.