グリッドリスト

グリッドリストは一連のセルで構成され、通常はアルバムの表示に使用されます。グリッドレイアウトシステムと組み合わせてレイアウトを行うことができます。

使用方法

グリッドリストコンポーネントは純粋な CSS で記述されており、HTML を書くだけで有効になります。

スタイル

基本スタイル

例

<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
</div>

アクションバーテキスト

例

<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

アクションバーには 2 行のテキストを含めることができます。

例

<div class="mdui-grid-tile">
  <a href="javascript:;"><img src="card.jpg"/></a>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
      <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
    </div>
  </div>
</div>

アクションバーボタン

例

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
      <div class="mdui-grid-tile-subtitle"><i class="mdui-icon material-icons">grid_on</i>Ellie Goulding</div>
    </div>
    <div class="mdui-grid-tile-buttons">
      <button class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">star_border</i></button>
    </div>
  </div>
</div>

アクションバースタイル

.mdui-grid-tile-actions にクラス .mdui-grid-tile-actions-top を追加すると、アクションバーがセルの上部に配置されます。

例

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-top">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

.mdui-grid-tile-actions にクラス .mdui-grid-tile-actions-transparent を追加すると、アクションバーの背景が透明になります。

例

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-transparent">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

.mdui-grid-tile-actions にクラス .mdui-grid-tile-actions-gradient を追加すると、アクションバーの背景がグラデーションになります。

例

<div class="mdui-grid-tile">
  <img src="card.jpg"/>
  <div class="mdui-grid-tile-actions mdui-grid-tile-actions-gradient">
    <div class="mdui-grid-tile-text">
      <div class="mdui-grid-tile-title">Halcyon Days</div>
    </div>
  </div>
</div>

グリッドシステムを利用したレイアウト

等分割カラムの .mdui-row-* にクラス .mdui-grid-list を追加すると、セル間の間隔が 4px に調整されます。

例

<div class="mdui-row-xs-3 mdui-row-sm-4 mdui-row-md-5 mdui-row-lg-6 mdui-row-xl-7 mdui-grid-list">
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
  <div class="mdui-col">
    <div class="mdui-grid-tile">
      <img src="card.jpg"/>
    </div>
  </div>
</div>

CSS クラス一覧

クラス名	説明
`.mdui-grid-tile`	グリッドリストのタイルを定義します。
`.mdui-grid-tile-actions`	タイル内のアクションバーを定義します。
`.mdui-grid-tile-actions-top`	アクションバーをタイルの上部に配置します。
`.mdui-grid-tile-actions-transparent`	アクションバーの背景を透明にします。
`.mdui-grid-tile-actions-gradient`	アクションバーの背景をグラデーションにします。
`.mdui-grid-tile-text`	タイルアクションバー内のテキストを定義します。
`.mdui-grid-tile-title`	タイルアクションバーテキスト内のタイトルを定義します。
`.mdui-grid-tile-subtitle`	タイルアクションバーテキスト内のサブタイトルを定義します。
`.mdui-grid-tile-buttons`	タイルアクションバー内のボタン領域を定義します。
`.mdui-grid-list`	グリッドリストを定義します。グリッドレイアウトシステムと組み合わせて使用します。

リストコントロール

タブ