Les modaux sont utilisés pour les actions de création, d'ajout, de modification ou de suppression en une seule étape. Ils sont également utilisés pour afficher des métadonnées supplémentaires sur un écran ou un objet spécifique sur l'écran.
Usage
import { Modal } from 'nr1'Exemples
Basique
class MyNerdlet extends React.PureComponent { constructor() { super(...arguments);
this._onClose = this._onClose.bind(this);
this.state = { hidden: true, }; }
_onClose() { this.setState({ hidden: true }); }
render() { return ( <> <Button onClick={() => this.setState({ hidden: false })}> Open modal </Button>
<Modal hidden={this.state.hidden} onClose={this._onClose}> <HeadingText type={HeadingText.TYPE.HEADING_3}>Modal</HeadingText>
<BlockText spacingType={[ BlockText.SPACING_TYPE.EXTRA_LARGE, BlockText.SPACING_TYPE.OMIT, ]} > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet. </BlockText>
<Button onClick={this._onClose}>Close</Button> </Modal> </> ); }}Démontage
class MyNerdlet extends React.PureComponent { constructor() { super(...arguments);
this._onClick = this._onClick.bind(this); this._onClose = this._onClose.bind(this); this._onHideEnd = this._onHideEnd.bind(this);
this.state = { hidden: true, mounted: false, }; }
_onClick() { this.setState({ hidden: false, mounted: true, }); }
_onClose() { this.setState({ hidden: true }); }
_onHideEnd() { this.setState({ mounted: false }); }
render() { return ( <> <Button onClick={this._onClick}>Open modal</Button>
{this.state.mounted && ( <Modal hidden={this.state.hidden} onClose={this._onClose} onHideEnd={this._onHideEnd} > <HeadingText type={HeadingText.TYPE.HEADING_3}>Modal</HeadingText>
<BlockText spacingType={[ BlockText.SPACING_TYPE.EXTRA_LARGE, BlockText.SPACING_TYPE.OMIT, ]} > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst quisque sagittis purus sit amet. </BlockText>
<Button onClick={this._onClose}>Close</Button> </Modal> )} </> ); }}Accessoires
chaîne | Transmettez la chaîne du contenu textuel qui devrait mieux décrire le but du modal pour être correctement annoncé par les lecteurs d'écran. |
nœud | Contenu à rendre à l'intérieur du modal. |
chaîne | Ajoute les noms de classe au composant. |
booléen | Si |
OBLIGATOIREfonction | Rappel déclenché lors du clic sur le bouton de fermeture du Modal. |
fonction | Rappel déclenché lorsque le modal termine l'animation de fermeture. Utilisez ceci pour démonter le composant modal. Cela garantit que l'animation de fermeture fonctionne correctement. |
fonction | Rappel déclenché lorsque le modal démarre l'animation de fermeture. |
fonction | Rappel déclenché lorsque le Modal termine l'animation d'ouverture. |
fonction | Rappel déclenché lorsque le Modal démarre l'animation d'ouverture. |
objet | Style en ligne pour un style personnalisé. |
chaîne | Ajoute un attribut Remarque : vous ne verrez peut-être pas l'attribut |