feat(material/button): add collapsed option for extended FAB#33065
feat(material/button): add collapsed option for extended FAB#33065jexjws wants to merge 4 commits intoangular:mainfrom
Conversation
Adds the `expanded` input to the extended FAB component, allowing developers to collapse the extended FAB down to a regular circular shape while hiding the text label via animations. By default, `expanded` is `true`.
angular-robot
bot
added
detected: feature
jexjws
force-pushed
the
add-expanded-option-for-extendedFAB
branch
from
f8b9d52 to
362f2a0
Compare
src/material/button/fab.ts
Outdated
| @Input({transform: booleanAttribute}) extended: boolean = false; | ||
|
|
||
| /** Whether the extended-FAB is currently expanded. Has no effect on non-extended FABs. */ | ||
| @Input({transform: booleanAttribute}) expanded: boolean = true; |
There was a problem hiding this comment.
How is this different from the extended input above?
There was a problem hiding this comment.
When toggling the extended option, it can present an expand-collapse animation.
2026-04-10.00-40-20.mp4
I referred to the Jetpack Compose API interface. In this implementation, ExtendedFloatingActionButton is specifically used to represent the Extended FAB, which corresponds to Angular Material's <button matFab extended>. The additional expanded parameter was inspired by the practice of adding an expanded parameter to ExtendedFloatingActionButton
There was a problem hiding this comment.
@jexjws I see this follows the Android Compose naming, but expanded still feels a bit too close to extended in Angular and may be confusing to users. Would collapsed be clearer here, or something more explicit like showLabel?
jexjws
changed the title
3 participants
Description
Adds a new
@Input() collapsedproperty to the extendedMatFabButton.This enables developers to dynamically collapse an extended FAB into a traditional circular FAB visually (hiding the text label with an animated transition while preserving the icon).
By default,
collapsedis unconditionallyfalsefor all extended FABs to preserve backward compatibility.Related changes:
md-sys-motion-values).mat-mdc-extended-fab-collapsedclass.button.mddocumentation.Screenshots
Expanded (Default)
Collapsed
Related issues
Fixes #33041