ListSeznam

Seznam je vertikálně uspořádaný seznam pro zobrazování textu nebo obrázků, který uživatelům usnadňuje rychlé procházení a přístup k souvisejícím informacím.

Způsob použití

Importujte komponenty podle potřeby:

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

Importujte TypeScript typy komponent podle potřeby:

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říklad použití:

Podnadpis

Položka 1

Položka 2

<mdui-list>
  <mdui-list-subheader>Podnadpis</mdui-list-subheader>
  <mdui-list-item>Položka 1</mdui-list-item>
  <mdui-list-item>Položka 2</mdui-list-item>
</mdui-list>

Ve výchozím nastavení se hlavní i vedlejší text zobrazí celý bez ohledu na délku. Omezení počtu řádků pro hlavní a vedlejší text můžete nastavit pomocí atributů headline-line a description-line, maximálně na 3 řádky.

Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text
    <span slot="description">Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text</span>
  </mdui-list-item>
</mdui-list>

Zdrojový kód

Obsah po stranách

Nastavením atributů icon a end-icon na komponentě <mdui-list-item> můžete přidat ikony Material Icons na levou a pravou stranu položky seznamu.

Hlavní text

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Hlavní text</mdui-list-item>
</mdui-list>

Zdrojový kód

Lze také přidat prvky na levou a pravou stranu položky seznamu pomocí slotů icon a end-icon.

Hlavní text

<mdui-list>
  <mdui-list-item>
    Hlavní text
    <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>

Zdrojový kód

Odkaz

Nastavením atributu href můžete změnit položku seznamu na odkaz. Pak můžete také použít atributy související s odkazy: download, target, rel.

Hlavní text

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

Zdrojový kód

Zakázaný stav

Přidáním atributu disabled na komponentu <mdui-list-item> zakážete tuto položku seznamu. Tím se zakážou také komponenty jako checkbox, radio, switch v položce seznamu.

Hlavní text

<mdui-list>
  <mdui-list-item disabled>Hlavní text</mdui-list-item>
  <mdui-list-item>Hlavní text</mdui-list-item>
</mdui-list>

Zdrojový kód

Aktivní stav

Přidáním atributu active na komponentu <mdui-list-item> aktivujete tuto položku seznamu.

Hlavní text

<mdui-list>
  <mdui-list-item active>Hlavní text</mdui-list-item>
  <mdui-list-item>Hlavní text</mdui-list-item>
</mdui-list>

Zdrojový kód

Neklikatelný stav

Přidáním atributu nonclickable na komponentu <mdui-list-item> odstraníte efekt při najetí myší a efekt vlnky při kliknutí na položce seznamu.

Hlavní text

<mdui-list>
  <mdui-list-item nonclickable>Hlavní text</mdui-list-item>
  <mdui-list-item>Hlavní text</mdui-list-item>
</mdui-list>

Zdrojový kód

Zaoblený tvar

Přidáním atributu rounded na komponentu <mdui-list-item> zobrazíte tuto položku seznamu se zaoblenými rohy.

Hlavní text

<mdui-list>
  <mdui-list-item rounded>Hlavní text</mdui-list-item>
  <mdui-list-item rounded>Hlavní text</mdui-list-item>
</mdui-list>

Zdrojový kód

Vertikální zarovnání

Nastavením atributu alignment na komponentě <mdui-list-item> můžete upravit zarovnání prvků na levé a pravé straně položky seznamu. Možné hodnoty jsou:

start: Zarovnání nahoru
center: Zarovnání na střed
end: Zarovnání dolů

Hlavní text

<mdui-list>
  <mdui-list-item alignment="start" description="Podpůrný text">
    Hlavní text
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Podpůrný text">
    Hlavní text
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Podpůrný text">
    Hlavní text
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

Zdrojový kód

Vlastní obsah

Použitím slotu custom v komponentě <mdui-list-item> můžete zcela přizpůsobit obsah položky seznamu.

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>

Zdrojový kód

`mdui-list-item` API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`headline`	`headline`	`string`	-
Hlavní text. Lze také nastavit pomocí výchozího slotu.
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
Počet řádků hlavního textu. Po překročení limitu se text zkrátí. Ve výchozím nastavení není omezen. Možné hodnoty: `1`: Zobrazí jeden řádek, přesahující text bude zkrácen. `2`: Zobrazí dva řádky, přesahující text bude zkrácen. `3`: Zobrazí tři řádky, přesahující text bude zkrácen.
`description`	`description`	`string`	-
Vedlejší text. Lze také nastavit pomocí `slot="description"`.
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
Počet řádků vedlejšího textu. Po překročení limitu se text zkrátí. Ve výchozím nastavení není omezen. Možné hodnoty: `1`: Zobrazí jeden řádek, přesahující text bude zkrácen. `2`: Zobrazí dva řádky, přesahující text bude zkrácen. `3`: Zobrazí tři řádky, přesahující text bude zkrácen.
`icon`	`icon`	`string`	-
Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí `slot="end-icon"`.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je tato položka seznamu zakázaná. Pokud je zakázaná, položka zešedne a prvky v ní, jako `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>`, budou také zakázané.
`active`	`active`	`boolean`	`false`
Určuje, zda je tato položka seznamu aktivní.
`nonclickable`	`nonclickable`	`boolean`	`false`
Určuje, zda má být položka seznamu neklikatelná. Po jejím nastavení zůstanou interaktivní prvky uvnitř (např. `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>`) funkční.
`rounded`	`rounded`	`boolean`	`false`
Určuje, zda se má použít položka seznamu se zaoblenými rohy.
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
Způsob vertikálního zarovnání položky seznamu. Možné hodnoty: `start`: Zarovnání nahoru. `center`: Zarovnání na střed. `end`: Zarovnání dolů.
`href`	`href`	`string`	-
Cílová URL odkazu. Pokud je tato vlastnost nastavena, komponenta se interně vykreslí jako prvek `<a>` a zpřístupní se vlastnosti pro odkazy.
`download`	`download`	`string`	-
Soubor ke stažení. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Způsob otevření odkazu. Možné hodnoty: `_blank`: Otevře odkaz v novém okně nebo kartě. `_parent`: Otevře odkaz v nadřazeném okně. `_self`: Výchozí možnost. Otevře odkaz ve stejném okně. `_top`: Otevře odkaz v celém okně. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Vztah mezi aktuálním dokumentem a odkazovaným dokumentem. Možné hodnoty: `alternate`: Alternativní verze aktuálního dokumentu. `author`: Autor aktuálního dokumentu nebo článku. `bookmark`: Trvalý odkaz na konkrétní část dokumentu. `external`: Odkaz vede na externí zdroj (mimo aktuální web/doménu). `help`: Odkaz na související nápovědu. `license`: Hlavní obsah aktuálního dokumentu je pokryt licencí odkazovaného dokumentu. `me`: Odkaz směřuje na profil vlastníka (rel="me"). `next`: Aktuální dokument je součástí série a odkazovaný dokument je následující v sérii. `nofollow`: Autor nebo vydavatel aktuálního dokumentu neschvaluje odkazovaný dokument. `noreferrer`: Neodesílá HTTP hlavičku `Referer`. Má podobný účinek jako `noopener`. `opener`: Pokud má odkaz atribut `target="_blank"`, atribut `rel="opener"` určuje, zda nové okno nebo karta bude mít přístup k původnímu oknu přes `window.opener`. `prev`: Aktuální dokument je součástí série a odkazovaný dokument je předchozí v sérii. `search`: Odkazuje na vyhledávací zdroj pro aktuální dokument a související stránky. `tag`: Poskytuje štítek vhodný pro aktuální dokument (identifikovaný danou adresou). Poznámka: Dostupné pouze při zadání atributu `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.

Metody

Název	Parametry	Vrací
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.

Slots

Název
(výchozí)
Hlavní text.
`description`
Vedlejší text.
`icon`
Prvek na levé straně položky seznamu.
`end-icon`
Prvek na pravé straně položky seznamu.
`custom`
Libovolný vlastní obsah.

CSS Parts

Název
`container`
Kontejner položky seznamu.
`icon`
Ikona na levé straně.
`end-icon`
Ikona na pravé straně.
`body`
Prostřední část.
`headline`
Hlavní nadpis.
`description`
Vedlejší nadpis.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů položky seznamu. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
`--shape-corner-rounded`
Velikost zaoblení rohů položky seznamu, pokud je zadán atribut `rounded`. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.

`mdui-list-subheader` API

Slots

Název
(výchozí)
Text podnadpisu seznamu.

`mdui-list` API

Slots

Název
(výchozí)
Prvky `<mdui-list-item>`.

Předchozí kapitola

LinearProgress Lineární indikátor průběhu

Další kapitola

Menu Nabídka

ListSeznam

Způsob použití

Příklady

Textový obsah

Obsah po stranách

Odkaz

Zakázaný stav

Aktivní stav

Neklikatelný stav

Zaoblený tvar

Vertikální zarovnání

Vlastní obsah

`mdui-list-item` API

Vlastnosti

Metody

Události

Slots

CSS Parts

CSS Custom Properties

`mdui-list-subheader` API

Slots

`mdui-list` API

Slots