Bannerkomponente für Stripe-Apps
Verwenden Sie das Banner, um eine Vielzahl von Warnungen und Meldungen anzuzeigen, auf die Sie Nutzer/innen aufmerksam machen möchten.
So fügen Sie Ihrer App die Banner Komponente hinzu:
import {Banner} from '@stripe/ui-extension-sdk/ui';
Übersicht
Banner nehmen die Breite des übergeordneten Containers ein. Banner eignen sich für wichtige Informationen, die Nutzereingaben und eine dauerhafte Anzeige erfordern.
Für Banner gibt es drei Voreinstellungen:
- Standard
- Vorsicht
- Kritisch
Nachfolgend sehen Sie eine Vorschau der drei Voreinstellungen für ein Banner:
<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>
Banner-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
| Optional
|
onDismiss
Bannern kann eine Schaltfläche zum Verwerfen hinzugefügt werden. Fügen Sie einen Click-Handler zu onDismiss hinzu, damit die Schaltfläche Banner ausblenden angezeigt wird:
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> )
Aktionen
Banner können auch mit der Eigenschaft actions versehen werden, mit der Sie dem Banner Aktionsschaltflächen hinzufügen können:
<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>