머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

그리드 목록

그리드 리스트는 일련의 타일로 구성되며 일반적으로 앨범을 표시하는 데 사용됩니다. 그리드 레이아웃 시스템과 연동하여 레이아웃을 구성할 수 있습니다.

호출 방식

그리드 리스트 컴포넌트는 순수 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>

액션 바는 두 줄의 텍스트를 포함할 수 있습니다.

예시

<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`	그리드 리스트를 정의합니다. 그리드 레이아웃 시스템과 함께 사용됩니다.

목록 컨트롤

탭