Stripe Apps の Accordion コンポーネント

アコーディオンを使用し、長いコンテンツや複雑なコンテンツを、折りたたみ可能な部分に分割します。

SDK バージョン

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

import {Accordion, AccordionItem} from '@stripe/ui-extension-sdk/ui';

アコーディオンは、ユーザーが作業中のコンテキストを離れずに、コレクションを素早く見渡し、要素を特定し、詳細にアクセスするために便利です。

これは、3 つの AccordionItem コンポーネントを含む、Accordion コンポーネントのプレビューです。

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

<Box css={{backgroundColor: 'surface'}}>
  <Accordion>
    <AccordionItem title="Apples">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Bananas">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Peaches" subtitle="A subtitle can be provided">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
  </Accordion>
</Box>

Accordion プロパティ

プロパティータイプ

プロパティー	タイプ
`children`	必須 `React.ReactNode` 1 つ以上の `AccordionItem` コンポーネント。

children

必須

React.ReactNode

1 つ以上の AccordionItem コンポーネント。

AccordionItem

Accordion コンポーネントは、1 つ以上の AccordionItem コンポーネントを含みます。

AccordionItem プロパティ

プロパティー	タイプ
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`title`	必須 `React.ReactNode` `AccordionItem` を説明するタイトル。
`actions`	オプション `React.ReactNode` `AccordionItem` に対してユーザーが実行できるアクションを格納するコンポーネント。アクションが 2 つ以上ある場合は、オーバーフローメニューを使用して残りのアクションを表示します。
`defaultOpen`	オプション `boolean \| undefined` 初回のレンダリング時に `AccordionItem` を開くかどうか。
`media`	オプション `React.ReactNode` `AccordionItem` を識別するための、オプションの `Img` または `Icon` を格納するコンポーネント。
`onChange`	オプション `((isOpen: boolean) => void) \| undefined` open の状態から変化したときにコールバックします。
`subtitle`	オプション `React.ReactNode` 追加の説明情報を含むオプションのサブタイトル。

タイトルと副タイトル

すべての AccordionItem コンポーネントに、項目を一意に識別する title でラベルを付けます。オプションの subtitle を使用して説明や追加の関連情報を提供することもできます。

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

<Box css={{backgroundColor: 'surface'}}>
  <Accordion>
    <AccordionItem title="Apples">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Bananas">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Oranges">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
    <AccordionItem title="Peaches" subtitle="A subtitle can be provided">
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
  </Accordion>
</Box>

メディア

AccordionItem コンポーネントには、ユーザーが項目を識別しやすくするための、関連するアイコンや画像を表示する媒体要素を含めることができます。メディアは、ユーザーが項目を識別するのに役立ち、メディアと項目自体の関連性が強い場合にのみ使用します。

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

<Box css={{backgroundColor: 'surface'}}>
  <Accordion>
    <AccordionItem
      media={<Icon name="chat" />}
      title="ACH credit transfer"
      subtitle="ACH Credit Transfer enables US customers..."
    >
      <Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
    </AccordionItem>
    <AccordionItem
      title="Cards"
      subtitle="Accept Visa, Mastercard, American Express..."
    >
      <Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
    </AccordionItem>
    <AccordionItem
      title="Apple Pay"
      subtitle="Manage Apple Pay domains and certificates."
    >
      <Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
    </AccordionItem>
  </Accordion>
</Box>

アクション

アコーディオントリガーの右側に配置されたボタンやリンクで、項目が実行できるアクションを表すことができます。

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

const titles = [
  'Example using a link',
  'Example using a button',
  'Multiple buttons are cool too',
];
const actionExamples = [
  <Link key={0} onPress={() => null}>
    Edit
  </Link>,
  <Button key={1} onPress={() => null}>
    Configure
  </Button>,
  <ButtonGroup key={2}>
    <Button onPress={() => null}>Action 1</Button>
    <Button onPress={() => null}>Action 2</Button>
  </ButtonGroup>,
];

return (
  <Box css={{backgroundColor: 'surface'}}>
    <Accordion>
      {[0, 1, 2].map((i) => (
        <AccordionItem
          title={titles[i]}
          subtitle={i > 2 && 'An optional subtitle can be provided.'}
          actions={actionExamples[i]}
          key={i}
        >
          <Box css={{padding: 'xlarge'}}>Accordion AccordionContents</Box>
        </AccordionItem>
      ))}
    </Accordion>
  </Box>
)

項目を無効化する

無効化されたアコーディオン項目をユーザーが操作する能力を削除するのではなく、関連するアクションを無効化して、ユーザーに項目内の情報をできる限り提示します。

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

<Box css={{backgroundColor: 'surface'}}>
  <Accordion>
    <AccordionItem
      title="Orangesss"
      actions={
        <Button disabled onPress={() => null}>
          Edit
        </Button>
      }
    >
      <Box css={{padding: 'xlarge'}}>Accordion contents</Box>
    </AccordionItem>
  </Accordion>
</Box>

Stripe Apps の Accordion コンポーネント

アコーディオンを使用し、長いコンテンツや複雑なコンテンツを、折りたたみ可能な部分に分割します。

Accordion プロパティ

AccordionItem

AccordionItem プロパティ

タイトルと副タイトル

メディア

アクション

項目を無効化する

参照情報