<Popover> sont des superpositions commutables pour afficher de petites superpositions à la demande.
Le composant <Popover> nécessite que vous fournissiez un déclencheur avec <PopoverTrigger> qui gérera l'ouverture/la fermeture de la superposition, ainsi que le contenu de la superposition via <PopoverBody />.
Usage
import { Popover } from 'nr1';Exemples
Basique
<Popover> <PopoverTrigger>Trigger</PopoverTrigger> <PopoverBody> <BlockText>Body</BlockText> </PopoverBody></Popover>;Bouton comme déclencheur
<Popover> <PopoverTrigger> <Button>Trigger</Button> </PopoverTrigger> <PopoverBody> <BlockText>Body</BlockText> </PopoverBody></Popover>;TextField comme déclencheur
<Popover> <PopoverTrigger> <TextField /> </PopoverTrigger> <PopoverBody> <BlockText>Body</BlockText> </PopoverBody></Popover>;Avec PopoverFooter
<Popover> <PopoverTrigger> <Button>Trigger</Button> </PopoverTrigger> <PopoverBody> <Card style={{ width: '250px' }}> <CardBody> <HeadingText>Heading</HeadingText> <BlockText spacingType={[ BlockText.SPACING_TYPE.MEDIUM, BlockText.SPACING_TYPE.NONE, ]} > Item content </BlockText> <BlockText>Item content</BlockText> </CardBody> </Card> <PopoverFooter style={{ textAlign: 'right' }}>Info message</PopoverFooter> </PopoverBody></Popover>;Popover contrôlé
class ControlledPopover extends React.Component { constructor() { super(...arguments);
this.state = { opened: false, };
this._onChange = this._onChange.bind(this); }
_onChange(evt, opened) { this.setState({ opened }, () => console.log('controlled state', evt, this.state) ); }
render() { const { opened } = this.state;
return ( <Popover opened={opened} onChange={this._onChange}> <PopoverTrigger> <Button>Trigger</Button> </PopoverTrigger> <PopoverBody> <Card style={{ width: '250px' }}> <CardBody> <HeadingText>Heading</HeadingText> <BlockText spacingType={[ BlockText.SPACING_TYPE.MEDIUM, BlockText.SPACING_TYPE.NONE, ]} > Item content </BlockText> <BlockText>Item content</BlockText> </CardBody> </Card> <PopoverFooter style={{ textAlign: 'right' }}> Info message </PopoverFooter> </PopoverBody> </Popover> ); }}Accessoires
OBLIGATOIREnœud[] | Ce composant accepte des enfants de deux types :
|
fonction | Rappel pour suivre quand la superposition function ( |
booléen | Lorsque cette option est activée, la superposition contextuelle s'ouvrira au survol. |
booléen | Lorsqu'il est fourni, |