Zu Seitenhinhalt springen
Helfen Sie, diese Seite zu übersetzen

Listen (List)

Listen sind durchgehende, vertikale Indexe von Text oder Bildern.

Listen sind eine fortlaufende Gruppe von Text oder Bildern. Sie bestehen aus Elementen, die primäre und ergänzende Aktionen enthalten, die durch Symbole und Texte dargestellt werden.

Einfache Liste

Das letzte Element der vorherigen Demo zeigt, wie Sie einen Link rendern können:

function ListItemLink(props) {
  return <ListItem button component="a" {...props} />;
}

//...

<ListItemLink href="#simple-list">
  <ListItemText primary="Spam" />
</ListItemLink>

Nach diesem Abschnitt der Dokumentation finden Sie eine Demo mit React Router.

Verschachtelte Liste

Ordnerliste

  • Photos

    Jan 9, 2014

  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

Interaktive Liste

Nachfolgend finden Sie eine interaktive Demo, mit der Sie die visuellen Ergebnisse der verschiedenen Einstellungen untersuchen können:

Text only
  • Single-line item
  • Single-line item
  • Single-line item
Icon with text
  • Single-line item
  • Single-line item
  • Single-line item
Avatar with text
  • Single-line item
  • Single-line item
  • Single-line item
Avatar with text and icon
  • Single-line item
  • Single-line item
  • Single-line item

Ausgewähltes Listenelement

Listenelemente ausrichten

Sie sollten die Ausrichtung der Listenelemente ändern, wenn Sie 3 Zeilen oder mehr anzeigen. Setzen Sie die Eigenschaft alignItems = "flex-start".

  • R
    Brunch this weekend?

    Ali Connors — I'll be in your neighborhood doing errands this…

  • T
    Summer BBQ

    to Scott, Alex, Jennifer — Wish I could come, but I'm out of town this…

  • C
    Oui Oui

    Sandra Adams — Do you have Paris recommendations? Have you ever…

Listensteuerelemente

Checkbox

Eine Checkbox kann entweder eine primäre oder eine sekundäre Aktion sein.

The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.

  • Line item 1
  • Line item 2
  • Line item 3
  • Line item 4

Die Checkbox ist die sekundäre Aktion für das Listenelement und ein separates Ziel.

  • A
    Line item 1
  • A
    Line item 2
  • A
    Line item 3
  • A
    Line item 4

Switch

Der Schalter ist die sekundäre Aktion und ein separates Ziel.

  • Settings
  • Wi-Fi
  • Bluetooth

Liste mit angehefteter Kopfzeile

Nach dem Scrollen bleiben angeheftete Kopfzeilen am oberen Bildschirmrand fixiert, bis sie von der nächsten Kopfzeile aus dem Bildschirm gedrückt werden.

This feature relies on CSS sticky positioning. Unfortunately it's not implemented by all the supported browsers. It defaults to disableSticky when not supported.

    • I'm sticky 0
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 1
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 2
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 3
    • Item 0
    • Item 1
    • Item 2
    • I'm sticky 4
    • Item 0
    • Item 1
    • Item 2
<List className={classes.root} subheader={<li />}>
  {[0, 1, 2, 3, 4].map((sectionId) => (
    <li key={`section-${sectionId}`} className={classes.listSection}>
      <ul className={classes.ul}>
        <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
        {[0, 1, 2].map((item) => (
          <ListItem key={`item-${sectionId}-${item}`}>
            <ListItemText primary={`Item ${item}`} />
          </ListItem>
        ))}
      </ul>
    </li>
  ))}
</List>

Eingerückte Liste

<List component="nav" className={classes.root} aria-label="contacts">
  <ListItem button>
    <ListItemIcon>
      <StarIcon />
    </ListItemIcon>
    <ListItemText primary="Chelsea Otakan" />
  </ListItem>
  <ListItem button>
    <ListItemText inset primary="Eric Hoffman" />
  </ListItem>
</List>

Virtualisierte Liste

Im folgenden Beispiel zeigen wir wie Sie react-window mit der Listen< Komponente nutzen können. Sie zeigt 200 Zeilen an und kann auch einfach mehr verwalten. Virtualisierung hilft bei Leistungsproblemen.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
<FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
  {renderRow}
</FixedSizeList>

The use of react-window when possible is encouraged. Wenn diese Bibliothek Ihren Anwendungsfall nicht abdeckt, sollten Sie react-virtualized und Alternativen wie react-virtuoso in Betracht ziehen.

Individuelle Anpassung

👑 If you are looking for inspiration, you can check MUI Treasury's customization examples.

API