Una suite de React es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.
En este artículo, aprenderemos sobre los íconos de mensajes de React Suite. Se utiliza un componente de mensaje para mostrar consejos importantes en una página. React suite proporciona 4 tipos de íconos (información, advertencia, error, éxito) que se pueden usar con el componente de mensaje.
Accesorios de mensaje
- children: Proporciona la información de descripción del mensaje.
- classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
- closable: Da si cerrar el cuadro de mensaje.
- full: Llena el contenedor de mensajes.
- header: Proporciona el título del mensaje.
- onClose: Se llama después de que se cierra el mensaje.
- showIcon: Se utiliza para mostrar o no un icono.
- tipo: Muestra el tipo de cuadro de mensaje. Cuatro tipos incluyen información, advertencia, error y éxito.
Sintaxis:
//Import Statement import { Message } from "rsuite"; //Function component Function App () { return ( <Message showIcon closable type="warning" header="Warning"> ... </Message> ); }
Ejemplo 1: El siguiente ejemplo demuestra el mensaje básico con iconos.
Javascript
import React from "react"; import { Message } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div style={{ padding: 10 }}> <h2>GeeksforGeeks</h2> <h3 style={{ color: 'green' }}> React Suite Message Icons</h3> <div> <Message showIcon type="info"> Want more info about GFG courses? </Message> <Message showIcon type="success"> Great! You purchased a course. </Message> </div> </div> ); } export default App;
Producción:
Ejemplo 2: el siguiente ejemplo muestra el mensaje que se puede cerrar con iconos.
Javascript
import React from "react"; import { Message } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { return ( <div style={{ padding: 10 }}> <h2>GeeksforGeeks</h2> <h3 style={{ color: "green" }}> React Suite Message Icons</h3> <div> <Message showIcon closable type="warning" header="Warning"> Don't forget to check your email for the latest updates. </Message> <Message showIcon closable type="error" header="Error"> Something went wrong. Please try again later. </Message> </div> </div> ); } export default App;
Producción:
Referencia: https://rsuitejs.com/components/message/#icons
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA