Stripe Apps の Accordion コンポーネント

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

SDK バージョン

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

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

Accordions help a user to quickly scan a collection, identify elements, and access more details without leaving the context that they’re working in.

This is a preview of an Accordion component with three AccordionItem components inside:

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

<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` One or more `AccordionItem` components.

children

必須

React.ReactNode

One or more AccordionItem components.

AccordionItem

Accordion components contain one or more AccordionItem components.

AccordionItem プロパティ

プロパティー	タイプ
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`title`	必須 `React.ReactNode` A title describing the `AccordionItem`.
`actions`	オプション `React.ReactNode` A component containing actions that a user can take on the `AccordionItem`. If there are more than 2 actions, use an overflow menu to show the rest.
`defaultOpen`	オプション `boolean \| undefined` Whether or not the `AccordionItem` should be open on the first render.
`media`	オプション `React.ReactNode` A component containing an optional `Img` or `Icon` to help identify the `AccordionItem`.
`onChange`	オプション `((isOpen: boolean) => void) \| undefined` open の状態から変化したときにコールバックします。
`subtitle`	オプション `React.ReactNode` 追加の説明情報を含むオプションのサブタイトル。

Titles and subtitles

Label all AccordionItem components with a title that uniquely identifies the item. You can also use an optional subtitle to provide a description or additional relevant information.

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

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

Media

The AccordionItem component can contain a media element to show a relevant icon or image that helps the user identify the item. Only include media when it helps users identify items and when there’s a strong association between the media and the item itself.

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

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

Actions

You can represent actions that an item can have performed on it with buttons or links placed on the right-hand side of the accordion trigger.

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

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

Disabling items

Instead of removing a user’s ability to interact with disabled accordion items, disable the associated actions while still presenting as much information within the item as possible to the user.

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

<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 プロパティ

Titles and subtitles

Media

Actions

Disabling items

参照情報