Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Izgara Listesi

Izgara listesi, genellikle fotoğraf albümlerini görüntülemek için kullanılan bir dizi hücreden oluşur. Yerleşim için ızgara yerleşim sistemi ile birlikte kullanılabilir.

Kullanım

Izgara listesi bileşeni saf CSS ile yazılmıştır, çalışması için sadece HTML kodu yazmanız yeterlidir.

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Izgara listesi

Stil

Temel stiller

Örnek

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

İşlem çubuğu metni

Örnek

<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>

İşlem çubuğu iki satır metin içerebilir.

Örnek

<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>

İşlem çubuğu butonu

Örnek

<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>

İşlem çubuğu stili

.mdui-grid-tile-actions üzerine .mdui-grid-tile-actions-top sınıfı eklenerek işlem çubuğu hücrenin üstüne yerleştirilebilir.

Örnek

<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 üzerine .mdui-grid-tile-actions-transparent sınıfı eklenerek işlem çubuğunun şeffaf bir arka plana sahip olması sağlanabilir.

Örnek

<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 üzerine .mdui-grid-tile-actions-gradient sınıfı eklenerek işlem çubuğunun degrade bir arka plana sahip olması sağlanabilir.

Örnek

<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>

Düzen için ızgara sistemini kullanma

Eşit sütunlu .mdui-row-* üzerine .mdui-grid-list sınıfı eklenerek hücreler arasındaki boşluk 4px olarak ayarlanabilir.

Örnek

<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 Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-grid-tile`	Bir ızgara listesi kutucuğu (tile) tanımlar.
`.mdui-grid-tile-actions`	Kutucuktaki işlem çubuğunu tanımlar.
`.mdui-grid-tile-actions-top`	İşlem çubuğunun kutucuğun üstünde yer almasını sağlar.
`.mdui-grid-tile-actions-transparent`	İşlem çubuğuna şeffaf arka plan verir.
`.mdui-grid-tile-actions-gradient`	İşlem çubuğuna degrade arka plan verir.
`.mdui-grid-tile-text`	Kutucuk işlem çubuğundaki metni tanımlar.
`.mdui-grid-tile-title`	Kutucuk işlem çubuğu metni içindeki başlığı tanımlar.
`.mdui-grid-tile-subtitle`	Kutucuk işlem çubuğu metni içindeki alt başlığı tanımlar.
`.mdui-grid-tile-buttons`	Kutucuk işlem çubuğundaki buton alanını tanımlar.
`.mdui-grid-list`	Izgara listesini tanımlar. Izgara yerleşim sistemi ile birlikte kullanılır.

Liste Kontrolü

Sekme