Stripe Apps の List コンポーネント

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

SDK バージョン

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

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

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

サンプルを読み込み中...

<Box
  css={{
    backgroundColor: 'surface',
    padding: 'medium',
    borderRadius: 'medium',
  }}
>
  <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>
</Box>

List プロパティ

プロパティータイプ

プロパティー	タイプ
`children`	必須 `React.ReactNode` One or more `ListItem` components.
`onAction`	オプション `((id: React.Key) => void) \| undefined` Press event handler which receives the corresponding key of the `ListItem` that was pressed.

children

必須

React.ReactNode

One or more ListItem components.

onAction

オプション

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

Press event handler which receives the corresponding key of the ListItem that was pressed.

リストアイテム

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

サンプルを読み込み中...

<Box
  css={{
    backgroundColor: 'surface',
    padding: 'medium',
    borderRadius: 'medium',
  }}
>
  <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>
</Box>

ListItem プロパティ

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

副題

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

サンプルを読み込み中...

<Box
  css={{
    backgroundColor: 'surface',
    padding: 'medium',
    borderRadius: 'medium',
  }}
>
  <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>
</Box>

値

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

サンプルを読み込み中...

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

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

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

注

Stripe Apps の List コンポーネント

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

List プロパティ

リストアイテム

ListItem プロパティ

副題

値

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

参照情報