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

Liste

Listeler, birden fazla satırdaki öğeyi dikey bir düzen içinde görüntüler. Her satır öğesi simgeler, avatarlar, metinler vb. içerebilir.

Kullanım

Liste bileşeni saf CSS ile yazılmıştır, etkinleşmesi için sadece HTML kodu yazmanız yeterlidir.

Renkler

Arka plan rengi: şeffaf arka plan.

Metin rengi: açık temada siyah, koyu temada beyaz.

İlgili Okumalar

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

Stil

Düz metin

Bu en basit listedir.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>

Liste öğesi olarak bağlantıları kullanın.

Örnek

<div class="mdui-list">
  <a href="#" class="mdui-list-item mdui-ripple">Inbox</a>
  <a href="#" class="mdui-list-item mdui-ripple">Starred</a>
  <a href="#" class="mdui-list-item mdui-ripple">Send mail</a>
</div>

Simge

Liste simgeler içerebilir.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Simgeler listenin sağ tarafında olabilir.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Inbox</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Outbox</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Trash</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Spam</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
  </li>
</ul>

Boş bir simgeyi yer tutucu olarak kullanın.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Avatar

Liste avatarlar içerebilir.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">Brendan Lim</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">Grace Ng</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
    <div class="mdui-list-item-content">Kerem Suer</div>
  </li>
</ul>

Avatarlar listenin sağ tarafında olabilir.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Brendan Lim</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Grace Ng</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Kerem Suer</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
  </li>
</ul>

Hem avatar hem de simge içerir.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">Brendan Lim</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">Grace Ng</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
    <div class="mdui-list-item-content">Kerem Suer</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
</ul>

Avatar yerine simge kullanın.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">Photos</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">Recipes</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">assignment</i>
    <div class="mdui-list-item-content">Work</div>
  </li>
</ul>

Çok satırlı metin

Her liste öğesi en fazla 3 satır metin içerebilir, 3 satırdan fazla metin varsa, bunun yerine bir Kart kullanılmalıdır.

Varsayılan olarak metin yüksekliği sınırlı değildir, metin yüksekliği 3 satırı aşsa bile normal şekilde görüntülenir. Metin yüksekliğini sınırlamak için .mdui-list-item-title ve .mdui-list-item-text öğelerine sınıflar ekleyebilirsiniz:

Metni bir satır yüksekliğiyle sınırlamak için .mdui-list-item-one-line sınıfını ekleyin
Metni iki satır yüksekliğiyle sınırlamak için .mdui-list-item-two-line sınıfını ekleyin
Metni üç satır yüksekliğiyle sınırlamak için .mdui-list-item-three-line sınıfını ekleyin

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
    </div>
  </li>
</ul>

Ayırıcı

Listedeki ayırıcının üstünde ve altında 8px boşluk olacaktır.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-divider"></li>
  <li class="mdui-list-item mdui-ripple">All mail</li>
  <li class="mdui-list-item mdui-ripple">Trash</li>
</ul>

Ayırıcının üst ve alt boşluklarını kaldırın.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
      </div>
    </div>
  </li>
</ul>

Alt başlık

Bir listede alt başlık kullanıldığında, alt başlığın üstüne otomatik olarak bir ayırıcı eklenir.

Örnek

<ul class="mdui-list">
  <li class="mdui-subheader">Mail</li>
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Sent</li>
  <li class="mdui-subheader">Work</li>
  <li class="mdui-list-item mdui-ripple">Family</li>
  <li class="mdui-list-item mdui-ripple">Friends</li>
</ul>

İçe doğru çekilmiş alt başlık

Örnek

<ul class="mdui-list">
  <li class="mdui-subheader-inset">Friends</li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">Brendan Lim</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
  </li>
  <li class="mdui-subheader-inset">Family</li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">Grace Ng</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
    <div class="mdui-list-item-content">Kerem Suer</div>
  </li>
</ul>

Yoğun liste

Yoğun listenin öğeleri daha sıkışık olacaktır.

Örnek

<ul class="mdui-list mdui-list-dense">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Başka bir yoğun liste örneği.

Örnek

<ul class="mdui-list mdui-list-dense">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">
        <span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood doing errands this weekend. Do you want ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">
        <span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could come, but I'm out of town this weekend.
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">
        <span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris recommendations? Have you ever been?
      </div>
    </div>
  </li>
</ul>

Aktif durum

Aktif durumdaki öğelere bir arka plan rengi eklenir ve metin kalınlaştırılır.

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-list-item-active mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-list-item-active mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
      </div>
    </div>
  </li>
</ul>

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-list`	Listeyi tanımlar (gerekli)
`.mdui-list-dense`	Yoğun listeyi tanımlar
`.mdui-list-item`	Liste öğesini tanımlar (gerekli)
`.mdui-list-item-active`	Liste öğesini aktif duruma getirir
`.mdui-list-item-icon`	Liste öğesindeki simgeyi tanımlar
`.mdui-list-item-avatar`	Liste öğesindeki avatarı tanımlar
`.mdui-list-item-content`	Liste öğesinin içeriğini tanımlar
`.mdui-list-item-title`	Liste öğesi içeriğindeki başlığı tanımlar
`.mdui-list-item-text`	Liste öğesi içeriğindeki yardımcı metni tanımlar
`.mdui-list-item-one-line`	Metni bir satır yüksekliğine ayarlar
`.mdui-list-item-two-line`	Metni iki satır yüksekliğine ayarlar
`.mdui-list-item-three-line`	Metni üç satır yüksekliğine ayarlar

Daha fazla örnek

Dosya listesi

Örnek

<ul class="mdui-list">
  <li class="mdui-subheader-inset">Folders</li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Photos</div>
      <div class="mdui-list-item-text">Jan 9, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Recipes</div>
      <div class="mdui-list-item-text">Jan 17, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Work</div>
      <div class="mdui-list-item-text">Jan 28, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-subheader-inset">Files</li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-blue mdui-text-color-white">assignment</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Photos</div>
      <div class="mdui-list-item-text">Jan 9, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-yellow-600 mdui-text-color-white">assessment</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Kitchen remodel</div>
      <div class="mdui-list-item-text">Jan 10, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
</ul>

Kişiler

Örnek

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">phone</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">(650) 555-1234</div>
      <div class="mdui-list-item-text">Mobile</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">(323) 555-6789</div>
      <div class="mdui-list-item-text">Work</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">email</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">aliconnors@example.com</div>
      <div class="mdui-list-item-text">Personal</div>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">ali_connors@example.com</div>
      <div class="mdui-list-item-text">Work</div>
    </div>
  </li>
</ul>

Kaydırıcı

Liste Kontrolü