スポンサー
Support Framework7

バッジ

    バッジは、アプリのさまざまな要素にカウント数やラベルを表示したり示したりするために使用します。

    バッジのレイアウト

    バッジのレイアウトは非常にシンプルで、badgeクラスを持つ要素だけで構成されています。

    <span class="badge">32</span>

    バッジの色

    バッジはすべてのデフォルトカラーをサポートしています。

    <!-- 緑のバッジ -->
    <span class="badge color-green">32</span>
    
    <!-- 赤バッジ -->
    <span class="badge color-red">15</span>
    

    CSS Variables

    Below is the list of related CSS variables (CSS custom properties).

    :root {
      --f7-badge-text-color: #fff;
      --f7-badge-bg-color: #8e8e93;
      --f7-badge-padding: 0 4px;
      --f7-badge-in-icon-size: 16px;
      --f7-badge-in-icon-font-size: 10px;
      --f7-badge-font-weight: normal;
      --f7-badge-font-size: 12px;
    }
    .ios {
      --f7-badge-size: 20px;
      --f7-badge-font-weight: 600;
    }
    .md {
      --f7-badge-size: 18px;
      --f7-badge-font-weight: 500;
    }
    .aurora {
      --f7-badge-size: 18px;
      --f7-badge-font-weight: 600;
    }
    

    Examples

    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="title">Badge</div>
          <div class="right">
            <a class="link icon-only">
              <i class="icon f7-icons if-not-md">person_circle_fill
                <span class="badge color-red">5</span>
              </i>
              <i class="icon material-icons md-only">person
                <span class="badge color-red">5</span>
              </i>
            </a>
          </div>
        </div>
      </div>
      <div class="toolbar tabbar tabbar-labels toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#tab-1" class="tab-link tab-link-active">
            <i class="icon icon-fill f7-icons if-not-md">envelope_fill<span class="badge color-green">5</span></i>
            <i class="icon material-icons md-only">email<span class="badge color-green">5</span></i>
            <span class="tabbar-label">Inbox</span>
          </a>
          <a href="#tab-2" class="tab-link">
            <i class="icon f7-icons if-not-md">today<span class="badge color-red">7</span></i>
            <i class="icon material-icons md-only">today<span class="badge color-red">7</span></i>
            <span class="tabbar-label">Calendar</span>
          </a>
          <a href="#tab-3" class="tab-link">
            <i class="icon f7-icons if-not-md">cloud<span class="badge color-red">1</span></i>
            <i class="icon material-icons md-only">file_upload<span class="badge color-red">1</span></i>
            <span class="tabbar-label">Upload</span>
          </a>
        </div>
      </div>
      <div class="page-content">
        <div class="list">
          <ul>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Foo Bar</div>
                  <div class="item-after"><span class="badge">0</span></div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Ivan Petrov</div>
                  <div class="item-after"><span class="badge color-blue">CEO</span></div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">John Doe</div>
                  <div class="item-after"><span class="badge color-green">5</span></div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">Jane Doe</div>
                  <div class="item-after"><span class="badge color-orange">NEW</span></div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>