feat(button): add `expanded` state to extended FAB for smooth collapse/expand transitions
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 91
描述
### 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.
贡献指南
调研方向
从 Angular Material 扩展 FAB(`mat-fab`)的实现及其现有的 `extended` 属性开始。验证当前 extended 和 collapsed 的渲染行为,然后将完成定义为默认值为 true 的 `expanded` 状态,该状态根据 issue 中描述的 Material Design 3 行为,在包含文本的胶囊形控件与仅包含图标的圆形 FAB 之间进行转换。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 功能
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 68/100