Creación de popovers, alertas y brindis con Blueprint UI en React

Blueprint UI es un popular kit de herramientas de React UI que proporciona un conjunto de componentes y estilos reutilizables para crear aplicaciones web modernas. Una de las características clave de la interfaz de usuario de Blueprint es su compatibilidad con la creación de ventanas emergentes, alertas y brindis, que son componentes esenciales para mostrar información y comentarios a los usuarios.

Instalación de la interfaz de usuario de Blueprint

Para comenzar con Blueprint UI, primero deberá instalarlo. Puede hacer esto usando cualquier administrador de paquetes de su elección.

Para instalarlo usando npm, el administrador de paquetes de JavaScript, ejecuta el siguiente comando en tu terminal:

npm instalar @blueprintjs/core

Después de instalar Blueprint UI, debe importar los archivos CSS de la biblioteca:

@importar"normalizar.css";
@importar"@blueprintjs/core/lib/css/blueprint.css";
@importar"@blueprintjs/icons/lib/css/blueprint-icons.css";

Al importar estos archivos, podrá integrar los estilos de la interfaz de usuario de Blueprint con los componentes que ofrece la interfaz de usuario de Blueprint.

Creación de ventanas emergentes mediante la interfaz de usuario de Blueprint

Los popovers son información sobre herramientas que aparecen cuando el usuario pasa el cursor sobre un elemento o hace clic en él. Proporcionan información adicional u opciones al usuario.

Para crear popovers en su aplicación React usando Blueprint UI, debe instalar Blueprint UI Popover2 componente.

Para hacer esto, ejecute el siguiente código en su terminal:

instalación npm --guardar @blueprintjs/popover2

Asegúrese de importar la hoja de estilo del paquete en su archivo CSS:

@importar"@blueprintjs/popover2/lib/css/blueprint-popover2.css";

Después de importar la hoja de estilo, puede usar el Popover2 componente para crear popovers en su aplicación.

Por ejemplo:

importar Reaccionar de"reaccionar";
importar { Botón } de"@blueprintjs/núcleo";
importar { Popover2 } de"@blueprintjs/popover2";
funciónaplicación() {
constante popoverContent = (



Título emergente</h3>


Este es el contenido dentro de la ventana emergente.</p>
 </div>
 );
devolver (




"éxito" texto="Haz click en mi" />
 </Popover2>
 </div>
 );
}

exportarpor defecto aplicación;

Este código crea un popover usando el Popover2 componente. También define un popoverContenido variable, que contiene el código JSX para el contenido emergente.

El Popover2 componente toma el popoverContenido como el valor de su contenido apuntalar. El contenido prop especifica el contenido que se muestra dentro de la ventana emergente. Aquí el Popover2 componente envuelve un Botón componente. Esto hace que se muestre la ventana emergente al hacer clic en el botón.

El popover parece simple, como se muestra aquí:

Puede diseñar el contenido de la ventana emergente pasando un nombre de la clase apoyo a la popoverContenido Código JSX:

constante popoverContent = (
'popover'>
Título emergente</h3>


Este es el contenido dentro de la ventana emergente.</p>
 </div>
);

Luego puede definir la clase CSS en su archivo CSS:

.popover {
relleno: 1movimiento rápido del ojo;
color de fondo: #e2e2e2;
Familia tipográfica: cursivo;
}

Ahora el popover debería verse un poco mejor:

El Popover2 El componente requiere algunos accesorios que lo ayudarán a configurarlo para que se adapte a sus necesidades. Algunos de estos accesorios son popoverClassName, enInteracción, Esta abierto, mínimo, y colocación.

El colocación prop determina la posición preferida del popover en relación con el elemento de destino. Sus valores disponibles son:

• auto
• autoencendido
• finalización automática
• arriba
• comienzo superior
• extremo superior
• abajo
• abajo-comienzo
• extremo inferior
• bien
• buen comienzo
• extremo derecho
• izquierda
• comienzo izquierdo
• extremo izquierdo

Con el popoverClassName, puede definir un nombre de clase CSS para el elemento emergente. Primero creará una clase CSS en su archivo CSS para usar la propiedad.

Por ejemplo:

popover personalizado {
color de fondo: #e2e2e2;
sombra de la caja: 0 10píxeles 15píxeles-3pxRGB(0 0 0 / 0.1);
borde-radio: 12píxeles;
relleno: 1movimiento rápido del ojo;
}

Después de crear la clase CSS, use el popoverClassName prop para aplicar el estilo personalizado al componente Popover2:

 contenido={popoverContent}
 ubicación ="extremo inferior"
 popoverClassName="popover personalizado"
 mínimo={verdadero}
>
"éxito" texto="Haz click en mi" />
</Popover2>

El mínimo prop controla el estilo del popover. La propiedad acepta un valor booleano. Si se establece en verdadero, la ventana emergente tendrá un estilo mínimo, sin flecha y una apariencia de cuadro simple.

Creación de alertas

Las alertas son notificaciones que aparecen en la pantalla para informar al usuario de información o acciones importantes. Se utilizan comúnmente para mostrar mensajes de error, mensajes de éxito o advertencias.

La creación de alertas en Blueprint UI es similar a crear alertas usando Chakra UI. Utilizará el componente Alerta para crear una alerta en su aplicación React utilizando la interfaz de usuario de Blueprint.

Aquí hay un ejemplo:

importar Reaccionar de"reaccionar";
importar { Alerta, Botón } de"@blueprintjs/núcleo";
funciónaplicación() {
constante [isOpen, setIsOpen] = React.useState(FALSO);
constante manija abierta = () => {
 setIsOpen(verdadero);
 };
constante manejarCerrar = () => {
 setIsOpen(FALSO);
 };
devolver (



"Cerca">
Este es un mensaje de alerta</p>
 </Alert>
"Haz click en mi" intención="éxito" onClick={manejarAbrir} />
 </div>
 );
}
exportarpor defecto aplicación;

Este ejemplo muestra cómo debe importar el Alerta componente de la @blueprintjs/núcleo paquete. El Alerta componente muestra un mensaje de alerta en la pantalla. También se necesitan tres accesorios: Esta abierto, onClose, y confirmarButtonText.

El Esta abierto prop determina si la alerta es visible o no. Establézcalo en verdadero para mostrar la alerta y en falso para ocultarla. El onClose prop es una función de devolución de llamada que se ejecuta cuando un usuario cierra la alerta.

Por último, el confirmarButtonText prop determina el texto que se muestra en el botón de confirmación.

La notificación de alerta en este ejemplo se verá así:

Creación de brindis con la interfaz de usuario de Blueprint

Los brindis son notificaciones que aparecen en la pantalla para informar al usuario de información o eventos importantes. Son similares a las alertas, pero suelen ser menos intrusivas y desaparecen rápidamente.

Para crear un brindis en su aplicación React usando Blueprint UI, use el SuperposiciónTostadora componente. El SuperposiciónTostadora El componente crea una instancia de Toaster que luego se usa para crear brindis individuales.

Por ejemplo:

importar Reaccionar de"reaccionar";
importar { OverlayToaster, Botón } de"@blueprintjs/núcleo";
constante ToasterInstance = OverlayToaster.create({ posición: "parte superior derecha" });
funciónaplicación() {
constante mostrarbrindis = () => {
 tostadoraInstance.show({
 mensaje: "Esto es un brindis",
 intención: "primario",
 se acabó el tiempo: 3000,
 se muestra el botón Cerrar: FALSO,
 icono: "marcador",
 });
 };
devolver (



"Haz click en mi" intención="éxito" onClick={mostrarToast} />
 </div>
 );
}
exportarpor defecto aplicación;

El bloque de código anterior utiliza el OverlayToaster.create para generar la instancia de la tostadora y especifica su posición usando el posición apuntalar.

También define la función showbrindis. Esta función utiliza el espectáculo metodo de la tostadoraInstancia para mostrar el brindis cuando se le llame. El espectáculo El método toma un objeto con el mensaje, intención, se acabó el tiempo, se muestra el botón Cerrar, y icono accesorios.

El mensaje prop especifica el contenido de texto del brindis, mientras que el intención prop especifica el tipo de brindis. El estilo del brindis variará según su valor.

Puede controlar cuánto tiempo se muestra la notificación de brindis usando el se acabó el tiempo apuntalar. El icono prop especifica un elemento de icono para mostrar en el brindis. Con el se muestra el botón Cerrar prop, puede controlar si el botón de cerrar se muestra en el brindis.

El bloque de código de arriba generará un hermoso brindis cuando haga clic en el botón, como se ve en la imagen de abajo.

Si está buscando crear atractivas notificaciones de brindis en su aplicación React, Blueprint UI es una excelente opción. Proporciona una amplia gama de componentes predefinidos que puede usar para crear notificaciones que coincidan con el estilo de su aplicación.

Sin embargo, si está trabajando en un proyecto pequeño que no requiere todas las características de Blueprint UI, React Toastify es una alternativa liviana para crear hermosas notificaciones.

Mejora de la experiencia del usuario con notificaciones emergentes, ventanas emergentes y alertas

Aprendió a crear popovers, alertas y brindis en su aplicación React usando Blueprint UI. Estos componentes son esenciales para proporcionar información y comentarios a los usuarios y pueden mejorar significativamente la experiencia de usuario de su aplicación. Puede crear fácilmente estos componentes utilizando la información que ha obtenido con un mínimo esfuerzo y personalización.