List

事前設定されたさまざまなフォーマットで情報のリストを表示します。

SDK バージョン

List コンポーネントをアプリに追加するには、以下のようにします。

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

リストアイテムに対する press イベントに応答するには、onAction ハンドラを使用します。

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

List プロパティ

プロパティータイプ

プロパティー	タイプ
`children`	必須 `React.ReactNode` One or more ListItem components.
`onAction`	オプション `((id: React.Key) => void) \| undefined` 押されたリストアイテムに対応するキーを受け取る、Press イベントハンドラー。

children

必須

React.ReactNode

One or more ListItem components.

onAction

オプション

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

押されたリストアイテムに対応するキーを受け取る、Press イベントハンドラー。

リストアイテム

すべてのリストは、ListItem コンポーネントのコレクションで構成されます。key プロパティを使用して各リストアイテムを一意に識別します。

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

ListItem プロパティ

プロパティー	タイプ
`icon`	オプション `React.ReactNode` コンテンツと説明の左側に表示されるアイコン。両方が存在する場合、`image` によって上書きされます。
`id`	オプション `string \| undefined` アイテムの ID。これは `List` の `onAction` ハンドラーに渡されます。
`image`	オプション `React.ReactNode` コンテンツと説明の左側に表示される画像。両方が存在する場合、`icon` を上書きします。
`secondaryTitle`	オプション `React.ReactNode` ListItem コンポーネントの 2 次コンテンツ。
`size`	オプション `("default" \| "large") \| undefined` ListItem コンポーネントのサイズ。
`title`	オプション `React.ReactNode` ListItem コンポーネントのタイトルコンテンツ。
`value`	オプション `React.ReactNode` アイテムの右側に表示する値。

副題

secondaryTitle プロパティを使用して、リストアイテムに副題を追加できます。

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

値

ListItem の value プロパティは任意の JSX を受け付けることができます。

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

サポートされていないコンポーネント

一部のインタラクティブなコンポーネントは ListItem の value プロパティとして機能しないことに注意してください。