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.
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"(defaulttrue) property specifically for the Extended FAB.extendedproperty defines themat-fabas an Extended FAB rather than a standard FAB.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-fablacks an animatableexpandedstate, 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.