ListItem

Ne zaman kullanılır

ListItem, tekrarlanan ve aynı yapıdaki satırlar içindir: ayar menüsü, kişi listesi, bildirimler, bir klasördeki dosyalar. Her satır bir konuyu tek bakışta anlatır ve çoğu zaman tek bir yere gider.

Ne zaman kullanılmaz

• Karşılaştırılacak kayıtlar için: Sütunlar ve sıralama gerekiyorsa Table ya da DataTable kullanın.
• Zengin içerik için: Birden çok bölümü ve işlemi olan içerik için Card kullanın; her satırı ayrı karta koymayın.
• Gezinti sekmeleri için: Aynı sayfanın görünümleri arasında geçiş için Tabs kullanın.
• Seçenek seçmek için: Bir değer seçtirmek için Select, RadioGroup ya da Checkbox kullanın; ListItem seçim durumu taşımaz.

Anatomi

1. Liste (ListItem.List): <ul>; isteğe bağlı ayırıcı çizgi (divided) ve giriş hareketi (animate).
2. Kök: Liste içinde <li>, dışında <div>. Boyut, seçili ve devre dışı durumunu veri özniteliği olarak taşır.
3. Satır: Kökün içindeki 8 px köşeli kutu. render verilirse bağlantı ya da düğme bu kutudur.
4. Başlangıç (ListItem.Leading): Avatar, simge ya da küçük resim.
5. İçerik (ListItem.Content): Başlık (ListItem.Title) ve alt metin (ListItem.Subtitle).
6. Bilgi (ListItem.Meta): Tarih ya da sayı gibi kısa bilgi.
7. Son (ListItem.Trailing): Rozet, simge ya da ayrı bir düğme.

Davranış

• Varsayılan satır durağandır; hiçbir etkileşim yoktur.
• render verilirse satır tek bir hedef olur. Üzerine gelince, basınca ve odakta renk tonlanır; yer değiştirme yoktur.
• selected geçerli satırı işaretler: yüzey, başlangıç ucunda çubuk ve aria-current="true". Düğme satırını gezinti için kullanın; açma-kapama düğmesi olarak kullanmayın.
• Varsayılan olarak başlık tek satır, alt metin iki satır gösterilir; taşan kısım üç nokta ile kesilir. truncate ikisini de tek satıra indirir. Önemli bir şey kesilmesin diye başlıkları kısa tutun.
• Etkileşimli satırda trailing içine bağlantı ya da düğme koymayın. Ayrı işlem gerekiyorsa satırı durağan bırakıp Button ekleyin.

Yönergeler

Bir satır, bir hedef

Satırın tamamı bir yeri açıyorsa içindeki başka işlem olmamalı. Ayrı işlem için satırı durağan bırakın.

• Ayarlar

  Düzenle

YapınSatır durağan; düzenle ayrı bir düğme.

• Ayarlar
  Düzenle

YapmayınTıklanabilir satırın içinde ikinci bir düğme: iç içe etkileşimli öğe.

Başlık kısa, ayrıntı alt metinde

Başlık satırı anlatsın; ayrıntıyı alt metne taşıyın.

BildirimlerE-posta ve uygulama

YapınKısa başlık, ayrıntı alt metinde.

Bildirimler, e-posta ve uygulama bildirimleri ve sessiz saatler

YapmayınTüm ayrıntı başlığa yazılmış.

Başlangıçta tek tür görsel

Bir listedeki satırlar aynı türde görsel kullanmalı.

• Kullanıcı 1
• Kullanıcı 2

YapınTüm satırlarda Avatar.

• Kullanıcı 1
• Kullanıcı 2

YapmayınAvatar ve simge karışık: başlıklar hizadan çıkıyor.

İçerik

• Başlığı cümle düzeninde, isim öbeği olarak yazın: “Bildirimler”, “Hesap ayarları”.
• Alt metin tek cümlelik bir ayrıntı olsun; başlığı tekrar etmesin.
• meta kısa kalsın: “Bugün”, “3 yeni”.
• Satırın bağlantı metni başlığın kendisidir; “Buraya tıklayın” yazmayın.
• Başlığı yazılı olan kişinin Avatar’ını decorative yapın; ad iki kez okunmasın.

İlgili bileşenler

• Avatar: Satırın başında kişi ya da şirket görseli için.
• Card: Zengin içerik ve işlem için.
• Button: Satırın ayrı işlemi için.
• Icon: Satırın başındaki ya da sonundaki simge için.