List

Eine Liste ist eine vertikale Anordnung von Einträgen zur Darstellung von Text oder Bildern, die es dem Benutzer ermöglicht, schnell zu navigieren und relevante Informationen abzurufen.

Verwendung

Importieren Sie die Komponenten nach Bedarf:

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

Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:

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

Beispiel:

Unterüberschrift

Item 1

Item 2

<mdui-list>
  <mdui-list-subheader>Unterüberschrift</mdui-list-subheader>
  <mdui-list-item>Item 1</mdui-list-item>
  <mdui-list-item>Item 2</mdui-list-item>
</mdui-list>

Standardmäßig werden Haupt- und Nebentext unabhängig von ihrer Länge vollständig angezeigt. Sie können die Attribute headline-line und description-line verwenden, um die maximale Anzahl der Zeilen für Haupt- und Nebentext zu begrenzen (maximal 3 Zeilen).

Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift
    <span slot="description">Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text</span>
  </mdui-list-item>
</mdui-list>

Quellcode

Seitlicher Inhalt

Setzen Sie die Attribute icon und end-icon auf der <mdui-list-item>-Komponente, um links bzw. rechts vom Listenelement ein Material Icons-Symbol hinzuzufügen.

Überschrift

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Überschrift</mdui-list-item>
</mdui-list>

Quellcode

Sie können auch über die Slots icon und end-icon Elemente hinzufügen.

Überschrift

<mdui-list>
  <mdui-list-item>
    Überschrift
    <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>

Quellcode

Link

Setzen Sie das Attribut href, um das Listenelement in einen Link zu verwandeln. Sie können dann auch die Attribute download, target und rel verwenden.

Überschrift

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

Quellcode

Deaktivierter Zustand

Mit dem Attribut disabled auf der <mdui-list-item>-Komponente deaktivieren Sie das Listenelement. Dadurch werden auch Komponenten wie Checkbox, Radio, Switch innerhalb des Listenelements deaktiviert.

Überschrift

<mdui-list>
  <mdui-list-item disabled>Überschrift</mdui-list-item>
  <mdui-list-item>Überschrift</mdui-list-item>
</mdui-list>

Quellcode

Aktiver Zustand

Mit dem Attribut active auf der <mdui-list-item>-Komponente aktivieren Sie das Listenelement.

Überschrift

<mdui-list>
  <mdui-list-item active>Überschrift</mdui-list-item>
  <mdui-list-item>Überschrift</mdui-list-item>
</mdui-list>

Quellcode

Nicht anklickbarer Zustand

Mit dem Attribut nonclickable auf der <mdui-list-item>-Komponente entfernen Sie den Maus-Hover- und Klick-Wellen-Effekt.

Überschrift

<mdui-list>
  <mdui-list-item nonclickable>Überschrift</mdui-list-item>
  <mdui-list-item>Überschrift</mdui-list-item>
</mdui-list>

Quellcode

Abgerundete Form

Mit dem Attribut rounded auf der <mdui-list-item>-Komponente wird das Listenelement abgerundet dargestellt.

Überschrift

<mdui-list>
  <mdui-list-item rounded>Überschrift</mdui-list-item>
  <mdui-list-item rounded>Überschrift</mdui-list-item>
</mdui-list>

Quellcode

Vertikale Ausrichtung

Setzen Sie das Attribut alignment auf der <mdui-list-item>-Komponente, um die Ausrichtung der seitlichen Elemente relativ zum Listenelement festzulegen. Mögliche Werte sind:

start: Oben ausrichten
center: Zentriert ausrichten
end: Unten ausrichten

Überschrift

<mdui-list>
  <mdui-list-item alignment="start" description="Unterstützender Text">
    Überschrift
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Unterstützender Text">
    Überschrift
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Unterstützender Text">
    Überschrift
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

Quellcode

Benutzerdefinierter Inhalt

Verwenden Sie den Slot custom in der <mdui-list-item>-Komponente, um den Inhalt des Listenelements vollständig anzupassen.

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>

Quellcode

`mdui-list-item` API

Eigenschaften

Attribut	Property	Typ	Standard
`headline`	`headline`	`string`	-
Haupttext. Alternativ können Sie den Standard-Slot verwenden.
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
Maximale Anzahl von Zeilen für den Haupttext. Überlaufender Text wird abgeschnitten. Standard ist keine Begrenzung. Mögliche Werte: `1`: Einzeiliger Text, der bei Überlauf abgeschnitten wird. `2`: Zweizeiliger Text, der bei Überlauf abgeschnitten wird. `3`: Dreizeiliger Text, der bei Überlauf abgeschnitten wird.
`description`	`description`	`string`	-
Untertext. Alternativ können Sie `slot="description"` verwenden.
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
Maximale Anzahl von Zeilen für den Untertext. Überlaufender Text wird abgeschnitten. Standard ist keine Begrenzung. Mögliche Werte: `1`: Einzeiliger Text, der bei Überlauf abgeschnitten wird. `2`: Zweizeiliger Text, der bei Überlauf abgeschnitten wird. `3`: Dreizeiliger Text, der bei Überlauf abgeschnitten wird.
`icon`	`icon`	`string`	-
Name des Material Icons auf der linken Seite. Alternativ können Sie `slot="icon"` verwenden.
`end-icon`	`endIcon`	`string`	-
Name des Material Icons auf der rechten Seite. Alternativ können Sie `slot="end-icon"` verwenden.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert das Listenelement. Es dimmt das Listenelement und deaktiviert interaktive Elemente wie `<mdui-checkbox>`, `<mdui-radio>` und `<mdui-switch>`.
`active`	`active`	`boolean`	`false`
Markiert das Listenelement als aktiv.
`nonclickable`	`nonclickable`	`boolean`	`false`
Deaktiviert die standardmäßige Klickaktion des Listenelements, aber interaktive Elemente wie `<mdui-checkbox>`, `<mdui-radio>` und `<mdui-switch>` darin bleiben funktionsfähig.
`rounded`	`rounded`	`boolean`	`false`
Verleiht dem Listenelement ein abgerundetes Aussehen.
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
Vertikale Ausrichtung des Listenelements. Mögliche Werte: `start`: Oben ausrichten. `center`: Zentriert ausrichten. `end`: Unten ausrichten.
`href`	`href`	`string`	-
Die URL für den Link. Wenn gesetzt, wird die Komponente als `<a>`-Element gerendert und unterstützt Link-bezogene Attribute.
`download`	`download`	`string`	-
Lädt die verlinkte URL herunter. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Legt fest, wo die verlinkte URL geöffnet wird. Mögliche Werte: `_blank`: Öffnet in einem neuen Tab oder Fenster. `_parent`: Öffnet im übergeordneten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. `_self`: Öffnet im aktuellen Browsing-Kontext (Standard). `_top`: Öffnet im obersten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Gibt die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen an. Mögliche Werte: `alternate`: Eine alternative Version des aktuellen Dokuments. `author`: Der Autor des aktuellen Dokuments oder Artikels. `bookmark`: Der Permalink des übergeordneten Abschnitts. `external`: Das referenzierte Dokument ist nicht Teil derselben Website wie das aktuelle Dokument. `help`: Ein Link zu kontextsensitiver Hilfe. `license`: Inhalt, der durch die im referenzierten Dokument beschriebene Urheberrechtslizenz abgedeckt ist. `me`: Links zu Inhalten, die dem Autor des aktuellen Dokuments gehören. `next`: Das nächste Dokument in der Serie. `nofollow`: Gibt an, dass der ursprüngliche Autor oder Herausgeber des aktuellen Dokuments das referenzierte Dokument nicht unterstützt. `noreferrer`: Verhindert das Senden des `Referer`-Headers. Hat die gleiche Wirkung wie `noopener`. `opener`: Erstellt einen neuen Browsing-Kontext, wenn der Hyperlink ansonsten in einem obersten Kontext geöffnet würde, der nicht sekundär ist (z. B. wenn `target="_blank"` angegeben ist). `prev`: Das vorherige Dokument in der Serie. `search`: Links zu einer Ressource, die verwendet werden kann, um im aktuellen Dokument und seinen verwandten Seiten zu suchen. `tag`: Markiert das aktuelle Dokument mit dem angegebenen Tag. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.

Methoden

Name	Parameter	Rückgabewert
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.

Ereignisse

Name
`focus`
Wird ausgelöst, wenn das Listenelement den Fokus erhält.
`blur`
Wird ausgelöst, wenn das Listenelement den Fokus verliert.

Slots

Name
Standard
Haupttext.
`description`
Untertext.
`icon`
Element links vom Listenelement.
`end-icon`
Element rechts vom Listenelement.
`custom`
Beliebiger eigener Inhalt.

CSS Parts

Name
`container`
Container des Listenelements.
`icon`
Linkes Icon.
`end-icon`
Rechtes Icon.
`body`
Mittlerer Abschnitt.
`headline`
Haupttitel.
`description`
Untertitel.

CSS Custom Property

Name
`--shape-corner`
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
`--shape-corner-rounded`
Der Eckradius der Komponente, wenn `rounded` angegeben ist. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

`mdui-list-subheader` API

Slots

Name
Standard
Untertitel-Text.

`mdui-list` API

Slots

Name
Standard
Enthält `<mdui-list-item>`-Elemente.

Vorherige Seite

LinearProgress

Nächste Seite

List

Verwendung

Beispiele

Textinhalt

Seitlicher Inhalt

Link

Deaktivierter Zustand

Aktiver Zustand

Nicht anklickbarer Zustand

Abgerundete Form

Vertikale Ausrichtung

Benutzerdefinierter Inhalt

`mdui-list-item` API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Parts

CSS Custom Property

`mdui-list-subheader` API

Slots

`mdui-list` API

Slots