List

Playground

Mit typedList<T> lässt sich eine List für einen bestimmten Datentyp erzeugen.

Im Tab Develop stehen verschiedene Anleitungen zum technischen Aufbau bereit.

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

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

  return (
    <DomainList.List
      batchSize={4}
      aria-label="Domains"
      defaultViewMode="list"
    >
      <DomainList.StaticData data={domains} />
      <ActionGroup>
        <Button color="accent">Anlegen</Button>
      </ActionGroup>
      <DomainList.Search />
      <DomainList.Filter
        property="type"
        mode="some"
        name="Typ"
      />
      <DomainList.Sorting
        property="hostname"
        name="Domain A bis Z"
        direction="asc"
      />
      <DomainList.Sorting
        property="hostname"
        name="Domain Z bis A"
        direction="desc"
      />
      <DomainList.Table>
        <DomainList.TableHeader>
          <DomainList.TableColumn>
            Name
          </DomainList.TableColumn>
          <DomainList.TableColumn>
            Type
          </DomainList.TableColumn>
          <DomainList.TableColumn>
            TLD
          </DomainList.TableColumn>
          <DomainList.TableColumn>
            Hostname
          </DomainList.TableColumn>
        </DomainList.TableHeader>

        <DomainList.TableBody>
          <DomainList.TableRow>
            <DomainList.TableCell>
              {(domain) => domain.domain}
            </DomainList.TableCell>
            <DomainList.TableCell>
              {(domain) => domain.type}
            </DomainList.TableCell>
            <DomainList.TableCell>
              {(domain) => domain.tld}
            </DomainList.TableCell>
            <DomainList.TableCell>
              {(domain) => domain.hostname}
            </DomainList.TableCell>
          </DomainList.TableRow>
        </DomainList.TableBody>
      </DomainList.Table>
      <DomainList.Item
        textValue={(domain) => domain.domain}
        showTiles
      >
        {(domain) => (
          <DomainList.ItemView>
            <Avatar
              color={
                domain.type === "Domain" ? "blue" : "teal"
              }
            >
              {domain.type === "Domain" ? (
                <IconDomain />
              ) : (
                <IconSubdomain />
              )}
            </Avatar>
            <Heading>
              {domain.hostname}
              {!domain.verified && (
                <AlertBadge status="warning">
                  Unverifiziert
                </AlertBadge>
              )}
            </Heading>
            <Text>{domain.type}</Text>

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

Ansichten

Die Liste unterstützt die Ansichten Liste, Raster und Tabelle. Wird mehr als eine Ansicht verwendet, kann über ein Menü zwischen den Ansichten gewechselt werden. Die Default-Ansicht wird über das Property defaultViewMode festgelegt.

Listenansicht

Nutze <List.Item />, um die List in der Listenansicht darzustellen.

Rasteransicht

Für die Rasteransicht wird ebenfalls das <List.Item /> verwendet. Nutze showTiles, um diese Ansicht zu aktivieren. Die Listenansicht kann deaktiviert werden, indem showList auf false gesetzt wird.

Über das maxTileWidth-Property lässt sich die maximale Breite der Kacheln steuern.

Tabellenansicht

Nutze <List.Table />, um die List als Table darzustellen.

ListItems

In einer List lassen sich ListItems mit unterschiedlichen Interaktions- und Aufbaumöglichkeiten einsetzen.

Mit Link

Ein ListItem bietet das Property href an, um das Element zu verlinken.

Mit Accordion

Das Accordion-Verhalten wird über die accordion-Property aktiviert. Dadurch lässt sich ein ListItem per Klick ein- oder ausklappen. Der erweiterte Inhalt wird in <Content slot="bottom" /> platziert.

Mit Checkboxen

Checkboxen in einem ListItem werden automatisch am Anfang der Zeile angeordnet. Die Funktionalität der Checkbox wird nicht von der List gesteuert und muss individuell implementiert werden. Achte bei der Implementierung jedoch darauf, dass die gesamte Zeile zur Auswahl des Elements genutzt werden kann. Nutze dafür onAction der List.

Mit Content Slots

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

Mit ColumnLayout

Dem ListItem können die ColumnLayout Properties s, m und l mitgegeben werden, um das Seitenverhältnis sowie das Umbruchverhalten von Header und Content zu steuern.

Da für die ColumnLayout-Spalten auch null gesetzt werden kann, ist es möglich, nicht zwingend benötigten Content in kleineren Ansichten auszublenden. In diesem Fall werden auch die entsprechenden Content Slots nicht angezeigt.

Mit ActionGroup

Verwende eine ActionGroup innerhalb des <Content />, um Buttons in der List zu platzieren.

Einstellmöglichkeiten

Die List bietet Sortierung, Filter, Suche und Pagination an. Detaillierte Anleitungen zu den einzelnen Einstellmöglichkeiten stehen unter dem Develop-Tab der List zur Verfügung.

Sortierung

Nutze <List.Sorting /> innerhalb der List, um eine Sortiermethode anzulegen.

Filter

Über <List.Filter /> lassen sich Filtermöglichkeiten für die List anlegen.

Suche

Verwende <List.Search /> innerhalb der List, um ein SearchField anzuzeigen. Standardmäßig wird die Suche automatisch gestartet. Soll die Suche nur beim Drücken auf Enter ausgelöst werden, kann das Property autoSubmit auf false gesetzt werden.

Pagination

Die Pagination ist standardmäßig bei jeder List aktiviert, kann jedoch über hidePagination deaktiviert werden. Über die batchSize-Property kann festgelegt werden, wie viele Einträge gleichzeitig angezeigt werden sollen.

Kombiniere mit ...

ActionGroup

Verwende <ActionGroup /> innerhalb der List, um eine ActionGroup anzuzeigen. Hier können eine oder mehrere Aktionen definiert werden, die sich direkt auf die Liste beziehen.

Summary

Verwende eine <ListSummary />, um eine Zusammenfassung anzuzeigen, beispielsweise die Gesamtsumme der Beträge. Über das position-Property wird festgelegt, ob die Summary oberhalb oder unterhalb der List erscheint.