feat(button): add `expanded` state to extended FAB for smooth collapse/expand transitions
- 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
According to the [Material Design 3 specs](https://m3.material.io/components/extended-fab/guidelines), an extended FAB should be able to smoothly transition between an extended state (capsule shape with text) and a collapsed state (circular shape with icon only) depending on scroll interactions or limited screen space.
I propose adding a new `[expanded]="boolean"` (default `true`) property specifically for the Extended FAB.
* The `extended` property defines the `mat-fab` as an Extended FAB rather than a standard FAB.
* The `expanded` property defines its visual **state** (expanded capsule vs. collapsed circle).
This would apply the necessary CSS transitions when the text label visually disappears in the collapsed state.
### Use Case
I want to implement an expandable/collapsible [Navigation Rail](https://m3.material.io/components/navigation-rail/overview).
When a user interacts with a Navigation Rail to expand/collapse it, the top FAB within that rail should smoothly animate between a collapsed regular FAB and an extended FAB with a text label. Currently, because `mat-fab` lacks an animatable `expanded` state, developers cannot easily recreate this fluid interaction without writing complex custom CSS overrides to hack the fab-label.
Having a native `[expanded]` property would allow developers to seamlessly bind the FAB's state to the Navigation Rail's drawer state, providing a polished and spec-compliant Material 3 experience out of the box.
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu từ phần triển khai extended FAB của Angular Material (`mat-fab`) và thuộc tính `extended` hiện có của nó. Xác minh hành vi render hiện tại của extended và collapsed, sau đó định nghĩa việc hoàn thành là một trạng thái `expanded` mặc định có giá trị true, chuyển đổi giữa capsule chứa văn bản và FAB hình tròn chỉ có biểu tượng theo hành vi của Material Design 3 được mô tả trong issue.
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
- Ít trao đổi
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 68/100