ReactJS Onsen-UI es una biblioteca front-end popular con un conjunto de componentes React diseñados para desarrollar aplicaciones web HTML5 híbridas y móviles de manera hermosa y eficiente. Podemos usar el siguiente enfoque en ReactJS para usar el componente de diálogo Onsen-UI.
Accesorios de diálogo:
- onCancel: es una función de devolución de llamada que se activa solo si isCancelable es verdadero.
- isOpen: Se utiliza para indicar si el diálogo está abierto y se muestra o no.
- isCancelable: se utiliza para especificar si el diálogo es cancelable o no.
- isDisabled: se utiliza para especificar si el diálogo está deshabilitado o no.
- animación: se utiliza para indicar la animación utilizada al mostrar y ocultar el diálogo.
- modificador: Se utiliza para la apariencia del diálogo.
- maskColor: se utiliza para indicar el color de la máscara de fondo.
- animationOptions: se utiliza para especificar la duración, el retraso y el tiempo de la animación.
- onPreShow: es una función de devolución de llamada que se activa justo antes de que se muestre el cuadro de diálogo de alerta.
- onPostShow: es una función de devolución de llamada que se activa justo después de que se muestra el cuadro de diálogo de alerta.
- onPreHide: es una función de devolución de llamada que se activa justo antes de que se oculte el cuadro de diálogo de alerta.
- onPostHide: es una función de devolución de llamada que se activa justo después de que se oculta el cuadro de diálogo de alerta.
- onDeviceBackButton: es un controlador personalizado para el botón de retroceso del dispositivo.
Modificadores preestablecidos:
- material: se utiliza para mostrar el diálogo de diseño de materiales.
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 , acceda 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 onsenui react-onsenui
Estructura del proyecto: Tendrá el siguiente aspecto.
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.
Javascript
import React from 'react'; import 'onsenui/css/onsen-css-components.css'; import { Dialog } from 'react-onsenui'; export default function App() { const [isOpen, setIsOpen] = React.useState(false) return ( <div style={{ display: 'block', width: 500, paddingLeft: 30 }}> <h6>ReactJS Onsen-UI Dialog Component</h6> <button onClick={() => { setIsOpen(true) }}>Open Dialog</button> <Dialog onCancel={() => { console.log("Cancel Clicked!") }} isOpen={isOpen} style={{ height: 250 }} cancelable> <h2>Sample Dialog Title</h2> </Dialog> </div> ); }
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Referencia: https://onsen.io/v2/api/react/Dialog.html
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA