Stripe Apps の Banner コンポーネント

Banner (バナー) を使用して、ユーザーに明確に示したいさまざまなアラートやメッセージを表示します。

SDK バージョン

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

import {Banner} from '@stripe/ui-extension-sdk/ui';

概要

バナーには親コンテナーの幅が使用されます。バナーは、ユーザーによる入力と永続的な表示を必要とする重要な情報に適しています。

バナーには、事前設定された次の 3 つのタイプがあります。

デフォルト
注意
重大

事前設定された 3 タイプのバナーのプレビューを以下に示します。

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

<Box css={{stack: 'y', gap: 'medium', width: 'fill'}}>
  <Banner
    type="default"
    onDismiss={() => console.log('hello world')}
    title="Neutral title"
    description="A short description"
    actions={
      <Button onPress={() => console.log('hello world')}>Button</Button>
    }
  />
  <Banner
    type="caution"
    title="Check your bank details"
    description="Your bank account information must be verified before receiving payouts."
    onDismiss={() => console.log('hello world')}
    actions={
      <Box css={{stack: 'x', gap: 'small'}}>
        <Button onPress={() => console.log('hello world')}>
          Update bank account
        </Button>
        <Button onPress={() => console.log('hello world')}>
          Learn more
        </Button>
      </Box>
    }
  />
  <Banner
    type="critical"
    title="Check your bank details"
    description="Your bank account information must be verified before receiving payouts."
    actions={
      <Button onPress={() => console.log('hello world')}>
        Update bank account
      </Button>
    }
  />
</Box>

プロパティー	タイプ
`actions`	オプション `React.ReactNode`
`description`	オプション `React.ReactNode`
`onDismiss`	オプション `(() => void) \| undefined`
`title`	オプション `React.ReactNode`
`type`	オプション `("default" \| "caution" \| "critical") \| undefined`

onDismiss

バナーには閉じるボタンを追加することもできます。バナーを非表示にするボタンを表示するには、クリックハンドラーを onDismiss に追加します。

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

const [open, setOpen] = React.useState(true);

return (
  <Box css={{stack: 'y', gap: 'medium', width: 'fill'}}>
    <Button onPress={() => setOpen(!open)}>
      {open ? 'Hide' : 'Show'} Banner
    </Button>
    {open && (
      <Banner
        type="default"
        onDismiss={() => setOpen(false)}
        title="Neutral title"
        description="A short description"
        actions={
          <Button onPress={() => console.log('hello world')}>Button</Button>
        }
      />
    )}
  </Box>
)

Actions

バナーに actions プロパティを指定すると、アクションボタンを追加することもできます。

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

<Box css={{width: 'fill'}}>
  <Banner
    type="default"
    title="Check your bank details"
    description="Your bank account information must be verified before receiving payouts."
    actions={
      <Button onPress={() => console.log('hello world')}>
        Update bank account
      </Button>
    }
  />
</Box>

注

Stripe Apps の Banner コンポーネント

Banner (バナー) を使用して、ユーザーに明確に示したいさまざまなアラートやメッセージを表示します。

概要

バナーのプロパティー

onDismiss

Actions

参照情報