Liste

Zeigen Sie eine Liste mit Informationen in verschiedenen vorkonfigurierten Formaten an.

SDK-Version

So fügen Sie Ihrer App die List Komponente hinzu:

import {List, ListItem} from '@stripe/ui-extension-sdk/ui';

Sie können den onAction-Handler verwenden, um auf press-Ereignisse für Listenelemente zu reagieren.

<List
  onAction={(id: string | number) => console.log(`Pressed row #${id}`)}
  aria-label="Example of a List"
>
  <ListItem
    value="$100.00"
    id="1"
    title={<Box>Payment #1862</Box>}
    secondaryTitle={<Box>customer@test.com</Box>}
  />
  <ListItem
    value="$63.00"
    id="2"
    title={<Box>Payment #9273</Box>}
    secondaryTitle={<Box>frank@example.com</Box>}
  />
  <ListItem
    value="$7,471.62"
    id="3"
    title={<Box>Payment #643</Box>}
    secondaryTitle={<Box>robert@google.com</Box>}
  />
  <ListItem
    value="$871.01"
    id="4"
    title={<Box>Payment #123</Box>}
    secondaryTitle={<Box>example@gmail.com</Box>}
  />
</List>

Eigenschaften auflisten

Eigenschaft Typ

Eigenschaft	Typ
`children`	Pflichtfeld `React.ReactNode` One or more ListItem components.
`onAction`	Optional `((id: React.Key) => void) \| undefined` Drücken Sie den Ereignis-Handler, der die entsprechende Taste des gedrückten Listenelements empfängt.

children

Pflichtfeld

React.ReactNode

One or more ListItem components.

onAction

Optional

((id: React.Key) => void) | undefined

Drücken Sie den Ereignis-Handler, der die entsprechende Taste des gedrückten Listenelements empfängt.

Listenelemente

Jede Liste besteht aus mehreren ListItem-Komponenten. Jedes Listenelement sollte über die Eigenschaft key eindeutig identifiziert werden.

<List
  onAction={(id: string | number) => console.log(id)}
  aria-label="Example of a List"
>
  <ListItem id="apple" title={<Box>Apple</Box>} />
  <ListItem id="orange" title={<Box>Orange</Box>} />
  <ListItem id="banana" title={<Box>Banana</Box>} />
</List>

Eigenschaften von ListItem

Eigenschaft	Typ
`icon`	Optional `React.ReactNode` Symbol, das links neben dem Inhalt und der Beschreibung angezeigt wird. Wird durch das `image` überschrieben, wenn beide Optionen vorhanden sind.
`id`	Optional `string \| undefined` Die ID des Elements. Dies wird an den `onAction`-Handler von `List` übergeben.
`image`	Optional `React.ReactNode` Bild, das links neben dem Inhalt und der Beschreibung angezeigt wird. Wird durch das `icon` überschrieben, wenn beide Optionen vorhanden sind.
`secondaryTitle`	Optional `React.ReactNode` Sekundärer Inhalt für die ListItem-Komponente.
`size`	Optional `("default" \| "large") \| undefined` Größe der ListItem-Komponente.
`title`	Optional `React.ReactNode` Titel-Inhalt für die ListItem-Komponente.
`value`	Optional `React.ReactNode` The value to display on the right-hand side of the item.

Sekundärer Titel

Mit der Eigenschaft secondaryTitle können Sie einem Listenelement einen sekundären Titel hinzufügen.

<List
  onAction={(id: string | number) => console.log(id)}
  aria-label="Example of a List"
>
  <ListItem
    id="1"
    title={<Box>John Smith</Box>}
    secondaryTitle={<Box>johnsmith@test.com</Box>}
  />
  <ListItem
    id="2"
    title={<Box>Jane Doe</Box>}
    secondaryTitle={<Box>janedoe@test.com</Box>}
  />
  <ListItem
    id="3"
    title={<Box>Mark Foster</Box>}
    secondaryTitle={<Box>markfoster@test.com</Box>}
  />
</List>

Werte

Die value-Eigenschaft des ListItem kann beliebiges JSX annehmen.

<List onAction={(id) => console.log(id)} aria-label="Example of a List">
  <ListItem
    value={
      <Box css={{marginRight: 'xsmall'}}>
        <Icon name="truck" />}
      </Box>
    }
    id="1"
    title={<Box>Payment #123</Box>}
    secondaryTitle={<Box>example@gmail.com</Box>}
  />
  <ListItem
    value={
      <Button onPress={() => alert('delete')} type="destructive">
        <Box css={{marginRight: 'xsmall'}}>
          <Icon name="trash" />
        </Box>
        Delete
      </Button>
    }
    id="2"
    title={<Box>Payment #456</Box>}
    secondaryTitle={<Box>example@gmail.com</Box>}
  />
  <ListItem
    value={
      <Button onPress={() => alert('edit')} type="primary">
        Edit
      </Button>
    }
    id="3"
    title={<Box>Payment #789</Box>}
    secondaryTitle={<Box>example@gmail.com</Box>}
  />
</List>

Nicht unterstützte Komponenten

Beachten Sie, dass bestimmte interaktive Komponenten nicht als value-Eigenschaften in einem ListItem funktionieren: