ListItemView

import {
  Avatar,
  Heading,
  IconDomain,
  IconSubdomain,
  ContextMenu,
  MenuItem,
  Text,
  typedList,
} from "@mittwald/flow-react-components";
import {
  type Domain,
  domains,
} from "@/content/components/list/list-item-view/examples/domainApi";

export default () => {
  const DomainList = typedList<Domain>();

  return (
    <DomainList.List
      batchSize={3}
      hidePagination
      aria-label="Domains"
      getItemId={(domain) => domain.id}
    >
      <DomainList.StaticData data={domains} />
      <DomainList.Item
        textValue={(domain) => domain.domain}
      >
        {(domain) => (
          <DomainList.ItemView>
            <Avatar
              color={
                domain.type === "Domain" ? "blue" : "teal"
              }
            >
              {domain.type === "Domain" ? (
                <IconDomain />
              ) : (
                <IconSubdomain />
              )}
            </Avatar>
            <Heading>{domain.hostname}</Heading>
            <Text>{domain.type}</Text>

            <ContextMenu>
              <MenuItem>Details anzeigen</MenuItem>
              <MenuItem>Löschen</MenuItem>
            </ContextMenu>
          </DomainList.ItemView>
        )}
      </DomainList.Item>
    </DomainList.List>
  );
}

List.ItemView ist die vorgefertigte Layout-Lösung für ein List-Item und ordnet Avatar, Titel, Content und Aktionen einheitlich an.

Best Practices

• Halte den Titel kurz und eindeutig. Lange Headings brechen um und erschweren das schnelle Scannen der List.
• Zeige nur die Informationen, die zum Verständnis des Elements nötig sind. Zu viele Details machen die List unübersichtlich.
• Ergänze im Untertitel weitere Informationen nach dem Muster „Beschreibung – 1. Information – 2. Information“.
• Verlagere selten benötigte Details in Top oder Bottom Content oder blende sie über ColumnLayout‍ auf kleinen Bildschirmen aus.
• Gib jedem List-Item über textValue seinen Text mit. Erst damit findet der User es über die Tastatur, indem er dessen Anfang tippt.

Als Raster

In der Rasteransicht wird das List-Item kompakter dargestellt: Der Avatar wird größer und eckig, Top Content sowie die Accordion-Funktion entfallen. Aktiviere die Darstellung über showTiles an List.Item.

Mit Avatar

Der Avatar‍ steht am Anfang eines List-Items und spiegelt das Element wider: Ein Icon‍ steht für die Kategorie (z. B. ein Domain-Icon), ein hochgeladenes Image‍ wird angezeigt, andernfalls erscheinen Initialen. Elemente derselben Kategorie erhalten dasselbe Icon.

Mit Link

Setze href an List.Item, um das gesamte List-Item zu verlinken.

Mit Accordion

Aktiviere accordion an der List, damit sich ein List-Item per Klick ein- oder ausklappen lässt. Den erweiterten Inhalt platzierst du in der ItemView über <Content slot="bottom" />.

Mit Checkboxen

Checkboxen‍ in einem List-Item werden automatisch am Anfang der Zeile angeordnet. Ihre Funktionalität wird nicht von der List gesteuert und muss individuell implementiert werden. Achte darauf, dass die gesamte Zeile zur Auswahl genutzt werden kann – nutze dafür onAction der List.

Mit Content Slots

In einem List-Item kann zusätzlicher <Content /> (Top und Bottom Content) platziert werden. Die Position wird über das slot-Property gesteuert.

Mit ColumnLayout

Der List.ItemView können die ColumnLayout‍-Properties s, m und l mitgegeben werden, um Seitenverhältnis und Umbruchverhalten von Header und Content zu steuern.

Da für die Spalten auch null gesetzt werden kann, lässt sich nicht zwingend benötigter Content in kleineren Ansichten ausblenden. In diesem Fall werden auch die entsprechenden Content Slots nicht angezeigt.

Mit ContextMenu

Aktionen eines List-Items platzierst du in einem ContextMenu‍. Für dauerhaft sichtbare Aktionen nutzt du stattdessen Buttons‍ in einer ActionGroup.

Mit ActionGroup

Verwende eine ActionGroup innerhalb des <Content />, um Buttons‍ im List-Item zu platzieren.