React Suite Popover Activación de eventos

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 la ubicación de la ventana emergente de la suite React. El popover se usa para mostrar la información emergente que se activa en cualquier evento sobre la ventana principal. Para usar popover, usamos el susurro que nos proporciona eventos desenstringntes, que se usan para controlar la visualización de Popover en diferentes eventos. Estos se dan a continuación:

Eventos desenstringntes de susurros:

• clic: este evento se activa cuando se hace clic en el elemento y se cierra cuando se vuelve a hacer clic.
• contextMenu: este evento se activa cuando activa contextMenu en el elemento.
• foco: este evento se activa cuando el usuario hace clic o toca un elemento o lo selecciona con la tecla de tabulación del teclado.
• hover: este evento se activa cuando el cursor (puntero del mouse) se desplaza sobre el elemento.
• activo: Este evento se desenstring cuando el elemento se activa.
• ninguno: ningún evento desenstringnte, generalmente se usa cuando necesita ser desenstringdo por un método.

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:

 

Sintaxis:

// import statement
import { Button, Popover, Whisper } from "rsuite/";

// App.JS file
const speaker = (
    <Popover>
          ...
      </Popover>
)

function App() {
    <Whisper trigger="active" speaker="speaker">
        <Button>...<Button>
    </Whisper>
}

Ejemplo 1: El siguiente ejemplo demuestra todos los eventos desenstringntes de Popover.

import React from "react";
import { Button, ButtonToolbar, Popover, Whisper } from "rsuite/";
import "rsuite/dist/rsuite.min.css";
  
const popoverText = (
    <Popover title="GeeksforGeeks">
        <p>Hi! Geek. </p>
        <p>Hope you're doing great!</p>
    </Popover>
);
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Popover Triggering Events
                </h4>
  
                <div style={{ marginTop: 20 }}>
                    <ButtonToolbar>
                        <Whisper
                            placement="bottom"
                            trigger="click"
                            controlId="control-id-click"
                            speaker={popoverText}
                        >
                            <Button color="primary">
                                Click event
                            </Button>
                        </Whisper>
                        <Whisper placement="bottom" 
                            trigger="contextMenu" 
                            speaker={popoverText}>
                            <Button color="primary">
                                ContextMenu event
                            </Button>
                        </Whisper>
                        <Whisper
                            placement="bottom"
                            trigger="focus"
                            controlId="control-id-focus"
                            speaker={popoverText}
                        >
                            <Button color="primary">
                                Focus event
                            </Button>
                        </Whisper>
                        <Whisper
                            placement="bottom"
                            trigger="active"
                            controlId="control-id-active"
                            speaker={popoverText}
                        >
                            <Button color="primary">
                                Active event
                            </Button>
                        </Whisper>
                        <Whisper
                            placement="bottom"
                            trigger="hover"
                            controlId="control-id-hover"
                            speaker={popoverText}
                        >
                            <Button color="primary">
                                Hover event
                            </Button>
                        </Whisper>
                        <Whisper
                            placement="bottom"
                            trigger="hover"
                            controlId="control-id-hover-enterable"
                            speaker={popoverText}
                            enterable
                        >
                            <Button color="primary">
                                Hover + Enter event
                            </Button>
                        </Whisper>
                    </ButtonToolbar>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo demuestra los métodos de activación de susurros abiertos y cerrados utilizados en un popover.

import React, { useRef } from "react";
import { Button, ButtonToolbar, Popover, Whisper } from "rsuite/";
import "rsuite/dist/rsuite.min.css";
  
const popoverText = (
    <Popover>
        <h3>Find new DSA Courses</h3>
        <p>DSA with Java</p>
        <p>DSA with C++</p>
    </Popover>
)
  
export default function App() {
    const trigRef = useRef();
    const openRef = () => trigRef.current.open();
    const closeRef = () => trigRef.current.close();
  
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Popover Triggering Events
                </h4>
  
                <div style={{ marginTop: 10 }}>
                    <Whisper
                        placement="bottom"
                        speaker={popoverText}
                        ref={trigRef}
                        trigger="none"
                    >
                        <ButtonToolbar>
                            <Button onClick={openRef} 
                                appearance="primary" 
                                color="green">
                                    Open Method
                            </Button>
                              
                            <Button onClick={closeRef}>
                                Close Method
                            </Button>
                        </ButtonToolbar>
                    </Whisper>
                </div>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/popover/#triggering-events