ListLista

Lista to pionowo ułożony indeks wyświetlający tekst lub obrazy, ułatwiający szybkie przeglądanie i dostęp do powiązanych informacji.

Sposób użycia

Zaimportuj komponenty:

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

Zaimportuj typy TypeScript komponentów:

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

Przykład użycia:

Podnagłówek

Pozycja 1

Pozycja 2

<mdui-list>
  <mdui-list-subheader>Podnagłówek</mdui-list-subheader>
  <mdui-list-item>Pozycja 1</mdui-list-item>
  <mdui-list-item>Pozycja 2</mdui-list-item>
</mdui-list>

Domyślnie główny tekst i tekst pomocniczy są wyświetlane w całości, niezależnie od długości. Możesz ustawić atrybuty headline-line i description-line, aby ograniczyć liczbę wierszy odpowiednio dla głównego tekstu i tekstu pomocniczego, maksymalnie do 3 wierszy.

Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek
    <span slot="description">Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy</span>
  </mdui-list-item>
</mdui-list>

Źródło

Treść po bokach

Ustaw atrybuty icon i end-icon na komponencie <mdui-list-item>, aby dodać ikony Material Icons odpowiednio po lewej i prawej stronie elementu listy.

Nagłówek

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Nagłówek</mdui-list-item>
</mdui-list>

Źródło

Możesz również dodać elementy po lewej i prawej stronie elementu listy za pomocą slotów icon i end-icon.

Nagłówek

<mdui-list>
  <mdui-list-item>
    Nagłówek
    <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>

Źródło

Link

Ustawienie atrybutu href zmienia element listy w link. Dodatkowo możesz użyć atrybutów związanych z linkami: download, target, rel.

Nagłówek

<mdui-list>
  <mdui-list-item href="https://www.mdui.org" target="_blank">Nagłówek</mdui-list-item>
</mdui-list>

Źródło

Stan wyłączony

Dodanie atrybutu disabled do komponentu <mdui-list-item> wyłącza ten element listy. Spowoduje to również wyłączenie komponentów takich jak checkbox, radio, switch wewnątrz elementu listy.

Nagłówek

<mdui-list>
  <mdui-list-item disabled>Nagłówek</mdui-list-item>
  <mdui-list-item>Nagłówek</mdui-list-item>
</mdui-list>

Źródło

Stan aktywny

Dodanie atrybutu active do komponentu <mdui-list-item> aktywuje ten element listy.

Nagłówek

<mdui-list>
  <mdui-list-item active>Nagłówek</mdui-list-item>
  <mdui-list-item>Nagłówek</mdui-list-item>
</mdui-list>

Źródło

Stan nieklikalny

Dodanie atrybutu nonclickable do komponentu <mdui-list-item> usuwa efekt najechania kursorem i efekt fali po kliknięciu.

Nagłówek

<mdui-list>
  <mdui-list-item nonclickable>Nagłówek</mdui-list-item>
  <mdui-list-item>Nagłówek</mdui-list-item>
</mdui-list>

Źródło

Zaokrąglony kształt

Dodanie atrybutu rounded do komponentu <mdui-list-item> nadaje temu elementowi listy zaokrąglony kształt.

Nagłówek

<mdui-list>
  <mdui-list-item rounded>Nagłówek</mdui-list-item>
  <mdui-list-item rounded>Nagłówek</mdui-list-item>
</mdui-list>

Źródło

Wyrównanie w pionie

Ustaw atrybut alignment na komponencie <mdui-list-item>, aby dostosować wyrównanie elementów po lewej i prawej stronie względem elementu listy. Możliwe wartości:

start: Wyrównanie do góry
center: Wyrównanie do środka
end: Wyrównanie do dołu

Nagłówek

<mdui-list>
  <mdui-list-item alignment="start" description="Tekst pomocniczy">
    Nagłówek
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Tekst pomocniczy">
    Nagłówek
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Tekst pomocniczy">
    Nagłówek
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

Źródło

Niestandardowa treść

Użyj slotu custom w komponencie <mdui-list-item>, aby całkowicie dostosować treść elementu listy.

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>

Źródło

`mdui-list-item` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`headline`	`headline`	`string`	-
Tekst główny. Można również ustawić za pomocą domyślnego slotu
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
Liczba wierszy tekstu głównego, po przekroczeniu limitu tekst zostanie obcięty. Domyślnie brak ograniczenia liczby wierszy. Dozwolone wartości: `1`: Wyświetla jeden wiersz, po przekroczeniu obcina `2`: Wyświetla dwa wiersze, po przekroczeniu obcina `3`: Wyświetla trzy wiersze, po przekroczeniu obcina
`description`	`description`	`string`	-
Tekst dodatkowy. Można również ustawić za pomocą `slot="description"`
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
Liczba wierszy tekstu dodatkowego, po przekroczeniu limitu tekst zostanie obcięty. Domyślnie brak ograniczenia liczby wierszy. Dozwolone wartości: `1`: Wyświetla jeden wiersz, po przekroczeniu obcina `2`: Wyświetla dwa wiersze, po przekroczeniu obcina `3`: Wyświetla trzy wiersze, po przekroczeniu obcina
`icon`	`icon`	`string`	-
Nazwa ikony Material Icons po lewej stronie. Można również ustawić za pomocą `slot="icon"`
`end-icon`	`endIcon`	`string`	-
Nazwa ikony Material Icons po prawej stronie. Można również ustawić za pomocą `slot="end-icon"`
`disabled`	`disabled`	`boolean`	`false`
Określa, czy element listy jest wyłączony. Gdy jest wyłączony, staje się szary, a znajdujące się w nim kontrolki, takie jak `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>`, również zostaną wyłączone.
`active`	`active`	`boolean`	`false`
Określa, czy element listy jest aktywny.
`nonclickable`	`nonclickable`	`boolean`	`false`
Określa, czy element listy jest nieklikalny. Gdy jest ustawiony, znajdujące się w nim kontrolki, takie jak `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>`, pozostają interaktywne.
`rounded`	`rounded`	`boolean`	`false`
Określa, czy element listy ma zaokrąglone rogi.
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
Wyrównanie w pionie elementu listy. Dozwolone wartości: `start`: Wyrównanie do góry `center`: Wyrównanie do środka `end`: Wyrównanie do dołu
`href`	`href`	`string`	-
Docelowy adres URL łącza. Jeśli atrybut jest ustawiony, komponent jest renderowany jako element `<a>`, co umożliwia korzystanie z atrybutów dotyczących łączy.
`download`	`download`	`string`	-
Nazwa pliku do pobrania. Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Sposób otwarcia łącza. Dozwolone wartości: `_blank`: Otwiera w nowym oknie `_parent`: Otwiera w oknie nadrzędnym `_self`: Otwiera w bieżącej ramce `_top`: Otwiera w całym oknie Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości: `alternate`: Alternatywna wersja bieżącego dokumentu `author`: Autor bieżącego dokumentu lub artykułu `bookmark`: Stałe łącze do najbliższej sekcji nadrzędnej `external`: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument `help`: Łącze do powiązanej dokumentacji pomocy `license`: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku `me`: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze `next`: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji `nofollow`: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze `noreferrer`: Pomija nagłówek `Referer`. Efekt podobny do `noopener` `opener`: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu `target` to `_blank`), tworzy podrzędny kontekst przeglądania `prev`: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji `search`: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron `tag`: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu Uwaga: Dostępne tylko wtedy, gdy określono atrybut `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
`tabindex`	`tabIndex`	`number`	-
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).

Metody

Nazwa	Parametry	Zwraca
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`void`
Przenosi fokus na bieżący element. Można przekazać obiekt jako parametr, którego właściwości obejmują: `preventScroll`: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na `true`.
`blur`		`void`
Usuwa fokus z bieżącego elementu

Zdarzenia

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu

Slots

Nazwa
(domyślny)
Tekst główny
`description`
Tekst dodatkowy
`icon`
Element po lewej stronie elementu listy
`end-icon`
Element po prawej stronie elementu listy
`custom`
Dowolna niestandardowa treść

CSS Parts

Nazwa
`container`
Kontener elementu listy
`icon`
Ikona po lewej stronie
`end-icon`
Ikona po prawej stronie
`body`
Część środkowa
`headline`
Tekst główny
`description`
Tekst dodatkowy

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów elementu listy. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
`--shape-corner-rounded`
Wielkość zaokrąglenia rogów elementu listy, gdy określono atrybut `rounded`. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych

`mdui-list-subheader` API

Slots

Nazwa
(domyślny)
Tekst podnagłówka listy

`mdui-list` API

Slots

Nazwa
(domyślny)
Elementy `<mdui-list-item>`

Poprzedni rozdział

LinearProgress Liniowy wskaźnik postępu

Następny rozdział

Menu Menu

ListLista

Sposób użycia

Przykłady

Treść tekstowa

Treść po bokach

Link

Stan wyłączony

Stan aktywny

Stan nieklikalny

Zaokrąglony kształt

Wyrównanie w pionie

Niestandardowa treść

`mdui-list-item` API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts

Właściwości niestandardowe CSS

`mdui-list-subheader` API

Slots

`mdui-list` API

Slots