ListLista

A lista függőlegesen rendezett elemekből áll, és szöveges vagy képes tartalmak áttekinthető megjelenítésére szolgál, hogy a felhasználók gyorsabban böngészhessenek és könnyebben megtalálják a kapcsolódó információkat.

Használat

A komponensek importálása:

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

A komponensek TypeScript-típusainak importálása:

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

Példa:

Alcím

1. elem

2. elem

<mdui-list>
  <mdui-list-subheader>Alcím</mdui-list-subheader>
  <mdui-list-item>1. elem</mdui-list-item>
  <mdui-list-item>2. elem</mdui-list-item>
</mdui-list>

Példák

Szöveges tartalom

A <mdui-list-item> komponens headline attribútumával beállíthatja a listaelem fő szövegét, a description attribútumával pedig a leírást.

<mdui-list>
  <mdui-list-item headline="Címsor"></mdui-list-item>
  <mdui-list-item headline="Címsor" description="Leírás"></mdui-list-item>
</mdui-list>

Forrás

Az alapértelmezett slotban is megadhatja a fő szöveget, a description slotban pedig a leírást.

Címsor

Címsor Leírás

<mdui-list>
  <mdui-list-item>Címsor</mdui-list-item>
  <mdui-list-item>
    Címsor
    <span slot="description">Leírás</span>
  </mdui-list-item>
</mdui-list>

Forrás

Alapértelmezés szerint a fő szöveg és a kiegészítő szöveg teljes egészében megjelenik, függetlenül a hosszuktól. A headline-line és description-line attribútumok segítségével sorlimitet állíthat be a fő szöveg és a kiegészítő szöveg számára, maximum 3 sorig.

Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor Címsor
    <span slot="description">Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg Kísérő szöveg</span>
  </mdui-list-item>
</mdui-list>

Forrás

Két oldali tartalom

A <mdui-list-item> komponens icon és end-icon attribútumaival Material Icons ikonokat adhat a listaelem bal és jobb oldalán.

Címsor

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Címsor</mdui-list-item>
</mdui-list>

Forrás

Az icon és end-icon slotokon keresztül is hozzáadhat elemeket a listaelem bal és jobb oldalához.

Címsor

<mdui-list>
  <mdui-list-item>
    Címsor
    <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>

Forrás

Link

A href attribútummal a listaelem linkként is használható, és a linkhez kapcsolódó további attribútumokat is használhatja: download, target, rel.

Címsor

<mdui-list>
  <mdui-list-item href="https://www.mdui.org" target="_blank">Címsor</mdui-list-item>
</mdui-list>

Forrás

Letiltott állapot

A disabled attribútummal letilthatja a <mdui-list-item> komponenst. Ekkor a listaelemben lévő jelölőnégyzet, rádiógomb, kapcsoló stb. komponensek is letiltásra kerülnek.

Címsor

<mdui-list>
  <mdui-list-item disabled>Címsor</mdui-list-item>
  <mdui-list-item>Címsor</mdui-list-item>
</mdui-list>

Forrás

Aktív állapot

Az active attribútummal aktiválhatja a <mdui-list-item> komponenst.

Címsor

<mdui-list>
  <mdui-list-item active>Címsor</mdui-list-item>
  <mdui-list-item>Címsor</mdui-list-item>
</mdui-list>

Forrás

Nem kattintható állapot

A nonclickable attribútummal eltávolíthatja az egér fölé helyezés és a kattintási hullámzás hatását a listaelemről.

Címsor

<mdui-list>
  <mdui-list-item nonclickable>Címsor</mdui-list-item>
  <mdui-list-item>Címsor</mdui-list-item>
</mdui-list>

Forrás

Lekerekített alak

A rounded attribútummal lekerekített sarkokat adhat a listaelemnek.

Címsor

<mdui-list>
  <mdui-list-item rounded>Címsor</mdui-list-item>
  <mdui-list-item rounded>Címsor</mdui-list-item>
</mdui-list>

Forrás

Függőleges igazítás

A <mdui-list-item> komponens alignment attribútumával beállíthatja a listaelem bal és jobb oldalán lévő elemek igazítását a listaelemhez képest. Az érték a következő lehet:

start: Felső igazítás
center: Középre igazítás
end: Alsó igazítás

Címsor

<mdui-list>
  <mdui-list-item alignment="start" description="Kísérő szöveg">
    Címsor
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Kísérő szöveg">
    Címsor
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Kísérő szöveg">
    Címsor
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

Forrás

Egyéni tartalom

A <mdui-list-item> komponensben a custom slotban teljesen testreszabhatja a listaelem tartalmát.

teszt

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

Forrás

`mdui-list-item` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`headline`	`headline`	`string`	-
Fő szöveg. Beállítható az alapértelmezett slot-on keresztül is.
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
A fő szöveg sorainak száma, túllépés esetén csonkolva jelenik meg. Alapértelmezés szerint nincs korlátozva. Lehetséges értékek: `1`: Egysoros megjelenítés, túllépés esetén csonkolás `2`: Kétsoros megjelenítés, túllépés esetén csonkolás `3`: Háromsoros megjelenítés, túllépés esetén csonkolás
`description`	`description`	`string`	-
Kiegészítő szöveg. Beállítható a `slot="description"` segítségével is.
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
A kiegészítő szöveg sorainak száma, túllépés esetén csonkolva jelenik meg. Alapértelmezés szerint nincs korlátozva. Lehetséges értékek: `1`: Egysoros megjelenítés, túllépés esetén csonkolás `2`: Kétsoros megjelenítés, túllépés esetén csonkolás `3`: Háromsoros megjelenítés, túllépés esetén csonkolás
`icon`	`icon`	`string`	-
A bal oldali Material Icons ikon neve. Beállítható a `slot="icon"` segítségével is.
`end-icon`	`endIcon`	`string`	-
A jobb oldali Material Icons ikon neve. Beállítható a `slot="end-icon"` segítségével is.
`disabled`	`disabled`	`boolean`	`false`
A listaelem letiltása. Letiltott állapotban a listaelem szürkévé válik, és a benne lévő `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` stb. is letiltásra kerül.
`active`	`active`	`boolean`	`false`
A listaelem aktív-e.
`nonclickable`	`nonclickable`	`boolean`	`false`
A listaelem ne legyen kattintható. Beállítás után a listaelemben lévő `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` stb. továbbra is interaktív marad.
`rounded`	`rounded`	`boolean`	`false`
Lekerekített sarkú listaelem legyen-e.
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
A listaelem függőleges igazítása. Lehetséges értékek: `start`: Felülre igazítva `center`: Középre igazítva `end`: Alulra igazítva
`href`	`href`	`string`	-
A hivatkozás cél URL-je. Ha ez a tulajdonság meg van adva, a komponens belsőleg `<a>` elemként renderelődik, és használhatók lesznek a hivatkozásokhoz kapcsolódó attribútumok.
`download`	`download`	`string`	-
A letöltési hivatkozás célja. Megjegyzés: Csak akkor érvényes, ha a `href` attribútum meg van adva.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
A hivatkozás megnyitásának módja. A lehetséges értékek: `_blank`: Új ablakban nyitja meg a hivatkozást `_parent`: A szülő keretben nyitja meg a hivatkozást `_self`: Alapértelmezett. Az aktuális keretben nyitja meg a hivatkozást `_top`: A teljes ablakban nyitja meg a hivatkozást Megjegyzés: Csak akkor érvényes, ha a `href` attribútum meg van adva.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Az aktuális dokumentum és a hivatkozott dokumentum közötti kapcsolat. Lehetséges értékek: `alternate`: Az aktuális dokumentum alternatív verziója `author`: Az aktuális dokumentum vagy cikk szerzője `bookmark`: Állandó hivatkozás a legközelebbi ős szakaszra `external`: A hivatkozott dokumentum nem ugyanazon a webhelyen található, mint az aktuális dokumentum `help`: Hivatkozás egy kapcsolódó súgó dokumentumra `license`: Az aktuális dokumentum fő tartalmára a hivatkozott fájl szerzői jogi licenc vonatkozik `me`: Az aktuális dokumentum a hivatkozott tartalom tulajdonosát képviseli `next`: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat következő dokumentuma `nofollow`: Az aktuális dokumentum szerzője vagy kiadója nem vállal felelősséget a hivatkozott fájl tartalmáért `noreferrer`: Nem tartalmaz `Referer` fejlécet. Hasonló a `noopener` hatásához `opener`: Ha a hiperhivatkozás egy legfelső szintű böngészési kontextust hoz létre (azaz a `target` attribútum értéke `_blank`), akkor létrehoz egy segéd böngészési kontextust `prev`: Az aktuális dokumentum egy sorozat része, a hivatkozott dokumentum a sorozat előző dokumentuma `search`: Erőforrás-hivatkozást biztosít, amely az aktuális fájl és kapcsolódó oldalainak keresésére használható `tag`: Az aktuális dokumentumra alkalmazható címkét biztosít (amelyet a megadott cím azonosít) Megjegyzés: Csak akkor használható, ha a `href` attribútum meg van adva.
`autofocus`	`autofocus`	`boolean`	`false`
Automatikusan fókuszt kapjon-e betöltődés után.
`tabindex`	`tabIndex`	`number`	-
Az elem sorszáma a Tab billentyűvel történő navigálás során.

Metódusok

Név	Paraméterek	Visszatérési érték
`click`		`void`
Egérkattintás szimulálása az elemen.
`focus`	`options: FocusOptions` (Opcionális)	`void`
Fókusz állítása az aktuális elemre. Egy objektum is átadható paraméterként, a következő tulajdonságokkal: `preventScroll`: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot `true`-ra állítja, a görgetés elmarad.
`blur`		`void`
Fókusz eltávolítása az aktuális elemről.

Események

Név
`focus`
Fókusz elnyerésekor aktiválódik.
`blur`
Fókusz elvesztésekor aktiválódik.

Slots

Név
(alapértelmezett)
Fő szöveg.
`description`
Kiegészítő szöveg.
`icon`
A listaelem bal oldali eleme.
`end-icon`
A listaelem jobb oldali eleme.
`custom`
Bármilyen egyéni tartalom.

CSS Parts

Név
`container`
A listaelem konténere.
`icon`
Bal oldali ikon.
`end-icon`
Jobb oldali ikon.
`body`
A középső rész.
`headline`
Fő cím.
`description`
Alcím.

CSS egyéni tulajdonságok

Név
`--shape-corner`
A listaelem sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.
`--shape-corner-rounded`
A listaelem sarok lekerekítésének mérete, ha a `rounded` attribútum meg van adva. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.

`mdui-list-subheader` API

Slots

Név
(alapértelmezett)
A lista alcím szövege.

`mdui-list` API

Slots

Név
(alapértelmezett)
A `<mdui-list-item>` elemek.

Előző fejezet

LinearProgress Lineáris folyamatjelző

Következő fejezet

Menu Menü