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

Ayırıcı

Ayırıcılar, içeriğe daha iyi bir görsel efekt ve alan hissi vermek için liste ve sayfa düzenindeki içeriği yönetmek ve ayırmak için kullanılır.

Kullanım

Ayırıcılar saf CSS ile yazılmıştır, etkili olması için sadece HTML kodu yazmanız yeterlidir.

Renkler

Koyu renk ayırıcı, açık renkli arka planlar için
Açık renk ayırıcı, koyu renkli arka planlar için
Renkleri otomatik olarak ayarlayan ayırıcı, sayfa temasına göre otomatik olarak koyu veya açık renge ayarlanır

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Ayırıcı

Stil

Tam genişlikte ayırıcı

Tam genişlikte ayırıcılar %100 genişlik kaplar. Kullanılabilecek sınıf adları şunlardır:

mdui-divider: Varsayılan temada koyu, koyu temada ise açık renktedir.
mdui-divider-light: Koyu renkli arka planlarda kullanılan açık renkli ayırıcı.
mdui-divider-dark: Açık renkli arka planlarda kullanılan koyu renkli ayırıcı.

Örnek

<div class="mdui-divider"></div>

İçeriden başlayan ayırıcı (inset)

İçeriden başlayan ayırıcı soldan 72px mesafeye sahiptir ve genellikle avatar veya simge içeren listelerde kullanılır. Kullanılabilecek sınıf adları şunlardır:

mdui-divider-inset: Varsayılan temada koyu, koyu temada ise açık renktedir.
mdui-divider-inset-light: Koyu renkli arka planlarda kullanılan açık renkli ayırıcı.
mdui-divider-inset-dark: Açık renkli arka planlarda kullanılan koyu renkli ayırıcı.

Örnek

<div class="mdui-divider-inset"></div>

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-divider`	Bir ayırıcı tanımlar. Varsayılan temada koyu, koyu temada ise açık renktedir.
`.mdui-divider-light`	Koyu renkli arka planlar için açık renkli bir ayırıcı tanımlar.
`.mdui-divider-dark`	Açık renkli arka planlar için koyu renkli bir ayırıcı tanımlar.
`.mdui-divider-inset`	İçeriden başlayan bir ayırıcı tanımlar. Varsayılan temada koyu, koyu temada ise açık renktedir.
`.mdui-divider-inset-light`	Koyu renkli arka planlar için açık renkli, içeriden başlayan bir ayırıcı tanımlar.
`.mdui-divider-inset-dark`	Açık renkli arka planlar için koyu renkli, içeriden başlayan bir ayırıcı tanımlar.

Seçim Kutusu

Collapse Paneli