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

Nadie ha tomado este issue todavía.

Evaluación

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

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.

Descripción

area: material/button feature gemini-triaged P3
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.

Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 2 h
PR fusionados (30 d)
81

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.