ListListe

Liste, metin veya resimleri görüntülemek için dikey olarak sıralanmış bir dizindir ve kullanıcıların ilgili bilgilere hızlıca göz atmasını ve erişmesini kolaylaştırır.

Kullanım Şekli

Bileşenleri ihtiyacınıza göre içe aktarın:

import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';

Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın:

import type { List } from 'mdui/components/list.js';
import type { ListItem } from 'mdui/components/list-item.js';
import type { ListSubheader } from 'mdui/components/list-subheader.js';

Kullanım örneği:

Alt Başlık

Öğe 1

Öğe 2

<mdui-list>
  <mdui-list-subheader>Alt Başlık</mdui-list-subheader>
  <mdui-list-item>Öğe 1</mdui-list-item>
  <mdui-list-item>Öğe 2</mdui-list-item>
</mdui-list>

Varsayılan olarak, ana metin ve ikincil metin, uzunlukları ne olursa olsun tamamen görüntülenir. headline-line ve description-line özniteliklerini ayarlayarak ana metin ve ikincil metin için satır sınırlaması ekleyebilirsiniz. En fazla 3 satır ile sınırlayabilirsiniz.

Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin Ana Metin
    <span slot="description">Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin Destekleyici metin</span>
  </mdui-list-item>
</mdui-list>

Kaynak Kodu

Kenar İçerikleri

<mdui-list-item> bileşeninde icon ve end-icon özniteliklerini ayarlayarak, liste öğesinin soluna ve sağına sırasıyla Material Icons simgeleri ekleyebilirsiniz.

Ana Metin

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Ana Metin</mdui-list-item>
</mdui-list>

Kaynak Kodu

Ayrıca icon ve end-icon slot'ları aracılığıyla da liste öğesinin soluna ve sağına öğeler ekleyebilirsiniz.

Ana Metin

<mdui-list>
  <mdui-list-item>
    Ana Metin
    <mdui-avatar slot="icon" src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
    <mdui-checkbox slot="end-icon"></mdui-checkbox>
  </mdui-list-item>
</mdui-list>

Kaynak Kodu

Bağlantı

href özniteliğini ayarlayarak liste öğesini bir bağlantıya dönüştürebilirsiniz. Bu durumda bağlantıyla ilgili şu öznitelikleri de kullanabilirsiniz: download, target, rel.

Ana Metin

<mdui-list>
  <mdui-list-item href="https://www.mdui.org" target="_blank">Ana Metin</mdui-list-item>
</mdui-list>

Kaynak Kodu

Devre Dışı Durumu

<mdui-list-item> bileşenine disabled özniteliğini ekleyerek o liste öğesini devre dışı bırakabilirsiniz. Bu durumda, liste öğesindeki onay kutusu, radyo butonu, anahtar (switch) gibi bileşenler de devre dışı kalacaktır.

Ana Metin

<mdui-list>
  <mdui-list-item disabled>Ana Metin</mdui-list-item>
  <mdui-list-item>Ana Metin</mdui-list-item>
</mdui-list>

Kaynak Kodu

Aktif Durumu

<mdui-list-item> bileşenine active özniteliğini ekleyerek o liste öğesini aktif hale getirebilirsiniz.

Ana Metin

<mdui-list>
  <mdui-list-item active>Ana Metin</mdui-list-item>
  <mdui-list-item>Ana Metin</mdui-list-item>
</mdui-list>

Kaynak Kodu

Tıklanamaz Durumu

<mdui-list-item> bileşenine nonclickable özniteliğini ekleyerek, liste öğesindeki fareyle üzerine gelme ve tıklama dalgası efektlerini kaldırabilirsiniz.

Ana Metin

<mdui-list>
  <mdui-list-item nonclickable>Ana Metin</mdui-list-item>
  <mdui-list-item>Ana Metin</mdui-list-item>
</mdui-list>

Kaynak Kodu

Yuvarlatılmış Köşe Şekli

<mdui-list-item> bileşenine rounded özniteliğini ekleyerek liste öğesinin yuvarlatılmış köşelere sahip olmasını sağlayabilirsiniz.

Ana Metin

<mdui-list>
  <mdui-list-item rounded>Ana Metin</mdui-list-item>
  <mdui-list-item rounded>Ana Metin</mdui-list-item>
</mdui-list>

Kaynak Kodu

Dikey Hizalama Şekli

<mdui-list-item> bileşeninde alignment özniteliğini ayarlayarak, liste öğesinin sol ve sağ kenarlarındaki öğelerin liste öğesine göre hizalamasını ayarlayabilirsiniz. Olası değerler:

start: Üst hizalama
center: Orta hizalama
end: Alt hizalama

Ana Metin

<mdui-list>
  <mdui-list-item alignment="start" description="Destekleyici metin">
    Ana Metin
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Destekleyici metin">
    Ana Metin
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Destekleyici metin">
    Ana Metin
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

Kaynak Kodu

Özel İçerik

<mdui-list-item> bileşeninde custom slot'unu kullanarak liste öğesinin içeriğini tamamen özelleştirebilirsiniz.

test

<mdui-list>
  <mdui-list-item>
    <div slot="custom" style="display: flex;">
      <mdui-icon name="people"></mdui-icon>
      <div>test</div>
    </div>
  </mdui-list-item>
</mdui-list>

Kaynak Kodu

`mdui-list-item` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`headline`	`headline`	`string`	-
Ana metin. Varsayılan slot ile de ayarlanabilir.
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
Ana metin satır sayısı. Sınır aşıldığında kesilir. Varsayılan olarak satır sınırı yoktur. Olası değerler: `1`: Tek satır gösterir, aşıldığında kesilir `2`: İki satır gösterir, aşıldığında kesilir `3`: Üç satır gösterir, aşıldığında kesilir
`description`	`description`	`string`	-
Alt metin. `slot="description"` ile de ayarlanabilir.
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
Alt metin satır sayısı. Sınır aşıldığında kesilir. Varsayılan olarak satır sınırı yoktur. Olası değerler: `1`: Tek satır gösterir, aşıldığında kesilir `2`: İki satır gösterir, aşıldığında kesilir `3`: Üç satır gösterir, aşıldığında kesilir
`icon`	`icon`	`string`	-
Soldaki Material Icons simge adı. `slot="icon"` ile de ayarlanabilir.
`end-icon`	`endIcon`	`string`	-
Sağdaki Material Icons simge adı. `slot="end-icon"` ile de ayarlanabilir.
`disabled`	`disabled`	`boolean`	`false`
Bu liste öğesinin devre dışı olup olmadığı. Devre dışı olduğunda liste öğesi grileşir ve içindeki `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` gibi öğeler de devre dışı olur.
`active`	`active`	`boolean`	`false`
Bu liste öğesinin etkin olup olmadığı.
`nonclickable`	`nonclickable`	`boolean`	`false`
Liste öğesinin tıklanamaz hale getirilip getirilmeyeceği. Ayarlandığında, liste öğesindeki `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` gibi öğeler yine de etkileşime açıktır.
`rounded`	`rounded`	`boolean`	`false`
Yuvarlak köşeli liste öğesi kullanılıp kullanılmayacağı.
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
Liste öğesinin dikey hizalama şekli. Olası değerler: `start`: Üste hizalı `center`: Ortaya hizalı `end`: Alta hizalı
`href`	`href`	`string`	-
Bağlantının hedef URL'si. Bu özellik ayarlandığında, bileşen dahili olarak bir `<a>` öğesi olarak işlenir ve bağlantı ile ilgili özellikler kullanılabilir hale gelir.
`download`	`download`	`string`	-
İndirme bağlantısının hedefi. Not: Bu özellik yalnızca `href` özelliği belirtildiğinde geçerlidir.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Bağlantının nasıl açılacağı. Olası değerler: `_blank`: Bağlantıyı yeni bir pencerede açar `_parent`: Bağlantıyı üst çerçevede açar `_self`: Varsayılan. Bağlantıyı aynı çerçevede açar `_top`: Bağlantıyı tam pencerede açar Not: Bu özellik yalnızca `href` özelliği belirtildiğinde geçerlidir.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Mevcut belge ile bağlantı verilen belge arasındaki ilişki. Olası değerler: `alternate`: Mevcut belgenin alternatif sürümü `author`: Mevcut belgenin veya makalenin yazarı `bookmark`: En yakın ata bölüm için kalıcı bağlantı `external`: Başvurulan belge, mevcut belgeyle aynı sitede değil `help`: İlgili yardım belgesine bağlantı `license`: Mevcut belgenin ana içeriği, başvurulan dosyanın telif hakkı lisansı kapsamındadır `me`: Mevcut belge, bağlantı içeriğinin sahibini temsil eder `next`: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir sonraki belgedir `nofollow`: Mevcut belgenin yazarı veya yayıncısı, başvurulan dosyayı onaylamaz `noreferrer`: `Referer` başlığını içermez. `noopener` etkisine benzer `opener`: Köprü, üst düzey bir gezinme bağlamı oluşturuyorsa (yani `target` özellik değeri `_blank` ise), yardımcı bir gezinme bağlamı oluşturur `prev`: Mevcut belge bir serinin parçasıdır ve başvurulan belge serideki bir önceki belgedir `search`: Mevcut dosya ve ilgili sayfalarda arama yapmak için kullanılabilecek bir kaynağa bağlantı sağlar `tag`: Mevcut belge için uygun bir etiket sağlar (belirtilen adres tarafından tanımlanır) Not: Yalnızca `href` özelliği belirtildiğinde kullanılabilir.
`autofocus`	`autofocus`	`boolean`	`false`
Sayfa yüklendikten sonra otomatik olarak odaklanıp odaklanmayacağı.
`tabindex`	`tabIndex`	`number`	-
Sekme tuşu ile odak geçişi yapılırken öğenin sırası.

Yöntemler

Ad	Parametreler	Dönüş Değeri
`click`		`void`
Öğeye fare tıklamasını simüle eder.
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
Odağı geçerli öğeye ayarlar. Parametre olarak bir nesne iletilebilir. Nesnenin özellikleri şunlardır: `preventScroll`: Varsayılan olarak, öğe odaklandıktan sonra sayfa, öğeyi görünüme getirmek için kayar. Sayfanın kaydırılmasını istemiyorsanız, bu özelliği `true` olarak ayarlayabilirsiniz.
`blur`		`void`
Odağı geçerli öğeden kaldırır.

Olaylar

Ad
`focus`
Odak alındığında tetiklenir.
`blur`
Odak kaybedildiğinde tetiklenir.

Slots

Ad
Varsayılan
Ana metin.
`description`
Alt metin.
`icon`
Liste öğesinin solundaki öğe.
`end-icon`
Liste öğesinin sağındaki öğe.
`custom`
Herhangi bir özel içerik.

CSS Parts

Ad
`container`
Liste öğesi kabı.
`icon`
Soldaki simge.
`end-icon`
Sağdaki simge.
`body`
Orta kısım.
`headline`
Ana başlık.
`description`
Alt başlık.

CSS Custom Property

Ad
`--shape-corner`
Liste öğesinin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.
`--shape-corner-rounded`
`rounded` özelliği belirtildiğinde liste öğesinin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.

`mdui-list-subheader` API

Slots

Ad
Varsayılan
Liste başlık metni.

`mdui-list` API

Slots

Ad
Varsayılan
`<mdui-list-item>` öğeleri.

Önceki Bölüm

LinearProgress Doğrusal İlerleme

Sonraki Bölüm

Menu Menü

ListListe

Kullanım Şekli

Örnekler

Metin İçeriği

Kenar İçerikleri

Bağlantı

Devre Dışı Durumu

Aktif Durumu

Tıklanamaz Durumu

Yuvarlatılmış Köşe Şekli

Dikey Hizalama Şekli

Özel İçerik

`mdui-list-item` API

Özellikler

Yöntemler

Olaylar

Slots

CSS Parts

CSS Custom Property

`mdui-list-subheader` API

Slots

`mdui-list` API

Slots