マテリアライズ-コレクション
マテリアライズは、さまざまなタイプのコレクションを表す特別なクラスを提供します。コレクションは、関連する情報アイテムのグループを表します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | collection divまたはulコンテナをコレクションとして設定します。 |
| 2 | collection-item aまたはliアイテムをコレクションアイテムとして設定します。 |
| 3 | active aまたはliアイテムをアクティブなコレクションアイテムとして表示します。 |
| 4 | with-header コレクションにヘッダーがあることを示します。 |
| 5 | collection-header aまたはliアイテムをコレクションヘッダーとして設定します。 |
| 6 | avatar aまたはliアイテムをアバターアイテムとして設定します。 |
| 7 | dismissible コレクションアイテムをスワイプして削除できるようにします。タッチスクリーンデバイスでのみ動作します。 |
例
次の例は、コレクションクラスを使用して、さまざまなタイプのコレクションを作成する方法を示しています。
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>結果
結果を確認します。