feat(button): add `expanded` state to extended FAB for smooth collapse/expand transitions
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 68/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- angular, typescript
- 领域
- frontend
调研方向
从 Angular Material 扩展 FAB（mat-fab）的实现及其现有的 extended 属性开始。验证当前 extended 和 collapsed 的渲染行为，然后将完成定义为默认值为 true 的 expanded 状态，该状态根据 issue 中描述的 Material Design 3 行为，在包含文本的胶囊形控件与仅包含图标的圆形 FAB 之间进行转换。
由索引模型根据 Issue 内容生成。
描述
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
extendedproperty defines themat-fabas an Extended FAB rather than a standard FAB. - The
expandedproperty 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.
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 12 小时
- 30 天内合并 PR
- 102
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 没有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
angular/components 的其他 Issue
-
area: material/datepicker P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33763 · 2 条评论 · 3 个 reaction ·
维护者通常 1 天内回复
-
area: material/table P4
难度 1/5 1 小时以内 新手友好度 88/100
angular/components#33709 · 1 条评论 ·
维护者通常 1 天内回复
-
area: material/table docs P4
难度 2/5 1-3 小时 新手友好度 72/100
angular/components#33455 ·
维护者通常 1 天内回复
-
area: material/core P3
难度 1/5 1 小时以内 新手友好度 78/100
angular/components#33059 · 2 条评论 ·
维护者通常 1 天内回复
-
area: material/dialog P2
难度 2/5 1-3 小时 新手友好度 64/100
angular/components#30536 · 3 个 reaction ·
维护者通常 1 天内回复
查看 angular/components 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 88/100
维护者通常 1 天内回复
-
external-issue to-triage
难度 1/5 1 小时以内 新手友好度 90/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 85/100
diegosouzapw/OmniRoute#15401 ·
维护者通常 2 天内回复
-
Sign the pledge未关闭
难度 1/5 1 小时以内 新手友好度 95/100
input-output-hk/devx-updates#163 ·
-
难度 2/5 1-3 小时 新手友好度 86/100
code-yeongyu/oh-my-openagent#9454 ·
维护者通常 1 天内回复