Skip to main content

Список контактів

Навігація

Список контактів

Списки контактів призначені для відображення списку особистих контактів людей.

Список контактів є окремим випадком згрупованого перегляду списку з однією відмінністю. Єдина відмінність полягає в тому, що нам потрібно додати додатковий клас contacts-list до елемента перегляду списку (<div class="list">).

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root .dark,
:root.dark {
  --t4-contacts-list-title-text-color: #fff;
}
.ios {
  --t4-contacts-list-title-font-size: inherit;
  --t4-contacts-list-title-font-weight: 600;
  --t4-contacts-list-title-height: 22px;
  --t4-contacts-list-title-text-color: #000;
  --t4-contacts-list-title-bg-color: #f7f7f7;
}
.ios .dark,
.ios.dark {
  --t4-contacts-list-title-bg-color: #323234;
}
.md {
  --t4-contacts-list-title-font-size: 20px;
  --t4-contacts-list-title-font-weight: 500;
  /*
  --t4-contacts-list-title-text-color: var(--t4-theme-color);
  */
  --t4-contacts-list-title-height: 48px;
  --t4-contacts-list-title-bg-color: transparent;
}
.aurora {
  --t4-contacts-list-title-font-weight: 600;
  --t4-contacts-list-title-text-color: #000;
  /*
  --t4-contacts-list-title-bg-color: var(--t4-list-group-title-bg-color);
  --t4-contacts-list-title-font-size: var(--t4-list-group-title-font-size);
  --t4-contacts-list-title-line-height: var(--t4-list-group-title-height);
  --t4-contacts-list-title-height: var(--t4-list-group-title-height);
  */
}

Приклад 

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Contacts List</div>
    </div>
  </div>
  <div class="page-content">
    <div class="list contacts-list">
      <div class="list-group">
        <ul>
          <li class="list-group-title">A</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Aaron</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Abbie</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Adam</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Adele</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Agatha</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Agnes</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Albert</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Alexander</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group">
        <ul>
          <li class="list-group-title">B</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Bailey</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Barclay</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Bartolo</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Bellamy</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Belle</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Benjamin</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group">
        <ul>
          <li class="list-group-title">C</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Caiden</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Calvin</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Candy</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Carl</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Cherilyn</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Chester</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Chloe</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group">
        <ul>
          <li class="list-group-title">V</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Vlad</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Techno4 Framework