Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Angular Materialでバッジ付きアイコンボタンを作る

More than 1 year has passed since last update.

小ネタです。
Angular Materialを使ったアプリケーションで、通知件数などを表示するためのバッジを使いたい場面があったのですが、Angular Materialのコンポーネントが用意されていなかったので、既存のコンポーネントとCSSを組み合わせて作ってみました。

イメージ的にはこんな感じです。(画像はwantedlyのツールバー)

スクリーンショット 2017-10-31 21.50.36.png

最終的にこんな感じになりました。

スクリーンショット 2017-10-31 23.31.05.png

手順

HTML

まずは、html側です。
通常のIcon Buttonsをマークアップした後に、バッジの件数表示部分をspanとして追加します。ここでは表示を5としていますが、実際にはテンプレートで動的に変更できるようにするかと思います。

app.component.html
  <button mat-icon-button>
    <mat-icon class="icon">notifications</mat-icon>
    <span class="badge">5</span>
  </button>

CSS

次に、バッジをスタイリングするCSS側です。
こんな感じになりました。
地道にCSSを書いていくだけなのですが、バッジサイズに合わせて、 line-heightを指定するのがポイントかと思います。

バッチの

app.component.css
.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めちゃくちゃ便利。

以上です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away