MATタブのバッジ:シンプルで簡単な方法

まず、HTMLを使用して基本的なMATタブを作成します。以下は、3つのタブを持つMATタブの例です。

<div class="mat-tab">
  <button class="tab-link active">タブ1</button>
  <button class="tab-link">タブ2</button>
  <button class="tab-link">タブ3</button>
</div>

次に、CSSを使用してタブのスタイルを調整します。以下のコードは、タブとアクティブなタブのスタイルを変更する例です。

.mat-tab {
  display: flex;
}
.tab-link {
  padding: 10px;
  background-color: #eaeaea;
  border: none;
  cursor: pointer;
}
.tab-link.active {
  background-color: #ccc;
}

最後に、JavaScriptを使用してタブの切り替えとバッジの追加を実装します。以下は、タブがクリックされたときにアクティブなタブを切り替えるコードです。

const tabLinks = document.querySelectorAll('.tab-link');
tabLinks.forEach((link) => {
  link.addEventListener('click', () => {
    tabLinks.forEach((link) => link.classList.remove('active'));
    link.classList.add('active');
  });
});

バッジを追加するには、各タブに対してdata-badge属性を追加し、それぞれのタブに異なる数値を設定します。以下のコードは、バッジを表示する例です。

<div class="mat-tab">
  <button class="tab-link active" data-badge="3">タブ1</button>
  <button class="tab-link" data-badge="7">タブ2</button>
  <button class="tab-link" data-badge="1">タブ3</button>
</div>

JavaScriptを使用して、各タブのバッジを取得して表示する方法もあります。

const tabLinks = document.querySelectorAll('.tab-link');
tabLinks.forEach((link) => {
  const badgeValue = link.dataset.badge;
  if (badgeValue) {
    const badge = document.createElement('span');
    badge.classList.add('badge');
    badge.textContent = badgeValue;
    link.appendChild(badge);
  }
});

以上の方法を使用して、MATタブにバッジを追加することができます。これにより、ユーザーがタブのコンテンツを切り替える際に、各タブに関連する情報を簡単に表示することができます。