feat(button): add filled/tonal matIconButton
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 52/100
- issue の種類
- 機能追加
- 明瞭さ
- 明確に書かれている
- 活発さ
- 静か
- 技術スタック
- angular, typescript
- 領域
- frontend
調査の方向性
まず、既存の matButton の外観オプションと matIconButton を比較し、次に issue にリンクされている Material Design 3 のアイコンボタンのバリエーションを確認します。完了条件は、matIconButton が filled と tonal の外観を、FABs や標準のアイコンボタンとは異なる円形のアイコンボタンとしてレンダリングできることです。
索引モデルが issue の本文から書いたものです。
説明
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."
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 1時間
- マージ済み PR（30日）
- 84
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
angular/components のほかの issue
-
area: material/tree docs gemini-triaged needs triage
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
angular/components#33832 ·
-
area: material/datepicker gemini-triaged P4
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/components#33763 · コメント 2 件 · リアクション 3 件 ·
-
area: material/table gemini-triaged P4
難易度 1/5 1時間未満 初心者へのやさしさ 88/100
angular/components#33709 · コメント 1 件 ·
-
area: material/table docs gemini-triaged P4
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
angular/components#33455 ·
-
area: material/core gemini-triaged P3
難易度 1/5 1時間未満 初心者へのやさしさ 78/100
angular/components#33059 · コメント 2 件 ·
angular/components の issue をすべて見る
似ている issue
-
難易度 1/5 1〜3時間 初心者へのやさしさ 88/100
motiondivision/motion#3849 ·
-
Add: S Play Event HD オープンcheck:passed streams:add
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
i-am-bee/beeai-framework#1697 · リアクション 1 件 ·
-
Support bun dedupe オープンenhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
antfu/node-modules-inspector#214 ·