Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

feat(button): add `expanded` state to extended FAB for smooth collapse/expand transitions

Đang mở
  • Có gì không ổn?
#33,041 0 bình luận 4 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

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

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.

Mô tả

area: material/button feature P3
Feature Description

According to the Material Design 3 specs, 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.

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.

Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 14 giờ
Pull request đã merge (30 ngày)
96

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của angular/components

Tất cả issue của angular/components

Issue tương tự

Thêm issue về TypeScript

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.