Accesorios emergentes de React Suite

React Suite 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 React Suite Popover Props . El popover se usa para mostrar la información emergente que se activa en cualquier evento sobre la ventana principal. Los diferentes accesorios de popover se analizan a continuación.

Accesorios popover:

ts:Accesorios de colocación:

tipo Colocación = ‘superior’ | ‘abajo’ | ‘correcto’ | ‘izquierda’ | ‘inicio inferior’ | ‘extremo inferior’ | ‘inicio superior’ | ‘superior’ | ‘inicio izquierdo’ | ‘extremoizquierdo’ | ‘inicioderecho’ | ‘extremoderecho’ | ‘automático’ | ‘autoVerticalStart’ | ‘autoVerticalEnd’ | ‘autoHorizontalStart’ | ‘autoFinHorizontal’;

<Ventana emergente> Accesorios:

• flecha: Se utiliza para mostrar o no un indicador de flecha.
• children*: Se utiliza para denotar el contenido del componente.
• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente.
• title: Se utiliza para denotar el título del componente.
• visible: se utiliza para indicar que el componente es visible de forma predeterminada.

Accesorios de susurro:

• contenedor: Se utiliza para establecer el contenedor de renderizado.
• retardo: se utiliza para indicar el tiempo de retardo.
• delayClose: se utiliza para indicar el tiempo de retraso de cierre.
• delayOpen: Se utiliza para indicar el Tiempo de retardo de apertura.
• Enterable: se utiliza para verificar si el mouse puede ingresar a la capa flotante de la ventana emergente cuando el valor del disparador está configurado para pasar el mouse.
• followCursor: se utiliza para permitir que el hablante siga el cursor.
• lleno: Se utiliza para indicar el contenido lleno del contenedor.
• onBlur: es una función de devolución de llamada que se activa al perder el foco.
• onClick: es una función de devolución de llamada que se activa en un evento de clic.
• onClose: es una función de devolución de llamada que se activa al cerrar el componente.
• onEnter: es una función de devolución de llamada que se activa antes de que se produzca la transición de la superposición.
• onEntered: es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
• onEntering: es una función de devolución de llamada que se activa cuando la superposición comienza a hacer la transición.
• onExit: es una función de devolución de llamada que se activa justo antes de que la superposición termine.
• onExited: es una función de devolución de llamada que se activa después de que la superposición finaliza la transición.
• onExiting: es una función de devolución de llamada que se activa cuando la superposición comienza a salir.
• onFocus: es una función de devolución de llamada para obtener el foco.
• onOpen: es una función de devolución de llamada que se activa cuando el componente abierto.
• colocación: Se utiliza para la colocación del componente.
• preventOverflow: se utiliza para evitar el desbordamiento de elementos flotantes.
• disparador: Se utiliza para los eventos desenstringntes.

Sintaxis:

<Whisper placement="top" trigger="click" speaker={
    <Popover arrow={false}>...</Popover>
}>
    <Button>...</Button>
</Whisper>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2 : después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Ejemplo 1: el siguiente ejemplo demuestra la ubicación, el disparador y los accesorios del altavoz del componente popover.

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Popover, Button, Whisper } from "rsuite/";
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Popover Props
                </h4>
  
                <Whisper
                    placement="bottom"
                    trigger="click"
                    speaker={
                        <Popover title="GeeksforGeeks">
                            <p>
                                You subscribed to GFG Magazine.
                            </p>
                        </Popover>
                    }>
                    <Button style={{ marginRight: 10 }}>
                        Subscribe
                    </Button>
                </Whisper>
            </div>
        </center>
    );
}

Ejecute la aplicación: ejecute su aplicación usando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Vaya a http://localhost:3000/ en su navegador para ver la salida.

 

Ejemplo 2: El siguiente ejemplo demuestra los accesorios editables y controlId del componente popover.

Nota: En el siguiente ejemplo, la ventana emergente se abre tanto al pasar el mouse como al hacer clic.

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Popover, Button, Whisper } from "rsuite/";
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Popover Props
                </h4>
  
                <Whisper
                    placement="bottom"
                    trigger="hover"
                    controlId="control-id-hover-enterable"
                    enterable
                    speaker={
                        <Popover title="GeeksforGeeks">
                            <p>
                                Thanks for subscribing GFG Magazine.
                            </p>
                        </Popover>
                    }>
                    <Button style={{ marginRight: 10 }}>
                        Subscribe
                    </Button>
                </Whisper>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/popover/#props