Composant de bannière pour les applications Stripe
Utilisez la bannière afin d'afficher des alertes ou messages que vous souhaitez rendre explicites pour l'utilisateur.
Pour ajouter le composant Banner à votre application :
import {Banner} from '@stripe/ui-extension-sdk/ui';
Présentation
Les bannières occupent la largeur de leur conteneur parent. Elles sont pertinentes pour les informations importantes à afficher de manière persistante, notamment lorsqu’une saisie est requise de la part de l’utilisateur.
Trois types prédéfinis de bannière sont disponibles :
- Par défaut
- Attention
- Critique
Voici un aperçu des trois types prédéfinis de bannière :
<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>
Propriétés des bannières
| Propriété | Type |
|---|---|
| Facultatif
|
| Facultatif
|
| Facultatif
|
| Facultatif
|
| Facultatif
|
onDismiss
Les bannières peuvent implémenter un bouton « Ignorer » ; ajoutez un gestionnaire de clic à onDismiss pour que le bouton Cacher la bannière s’affiche :
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
Les bannières implémentent également une propriété actions qui vous permet d’ajouter des boutons d’action à la bannière :
<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>