React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente de alternancia Podemos usar el siguiente enfoque en ReactJS para usar el componente de alternancia de React Suite.
Alternar accesorios:
| comprobado | Se utiliza para el estado verificado (Controlado). |
| niños marcados: | Se utiliza para comprobar el contenido de la pantalla. |
| prefijo de clase | Se utiliza para indicar el prefijo de la clase CSS del componente. |
| por defecto marcado | Se utiliza para denotar el valor predeterminado marcado. |
| desactivado: | Se utiliza para deshabilitar el componente. |
| onChange | Es una función de devolución de llamada que se activa cuando cambia el estado. |
| Talla | Se utiliza para indicar el tamaño de alternar. |
| niños no marcados: | Se utiliza para deseleccionar el contenido de la pantalla. |
Creación de la aplicación React e instalación del módulo:
-
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app foldername
-
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta , muévase a ella con el siguiente comando:
cd foldername
-
Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:
npm install rsuite
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
// Importing required libraries
import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Toggle } from 'rsuite';
export default function App() {
// State for the current toggle value
const [currentValue, setCurrentValue] = React.useState(0)
return (
<div style={{
display: 'block', width: 400, paddingLeft: 30
}}>
<h4>React Suite Toggle Component</h4>
<Toggle
onChange={(value) => { setCurrentValue(value) }}
/>
{currentValue === true ? "Toggle On" : "Toggle Off"}
</div>
);
}
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Producción:
Ahora abra su navegador y vaya a http://localhost:3000/ , verá el siguiente resultado:
Referencia: https://rsuitejs.com/components/toggle/
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA