Home-theater-designers
Las alertas son mensajes que se muestran en un sitio web/aplicación web para transmitir información importante a un usuario. Desempeñan un papel crucial en las aplicaciones web. Hay muchas formas de crear alertas en React; Chakra UI hace que el proceso sea fácil y eficiente.
Chakra UI es una biblioteca de componentes popular para React que proporciona un conjunto de componentes de UI personalizables y accesibles.
MAKEUSEOF VÍDEO DEL DÍA DESPLAZAR PARA CONTINUAR CON EL CONTENIDO
Instalación de la interfaz de usuario de Chakra
Para usar la biblioteca de interfaz de usuario de Chakra, una de las muchas bibliotecas de componentes de reacción , primero debe instalarlo. Puede instalarlo ejecutando el siguiente comando de terminal en el directorio de su proyecto node.js:
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
Alternativamente, puede instalar Chakra UI usando Yarn. Para hacerlo, ejecute el siguiente comando:
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion
Configuración de la interfaz de usuario de Chakra
Después de instalar Chakra UI, debe hacer que esté disponible en su aplicación. Para hacer esto, debe configurar el ChakraProveedor componente.
El ChakraProveedor componente es un componente de nivel superior que proporciona la biblioteca de interfaz de usuario de Chakra. Envuelve toda la aplicación y proporciona el tema y el contexto de estilo a todos sus componentes.
Para configurar el ChakraProveedor componente, impórtelo desde @chakra-ui/reaccionar :
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ChakraProvider } from '@chakra-ui/react'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>
)
El ChakraProveedor componente admite un tema apuntalar. pasando el tema apoyo a la ChakraProveedor El componente garantiza que todos los componentes de la interfaz de usuario de Chakra en la aplicación puedan acceder al contexto de estilo y tema proporcionado. El tema el apoyo es opcional; si no lo pasa, Chakra UI usará un tema predeterminado.
Creación de una alerta personalizada mediante componentes de alerta
Chakra UI ofrece cuatro componentes que le permiten crear una alerta personalizada: Alerta , icono de alerta , AlertTitle , y Descripción de la alerta .
Para crear su mensaje de alerta, importe estos componentes de la biblioteca de la interfaz de usuario de Chakra y úselos de la siguiente manera:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'
function App() {
return (
<div>
<Alert status='success'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App
Después de importar los componentes, el Alerta componente muestra un mensaje al usuario. Tiene un estado prop establecido en 'éxito', lo que indica que el mensaje es un mensaje de éxito.
Hay otros tres estados: 'información', 'error' y 'advertencia'. El esquema de colores y el ícono que usa la alerta dependerán del estado del mensaje.
El Alerta El componente contiene tres hijos: icono de alerta , AlertTitle , y Descripción de la alerta . El icono de alerta componente muestra un pequeño icono junto al mensaje, AlertTitle muestra el mensaje principal y Descripción de la alerta muestra una descripción más detallada del mensaje.
El bloque de código anterior generará una alerta similar a esta:
juegos para jugar con amigos de facebook
Personalización de mensajes de alerta mediante Variant Prop
Para personalizar la apariencia del mensaje de alerta, use el variante apoyo de la Alerta componente. El variante prop define la apariencia visual del mensaje de alerta y determina el esquema de color, el icono y el peso de la fuente del mensaje en función del valor que le pasa.
El variante prop acepta varios valores de cadena como sutil , sólido , acento izquierdo , acento superior , acento derecho , y acento inferior . Cada valor representa un estilo visual diferente del mensaje de alerta.
Aquí hay un ejemplo de cuatro componentes de alerta con diferentes variantes:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Flex} from '@chakra-ui/react'
function App() {
return (
<div>
<Flex justify='center' gap='3' direction='column' mt='4'>
<Alert status='success' variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='subtle'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='top-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
<Alert status='success' variant='left-accent'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</Flex>
</div>
)
}
export default App
Al representar el bloque de código anterior, se mostrará una alerta personalizada como esta:
Personalización de sus mensajes de alerta utilizando la propiedad className
En lugar de apegarse a la apariencia predeterminada de los mensajes de alerta, puede personalizarlos usando el nombre de la clase apuntalar. usas el nombre de la clase prop para definir una clase CSS y aplicar su estilo personalizado al mensaje de alerta.
Por ejemplo:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle} from '@chakra-ui/react'
function App() {
return (
<div>
<Alert status='success' className='alert'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
</Alert>
</div>
)
}
export default App;
En este ejemplo, el componente de alerta tiene una 'alerta' de clase CSS. Después de definir la clase CSS, puede definir sus estilos en su archivo CSS.
Al igual que:
.alert {
color: red;
font-family: cursive;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
El código anterior aplicará los estilos CSS al componente de alerta. Si está familiarizado con los accesorios de estilo de la interfaz de usuario de Chakra, debe usarlos para diseñar mensajes de alerta en lugar de los nombre de la clase apuntalar.
Después de aplicar los estilos CSS anteriores, el componente de alerta se mostrará como se ve en la imagen a continuación:
Activación de mensajes de alerta en respuesta a eventos de usuario
Ha creado un componente de alerta que muestra constantemente un mensaje de alerta en la pantalla. Sin embargo, para mejorar la experiencia del usuario, puede activar el mensaje de alerta en respuesta a eventos específicos que inicia un usuario, usando detectores de eventos de JavaScript . Estos eventos pueden incluir hacer clic en un botón, enviar un formulario o encontrar un error.
Para activar su mensaje de alerta en respuesta a eventos, use React state y el mostrar accesorio de los componentes de la interfaz de usuario de Chakra.
Por ejemplo:
import React from 'react';
import {Alert, AlertIcon, AlertDescription, AlertTitle, Button, Button} from '@chakra-ui/react'
function App() {
const [display, setDisplay] = React.useState('none');
function notify() {
setDisplay('flex');
}
function close() {
setDisplay('none');
}
return (
<div className="app">
<Alert status='success' display={display} variant='solid'>
<AlertIcon />
<AlertTitle>Welcome!!!</AlertTitle>
<AlertDescription>Its nice to have you here</AlertDescription>
<Button position='absolute' top='6px' right='6px' onClick={close}/>
</Alert>
<Button onClick={notify} mt='4'>Click Me</Button>
</div>
)
}
export default App
Este bloque de código administra el estado de la pantalla de notificación con el useState gancho. Establece el estado inicial de la visualización de notificaciones en 'ninguno', lo que oculta la notificación.
Cuando el usuario hace clic en el Botón , llama a la notificar función. Llamar a la función de notificación cambia el valor de la mostrar estado de “ninguno” a “flex.”, haciendo que la notificación sea visible.
Cuando el usuario hace clic en el boton cerrar , llama a la función cerrar. Cambia el estado de la pantalla a 'ninguno', lo que oculta la notificación.
conectándose a la red pero sin acceso a Internet
Ahora puede crear alertas personalizables
Ahora ha aprendido a crear una alerta personalizada en su aplicación React utilizando la interfaz de usuario de Chakra. Con Chakra UI, crear alertas personalizadas en React es fácil e intuitivo, lo que nos permite brindar información clara y concisa a nuestros usuarios. Chakra UI proporciona muchos otros componentes de UI personalizables y accesibles para ayudarlo a crear excelentes aplicaciones React.