Angular Materialでバッジ付きアイコンボタンを作る
小ネタです。
Angular Materialを使ったアプリケーションで、通知件数などを表示するためのバッジを使いたい場面があったのですが、Angular Materialのコンポーネントが用意されていなかったので、既存のコンポーネントとCSSを組み合わせて作ってみました。
イメージ的にはこんな感じです。(画像はwantedlyのツールバー)
最終的にこんな感じになりました。
手順
HTML
まずは、html側です。
通常のIcon Buttonsをマークアップした後に、バッジの件数表示部分をspanとして追加します。ここでは表示を5としていますが、実際にはテンプレートで動的に変更できるようにするかと思います。
<button mat-icon-button>
<mat-icon class="icon">notifications</mat-icon>
<span class="badge">5</span>
</button>
CSS
次に、バッジをスタイリングするCSS側です。
こんな感じになりました。
地道にCSSを書いていくだけなのですが、バッジサイズに合わせて、 line-heightを指定するのがポイントかと思います。
バッチの
.badge {
position: absolute;
top: 0;
left: 50%;
font-size: 12px;
line-height: 13px;
border-radius: 50%;
width: 13px;
height: 13px;
background-color: #ff0000;
border: 4px solid #ff0000;
color: #ffffff;
text-align: center;
}
デモ
stackblitzに動くデモを作ってみました。
https://stackblitz.com/edit/angular-material-badge
※ ボタンを押すとバッジのカウントが上がり、バッジ自体をクリックするとカウントがクリアされます。
所感
stackblitzめちゃくちゃ便利。
以上です。
Author And Source
この問題について(Angular Materialでバッジ付きアイコンボタンを作る), 我々は、より多くの情報をここで見つけました https://qiita.com/daikiojm/items/dba8930be0400e46b9ec著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .