2. SIMAI Framework - Универсальная веб-платформа для создания интерфейса информационных систем
  3. UI
  4. Компоненты

Список групп

Список групп - это гибкий и мощный компонент для отображения серии контента. Элементы списка групп могут измененяться и расширяться, чтобы поддерживать практически любой контент внутри. Они также могут использоваться в качестве навигации с правым классом-модификатором.

Основной пример

Самым базовым является простой список группы с ненумерованными пунктами и собственными классами. Добавляйте к нему опции, как показано ниже, или при необходимости добавляйте собственные стили CSS.

  • Понедельник
  • Вторник
  • Среда
  • Четверг
  • Пятница
<ul class="list-group">
  <li class="list-group-item">Понедельник</li>
  <li class="list-group-item">Вторник</li>
  <li class="list-group-item">Среда</li>
  <li class="list-group-item">Четверг</li>
  <li class="list-group-item">Пятница</li>
</ul>

Активные элементы

Добавьте .active к .list-group-item для отображения текущего активного выбора.

  • Понедельник
  • Вторник
  • Среда
  • Четверг
  • Пятница
<ul class="list-group">
  <li class="list-group-item active">Понедельник</li>
  <li class="list-group-item">Вторник</li>
  <li class="list-group-item">Среда</li>
  <li class="list-group-item">Четверг</li>
  <li class="list-group-item">Пятница</li>
</ul>

Отключенные элементы

Добавьте .disabled к .list-group-item, чтобы он выглядел отключенным. Обратите внимание, что некоторые элементы с .disabled также требуют, чтобы пользовательский JavaScript полностью отключил их события клика (например, ссылки).

  • Понедельник
  • Вторник
  • Среда
  • Четверг
  • Пятница
<ul class="list-group">
  <li class="list-group-item disabled">Понедельник</li>
  <li class="list-group-item">Вторник</li>
  <li class="list-group-item">Среда</li>
  <li class="list-group-item">Четверг</li>
  <li class="list-group-item">Пятница</li>
</ul>

Используйте <a>s или <button>s для создания настраиваемых элементов списка групп с наведением, отключением и активными состояниями путем добавления .list-group-item-action. Мы разделяем эти псевдоклассы, чтобы гарантировать, что списки групп, созданные из неинтерактивных элементов, таких как <li>s или <div>s, не предоставляют возможность кликать или касаться.

Не используйте здесь стандартные классы .btn.

Понедельник Вторник Среда Четверг Пятница 
<div class="list-group">
  <a href="#" class="list-group-item active">
    Понедельник
  </a>
  <a href="#" class="list-group-item list-group-item-action">Вторник</a>
  <a href="#" class="list-group-item list-group-item-action">Среда</a>
  <a href="#" class="list-group-item list-group-item-action">Четверг</a>
  <a href="#" class="list-group-item list-group-item-action disabled">Пятница</a>
</div>

С <button>s вы также можете использовать атрибут disabled вместо класса .disabled. К сожалению, <a>s не поддерживает атрибут disabled.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Понедельник
  </button>
  <button type="button" class="list-group-item list-group-item-action">Вторник</button>
  <button type="button" class="list-group-item list-group-item-action">Среда</button>
  <button type="button" class="list-group-item list-group-item-action">Четверг</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Пятница</button>
</div>

Контекстные классы

Используйте контекстные классы для стилизации элементов списка с сохранением состояния фона и цвета

  • Понедельник
  • Вторник
  • Среда
  • Четверг
  • Пятница
<ul class="list-group">
  <li class="list-group-item">Вторник</li>
  <li class="list-group-item list-group-item-success">Вторник</li>
  <li class="list-group-item list-group-item-info">Среда</li>
  <li class="list-group-item list-group-item-warning">Четверг</li>
  <li class="list-group-item list-group-item-danger">Пятница</li>
</ul>

Контекстные классы также работают с .list-group-item-action. Обратите внимание на добавление здесь стилей наведения не представленных в предыдущем примере. Также поддерживается состояние .active. Примените его, чтобы указать активный выбор в элементе контекстного списка групп.

Понедельник Вторник Среда Четверг Пятница 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Вторник</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Вторник</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Среда</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Четверг</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Пятница</a>
</div>

Передача значения ассистивным технологиям

Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передаваться пользователям ассистивных технологий - таких как screen readers (программы для чтения экрана). Убедитесь, что информация, выделенная цветом, либо очевидна из самого содержания (например, видимый текст), либо включается с помощью альтернативных средств, таких как дополнительный текст, скрытый классом .sr-only.

Со значками

Добавьте значки в любой элемент списка групп, чтобы показывать непрочитанные счетчики, активность и т.д. с помощью некоторых утилит. Обратите внимание на justify-content-between utility class и размещение значка.

  • Понедельник 14
  • Вторник 2
  • Среда 1 
<ul class="list-group">
  <li class="list-group-item justify-content-between">
    Понедельник
    <span class="badge badge-default badge-pill">14</span>
  </li>
  <li class="list-group-item justify-content-between">
    Вторник
    <span class="badge badge-default badge-pill">2</span>
  </li>
  <li class="list-group-item justify-content-between">
    Среда
    <span class="badge badge-default badge-pill">1</span>
  </li>
</ul>

Настраиваемое содержимое

Добавляйте практически любой HTML, даже для связанного списка групп, как показано ниже с помощью flexbox утилиты.

Список групп с заголовками пунктов
3 дня назад

Таким образом постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание новых предложений.

Постоянное информационно-пропагандистское обеспечение.
Список групп с заголовками пунктов
3 дня назад

Постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание новых предложений.

Постоянное информационно-пропагандистское обеспечение.
Список групп с заголовками пунктов
3 дня назад

Постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание новых предложений.

Постоянное информационно-пропагандистское обеспечение. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Список групп  с заголовками пунктов</h5>
      <small>3 дня назад</small>
    </div>
    <p class="mb-1">Постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание новых предложений.</p>
    <small>Постоянное информационно-пропагандистское обеспечение .</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Список групп  с заголовками пунктов</h5>
      <small class="text-muted">3 дня назад</small>
    </div>
    <p class="mb-1">Постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание новых предложений.</p>
    <small class="text-muted">Постоянное информационно-пропагандистское обеспечение .</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Список групп  с заголовками пунктов</h5>
      <small class="text-muted">3 дня назад</small>
    </div>
    <p class="mb-1">Постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание новых предложений.</p>
    <small class="text-muted">Постоянное информационно-пропагандистское обеспечение .</small>
  </a>
</div>