angular / angular/components

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

Abierto
#33,041 0 comentarios 4 reacciones 0 asignados Ver en GitHub
area: material/button feature gemini-triaged P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza por la implementación del FAB extendido de Angular Material (`mat-fab`) y su propiedad `extended` existente. Verifica el comportamiento actual de renderizado de extended y collapsed, y define la finalización como un estado `expanded` con valor true por defecto que transicione entre la cápsula que contiene texto y el FAB circular de solo icono, de acuerdo con el comportamiento de Material Design 3 descrito en el issue.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
68/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.