Skip to main content

Бейдж

Навігація

Бейдж

Бейджі використовуються для відображення/позначення чисел і міток на різних елементах вашого застосунку.

Макет бейджа

Бейджі мають надзвичайно простий макет, це просто елемент із класом ‘badge’:
<span class="badge">32</span>

Кольори бейджів

Бейджі підтримують усі кольори за замовчуванням:
<!-- Зелений бейдж -->
<span class="badge color-green">32</span>

<!-- Червоний  бейдж -->
<span class="badge color-red">15</span>

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {
  --t4-badge-text-color: #fff;
  --t4-badge-bg-color: #8e8e93;
  --t4-badge-padding: 0 4px;
  --t4-badge-in-icon-size: 16px;
  --t4-badge-in-icon-font-size: 10px;
  --t4-badge-font-weight: normal;
  --t4-badge-font-size: 12px;
}
.ios {
  --t4-badge-size: 20px;
  --t4-badge-font-weight: 600;
}
.md {
  --t4-badge-size: 18px;
  --t4-badge-font-weight: 500;
}
.aurora {
  --t4-badge-size: 18px;
  --t4-badge-font-weight: 600;
}

Приклади 

<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 t4-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 t4-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 t4-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 t4-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>

Techno4 Framework