Les commutateurs sont utilisés comme bascules dans les filtres de contenu ou pour fournir à un utilisateur un moyen de sélectionner une préférence binaire.
Usage
import { Switch } from 'nr1'Exemples
Basique
<div className="nr1-Docs-prettify"> <Switch onChange={(e) => alert(`Toggle to: ${e.target.checked}`)} /> <Switch defaultChecked onChange={(e) => alert(`Toggle to: ${e.target.checked}`)} /></div>Désactivé
<div className="nr1-Docs-prettify"> <Switch disabled /> <Switch defaultChecked disabled /></div>État de chargement
<div className="nr1-Docs-prettify"> <Switch loading /> <Switch defaultChecked loading /></div>Avec étiquette
<div className="nr1-Docs-prettify"> <Switch label="This is a label" /> <Switch disabled label="This is a label" /></div>Avec étiquette et informations
<Switch label="This is a label" info="Info value" />Avec description
<Switch label="This is a label" description="Description value" />Avec un message invalide
<Switch label="This is a label" invalid="Invalid message value" />Composant contrôlé défini pour le chargement lors de l'exécution d'une requête
class Example extends React.Component { constructor() { super(...arguments);
this.state = { checked: false, loading: false, };
this._onChange = this._onChange.bind(this); }
_requestMock() { return new Promise((resolve, reject) => { setTimeout(resolve, 1000); }); }
_onChange() { let initialChecked;
this.setState(({ checked }) => { initialChecked = checked;
return { checked: !checked, loading: true, }; });
this._requestMock() .then(() => { // do some stuff }) .catch(() => { this.setState({ checked: initialChecked, }); }) .finally(() => { this.setState({ loading: false, }); }); }
render() { const { checked, loading } = this.state;
return ( <Switch checked={checked} label="This is a label" loading={loading} onChange={this._onChange} /> ); }}Composant contrôlé défini sur le chargement lors de l'exécution d'une requête qui revient à l'état non coché si la requête échoue
class Example extends React.Component { constructor() { super(...arguments);
this.state = { checked: false, loading: false, };
this._onChange = this._onChange.bind(this); }
_requestMock() { return new Promise((resolve, reject) => { setTimeout(reject, 1000); }); }
_onChange() { let initialChecked;
this.setState(({ checked }) => { initialChecked = checked;
return { checked: !checked, loading: true, }; });
this._requestMock() .then(() => { // do some stuff }) .catch(() => { this.setState({ checked: initialChecked, }); }) .finally(() => { this.setState({ loading: false, }); }); }
render() { const { checked, loading } = this.state;
return ( <Switch checked={checked} label="This is a label" loading={loading} onChange={this._onChange} /> ); }}Accessoires
chaîne | Fournissez une étiquette descriptive pour ce contrôle, par exemple "Changer de vue". |
booléen | Détermine l'état coché du commutateur, où |
chaîne | Ajoute les noms de classe au composant. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
booléen | Définit la valeur cochée par défaut pour le commutateur lorsqu'il fonctionne comme un composant non contrôlé. c'est à dire. Lorsque l'accessoire |
chaîne | Message avec des instructions sur la façon de remplir le champ du formulaire. |
booléen | Détermine si l'utilisateur peut interagir avec le commutateur ou s'il doit être rendu dans un état désactivé. |
chaîne | Des informations supplémentaires peuvent être affichées dans une info-bulle à côté de l'étiquette. |
booléen|chaîne | Lorsque cette option est vraie, elle définit le champ dans un état non valide, afin d'avertir l'utilisateur qu'une attention particulière est nécessaire sur ce champ particulier. Cette propriété peut être un champ |
chaîne | Associez une étiquette de texte pour fournir à l'utilisateur un bref titre ou une explication pour le paramètre contrôlé par le commutateur. L'étiquette sera positionnée sur le côté gauche de l'interrupteur. |
booléen | Pour indiquer si une action est en cours, notamment dans le cas où elle prend plus d'une seconde à se terminer, vous devez afficher l'état de chargement. Le commutateur n'est pas interactif pendant le chargement. Si l'action associée à l'état de chargement échoue, la propriété cochée doit être réinitialisée à sa valeur précédente. |
fonction | Rappel déclenché à chaque fois que l'utilisateur bascule le commutateur. L'état vérifié actuel peut être évalué dans le rappel via function ( |
énumération[] | Propriété d'espacement. L'espacement est défini comme un uplet de zéro à quatre valeurs, qui suivent les mêmes conventions que les propriétés CSS comme <Array of |
objet | Style en ligne pour un style personnalisé. Doit être utilisé uniquement à des fins de positionnement et d'espacement. |
chaîne | Ajoute un attribut |