Сайт веб-мастера Александра Климова
Меню

Material Design Lite. Списки

Списки основаны на стандартных элементах ul и li.

Класс MDL Эффект Примечание
mdl-list Определяет контейнер как список
mdl-list__item Определяет отдельный элемент списка Обязательный
mdl-list__item--two-line Определяет отдельный элемент списка в две строки Необязательный; используется в двухстрочных элементах
mdl-list__item--three-line Определяет отдельный элемент списка в три строки Необязательный; используется в трёхстрочных элементах
mdl-list__item-primary-content Определяет главное содержание в элементе списка
mdl-list__item-avatar Определяет аватар в элементе списка
mdl-list__item-icon Определяет значок в элементе списка
mdl-list__item-secondary-content Определяет вторичное содержание в элементе списка Обязателен при использовании mdl-list__item-two-line или mdl-list__item-three-line
mdl-list__item-secondary-info Определяет информацию Обязателен при использовании mdl-list__item-two-line или mdl-list__item-three-line
mdl-list__item-secondary-action Определяет действие Обязателен при использовании mdl-list__item-two-line или mdl-list__item-three-line
mdl-list__item-text-body Определяет текстовое поле Обязателен при использовании mdl-list__item-three-line

Как создать компонент

Добавьте к внешнему контейнеру ul класс mdl-list.


<ul class="mdl-list">

</ul>

Внутри контейнера разместите элементы li с классом mdl-list__item.


<ul class='mdl-list'>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
  <li class="mdl-list__item"></li>
</ul>

Добавьте контент в элементы списка, используя подходящие классы.


<ul class='mdl-list'>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content"></span>
  </li>
</ul>

Компонент готов к использованию.

Простой список

  • Васька
  • Мурзик
  • Барсик 

<style>
.demo-list-item {
  width: 300px;
}
</style>

<ul class="demo-list-item mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      Васька
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      Мурзик
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      Барсик
    </span>
  </li>
</ul>

Список со значками

  • pets Васька
  • pets Мурзик
  • pets Барсик 

<style>
.demo-list-icon {
  width: 300px;
}
</style>

<ul class="demo-list-icon mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
    <i class="material-icons mdl-list__item-icon">pets</i>
    Васька
</span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
    <i class="material-icons mdl-list__item-icon">pets</i>
    Мурзик
  </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
    <i class="material-icons mdl-list__item-icon">pets</i>
    Барсик
  </span>
  </li>
</ul>

Список с аватарами и кнопками действия

pets Мурзик star
person Васька star
person Барсик star 

<style>
.demo-list-action {
  width: 300px;
}
</style>

<div class="demo-list-action mdl-list">
  <div class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">pets</i>
      <span>Мурзик</span>
    </span>
    <a class="mdl-list__item-secondary-action" href="../material-design-lite.php"><i class="material-icons">star</i></a>
  </div>
  <div class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Васька</span>
    </span>
    <a class="mdl-list__item-secondary-action" href="../material-design-lite.php"><i class="material-icons">star</i></a>
  </div>
  <div class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Барсик</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="../material-design-lite.php"><i class="material-icons">star</i></a>
  </span>
  </div>
</div>

Списки с аватарами и элементами управления

  • person Рыжик
  • person Васька
  • person Мурзик 

<style>
.demo-list-control {
  width: 300px;
}

.demo-list-radio {
  display: inline;
}
</style>

<ul class="demo-list-control mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      Рыжик
    </span>
    <span class="mdl-list__item-secondary-action">
      <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
        <input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked />
      </label>
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      Васька
    </span>
      <span class="mdl-list__item-secondary-action">
        <label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-1">
          <input type="radio" id="list-option-1" class="mdl-radio__button" name="options" value="1" checked />
        </label>
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      Мурзик
    </span>
      <span class="mdl-list__item-secondary-action">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="list-switch-1">
          <input type="checkbox" id="list-switch-1" class="mdl-switch__input" checked />
        </label>
    </span>
  </li>
</ul>

Двухстрочный список с кнопкой действия

  • person Васька Маршал Actor star
  • person Мурзик Генерал star
  • person Барсик Настоящий полковник star 

<style>
.demo-list-two {
  width: 300px;
}
</style>

<ul class="demo-list-two mdl-list">
  <li class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Васька</span>
      <span class="mdl-list__item-sub-title">Маршал</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <span class="mdl-list__item-secondary-info">Actor</span>
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
  <li class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Мурзик</span>
      <span class="mdl-list__item-sub-title">Генерал</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
  <li class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Барсик</span>
      <span class="mdl-list__item-sub-title">Настоящий полковник</span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
</ul>

Трёхстрочный список с кнопками действия

  • person Bryan Cranston Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle. star
  • person Aaron Paul Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie. star
  • person Bob Odenkirk Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul". star 

<style>
.demo-list-three {
  width: 650px;
}
</style>

<ul class="demo-list-three mdl-list">
  <li class="mdl-list__item mdl-list__item--three-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons mdl-list__item-avatar">person</i>
      <span>Bryan Cranston</span>
      <span class="mdl-list__item-text-body">
        Bryan Cranston played the role of Walter in Breaking Bad. He is also known
        for playing Hal in Malcom in the Middle.
      </span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
  <li class="mdl-list__item mdl-list__item--three-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      <span>Aaron Paul</span>
      <span class="mdl-list__item-text-body">
        Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
        the "Need For Speed" Movie.
      </span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
  <li class="mdl-list__item mdl-list__item--three-line">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">person</i>
      <span>Bob Odenkirk</span>
      <span class="mdl-list__item-text-body">
        Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
        character, Bob stars in his own show now, called "Better Call Saul".
      </span>
    </span>
    <span class="mdl-list__item-secondary-content">
      <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
    </span>
  </li>
</ul>

Вернуться на общую страницу Material Design Lite

Реклама