QuickInfo-Komponente für Stripe-Apps
Verwenden Sie QuickInfos, um zusätzliche kontextbezogene Informationen zu einem bestimmten Element oder Thema anzugeben.
So fügen Sie Ihrer App die Tooltip Komponente hinzu:
import {Tooltip} from '@stripe/ui-extension-sdk/ui';
Dies ist eine Vorschau der beiden Tooltip-Komponenten, jeweils mit dem Typ label:
<Tooltip type="description" trigger={ <Button type="primary" disabled onPress={undefined}> Pay out to bank </Button> } > You have no available balance to pay out. You can create payouts when you've accumulated a positive balance again. </Tooltip> <Tooltip type="label" trigger={ <Button onPress={undefined}> <Icon name="notifications" /> </Button> } > Notifications </Tooltip>
QuickInfos sind Einblendungen, die angezeigt werden, wenn Nutzer/innen den Mauszeiger über ein Zielement bewegen oder ein Element fokussieren. Verwenden Sie Tooltips, um zusätzliche kontextbezogene Informationen über ein bestimmtes Element oder Thema zu geben. Sie können Tootips entweder als Beschreibungen oder als Label verwenden.
Fügen Sie möglichst keine interaktiven Inhalte wie Links in eine QuickInfo ein, da Tastaturnutzer/innen nicht darauf zugreifen können.
Tooltip-Eigenschaften
| Eigenschaft | Typ |
|---|---|
| Pflichtfeld
Der Inhalt der Komponente. |
| Pflichtfeld
Das Zielelement, das als |
| Optional
Wie lange in Millisekunden gewartet werden soll, bevor der |
| Optional
Wie der |
| Optional
Die Stilvariante des |
Platzierung
Sie können QuickInfos in einer von 4 Hauptrichtungen platzieren und sie zusätzlich entlang einer sekundären Achse ausrichten, was insgesamt 12 mögliche Platzierungsoptionen in Bezug auf den trigger ergibt. Die Platzierung wird automatisch nach Bedarf angepasst, sodass sichergestellt wird, dass die QuickInfo im Darstellungsfeld sichtbar bleibt.
const SpacerComponent = () => <Box css={{width: 28, height: 28}}>{null}</Box>; const Row = ({children}: {children: React.ReactNode}) => ( <Box css={{ stack: 'x', wrap: 'wrap', gap: 'small', distribute: 'space-between', }} > {children} </Box> ); return ( <Box css={{ padding: 'xxlarge', stack: 'y', }} > <Row> <SpacerComponent /> <Tooltip placement="top left" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "top left" </Tooltip> <Tooltip placement="top" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "top" </Tooltip> <Tooltip placement="top right" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "top right" </Tooltip> <SpacerComponent /> </Row> <Row> <Tooltip placement="left top" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "left top" </Tooltip> <SpacerComponent /> <SpacerComponent /> <SpacerComponent /> <Tooltip placement="right top" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "right top" </Tooltip> </Row> <Row> <Tooltip placement="left" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "left" </Tooltip> <SpacerComponent /> <SpacerComponent /> <SpacerComponent /> <Tooltip placement="right" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "right" </Tooltip> </Row> <Row> <Tooltip placement="left bottom" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "left bottom" </Tooltip> <SpacerComponent /> <SpacerComponent /> <SpacerComponent /> <Tooltip placement="right bottom" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "right bottom" </Tooltip> </Row> <Row> <SpacerComponent /> <Tooltip placement="bottom left" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "bottom left" </Tooltip> <Tooltip placement="bottom" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "bottom" </Tooltip> <Tooltip placement="bottom right" trigger={ <Button onPress={undefined}> <Icon name="info" /> </Button> } > "bottom right" </Tooltip> <SpacerComponent /> </Row> </Box> )
Verzögerung
QuickInfos werden mit einer kurzen Verzögerung angezeigt, nachdem der Mauszeiger über ihr Auslöseelement bewegt wurde. Sie können den Zeitraum, bis eine QuickInfo aktiv wird, nachdem der Mauszeiger darüber bewegt wurde, mit der Eigenschaft delay steuern. QuickInfos werden immer sofort angezeigt, wenn ihr Auslöseelement den Tastaturfokus erhält.
<Tooltip delay={0} trigger={<Button onPress={undefined}>Immediate</Button>}> I showed up immediately. </Tooltip>
QuickInfos werden sofort angezeigt, wenn Sie den Mauszeiger darüber bewegen, während eine andere QuickInfo bereits aktiv ist.
<Tooltip trigger={<Button onPress={undefined}>Hover me</Button>}> I showed up after a delay. </Tooltip> <Tooltip trigger={<Button onPress={undefined}>Then me</Button>}> I showed up immediately. </Tooltip>