Учебники

Материализация — Коллекции

Июль 26, 2018

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

Sr.No. Имя класса и описание
1

коллекция

Устанавливает контейнер div или ul как коллекцию.

2

коллекторно-пункт

Устанавливает элемент a или li как элемент коллекции.

3

активный

Показывает элемент a или li как активный элемент коллекции.

4

с-заголовка

Отмечает коллекцию, чтобы иметь заголовок.

5

Сбор заголовка

Устанавливает элемент a или li в качестве заголовка коллекции.

6

аватар

Устанавливает элемент a или li как элемент аватара.

7

неотстранимый

Позволяет убирать элементы коллекции. Работает только на устройствах с сенсорным экраном.

коллекция

Устанавливает контейнер div или ul как коллекцию.

коллекторно-пункт

Устанавливает элемент a или li как элемент коллекции.

активный

Показывает элемент a или li как активный элемент коллекции.

с-заголовка

Отмечает коллекцию, чтобы иметь заголовок.

Сбор заголовка

Устанавливает элемент a или li в качестве заголовка коллекции.

аватар

Устанавливает элемент a или li как элемент аватара.

неотстранимый

Позволяет убирать элементы коллекции. Работает только на устройствах с сенсорным экраном.

пример

В следующем примере демонстрируется использование классов коллекций для демонстрации создания различных типов коллекций.

materialize_collections.htm 

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Collections Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">       
      <h3>Simple Collection</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item">HTML 5</li>
         <li class = "collection-item">JQuery</li>
         <li class = "collection-item">JavaScript</li>
         <li class = "collection-item">CSS</li>
      </ul>
      
      <h3>Collection of Links</h3><hr/>
      <div class = "collection">
         <a href = "#" class = "collection-item">HTML 5</a>
         <a href = "#!" class = "collection-item active">JQuery</a>
         <a href = "#!" class = "collection-item">JavaScript</a>
         <a href = "#!" class = "collection-item">CSS</a>
      </div>
      
      <h3>Collection with Header</h3><hr/>
      <ul class = "collection with-header">
         <li class = "collection-header"><h3>Front End Technologies</h3></li>
         <li class = "collection-item">HTML 5</li>
         <li class = "collection-item">JQuery</li>
         <li class = "collection-item">JavaScript</li>
         <li class = "collection-item">CSS</li>
      </ul>
      
      <h3>Collection with Secondary Content</h3><hr/>
      <ul class = "collection">         
         <li class = "collection-item">
            <div>HTML 5<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>JQuery<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>JavaScript<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>CSS<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
      </ul>
      
      <h3>Collection with Avatar</h3><hr/>
      <ul class = "collection">         
         <li class = "collection-item avatar">
            <img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg" class = "circle">
            <span class = "title">HTML5</span>
            <p>HTML5 is the next major revision of the HTML standard superseding
               HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for
               structuring and presenting content on the World Wide Web.</p>
            <a href = "#!" class = "secondary-content"><i class = "material-icons">
               grade</i></a>
         </li>
         
         <li class = "collection-item avatar">
            <i class = "material-icons circle green">insert_chart</i>
            <span class = "title">HighCharts</span>
            <p></p>
            <a href = "#!" class = "secondary-content"><i class = "material-icons">
               grade</i></a>
         </li>
      </ul>
      
      <h3>Collection with dismissible content</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item dismissable">HTML 5</li>
         <li class = "collection-item dismissable">JQuery</li>
         <li class = "collection-item dismissable">JavaScript</li>
         <li class = "collection-item dismissable">CSS</li>
      </ul>
   </body>   
</html>

Результат

Проверьте результат.

40
Share: