feat(button): add filled/tonal matIconButton
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Anfängerfreundlichkeit
- 52/100
- Issue-Typ
- Feature
- Klarheit
- Klar beschrieben
- Aktivitätsstatus
- Ruhig
- Tech-Stack
- angular, typescript
- Bereich
- frontend
Rechercherichtung
Beginne damit, die vorhandenen Erscheinungsoptionen von matButton mit matIconButton zu vergleichen, und prüfe anschließend die im Issue verlinkten Icon-Button-Varianten von Material Design 3. Als abgeschlossen gilt die Arbeit, wenn matIconButton gefüllte und tonale Erscheinungsbilder als kreisförmige Icon-Buttons rendern kann, die sich von FABs und standardmäßigen Icon-Buttons unterscheiden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
Feature Description
Currently, matButton supports multiple appearances (text, filled, tonal, outlined, elevated) via the matButton attribute, but matIconButton does not accept any appearance input — it always renders as a transparent circular button.
Material Design 3 specifies filled and tonal icon button variants as distinct components alongside the standard and outlined icon buttons. There is currently no straightforward way to create these in Angular Material without using matFab/matMiniFab (which have different sizing, elevation, and semantics) or matButton="filled" with an icon (which doesn't produce a circular icon button).
Use Case
Developers building M3-compliant UIs need filled and tonal icon buttons for actions that require more visual emphasis than a standard icon button, but don't carry the semantic meaning of a FAB (floating action button). For example, a filled icon button for a primary action like "play" or "add to cart" in a toolbar, or a tonal icon button for a medium-emphasis toggle like "bookmark" or "favorite."
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 1 Std.
- Gemergte PRs (30 T.)
- 84
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus angular/components
-
area: material/tree docs gemini-triaged needs triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
angular/components#33832 ·
-
area: material/datepicker gemini-triaged P4
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
angular/components#33763 · 2 Kommentare · 3 Reaktionen ·
-
area: material/table gemini-triaged P4
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 88/100
angular/components#33709 · 1 Kommentar ·
-
area: material/table docs gemini-triaged P4
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
angular/components#33455 ·
-
area: material/core gemini-triaged P3
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 78/100
angular/components#33059 · 2 Kommentare ·
Alle Issues in angular/components
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
bcgov/bc-wallet-mobile#4761 · 1 Kommentar ·
-
external-issue to-triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 88/100
-
area-deployment area-integrations triage:bot-seen
Schwierigkeit 2/5 Ein halber Tag Anfängerfreundlichkeit 86/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
-
refactor
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100