Menú desplegable de React Suite utilizado con botones

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 que proporcionan componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre el menú desplegable de la suite React que se usa con los botones. El menú del menú desplegable también se puede crear utilizando un componente Botón.

Accesorios desplegables:

• activeKey: Esto se utiliza para configurar la opción de activar el estado que corresponde a la clave del evento en el componente Dropdown.item.
• classPrefix: Esto se usa para indicar el prefijo de la clase CSS del componente.
• disabled: se utiliza para indicar si el componente está deshabilitado o no.
• icono: Esto se utiliza para establecer el icono.
• menuStyle: Esto se utiliza para cambiar el estilo del menú.
• onClose: esta es una función de devolución de llamada de cierre de menú.
• onOpen: esta es una función de devolución de llamada abierta de menú.
• onSelect: esta es una función de devolución de llamada seleccionada.
• onToggle: esta es una función de devolución de llamada para cambiar el estado del menú.
• abierto: Esto indica si el menú desplegable está abierto.
• colocación: Esto se utiliza para la colocación del menú.
• renderToggle: esto se usa para indicar el título personalizado
• título: el menú muestra por defecto el contenido.
• toggleAs: Esto ayuda a usar un elemento personalizado para este componente.
• toggleClassName: Esto se usa para aplicar CSS al Node Toggle DOM
• Trigger: Esto se utiliza para los eventos Triggering.

Desplegable.Accesorios de elementos:

• activo: Esto se utiliza para activar la opción actual.
• as: Esto ayuda a usar un tipo de elemento personalizado para este componente.
• classPrefix : Esto se usa para indicar el prefijo de la clase CSS del componente.
• disabled: se utiliza para desactivar la opción actual.
• divisor: Esto se utiliza para mostrar el divisor.
• eventKey: se utiliza para indicar el valor de la opción actual.
• icono: Esto se utiliza para establecer el icono.
• onSelect: Esto selecciona una función de devolución de llamada para la opción actual.
• panel: Esto se utiliza para mostrar un panel personalizado.

Accesorios del menú desplegable:

• icono: Esto se utiliza para establecer el icono.
• título: Esto se utiliza para definir el título como un submenú.

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 { Popover, Whisper, Dropdown, Button } from "rsuite/";

// App.Js File
const renderMenu = () => {
  return (
    <Popover>
      <Dropdown.Menu>
          <Dropdown.Item eventKey={1}>...</Dropdown.Item>
      </Dropdown.Menu>
    </Popover>
  );
};

Function App () {
return (
   <Whisper>
     <Button appearance="primary" color="green">
       ...
     </Button>
   </Whisper>
 );
}

Ejemplo 1: El siguiente ejemplo muestra un menú desplegable usando un botón básico.

//Apps.js File
  
import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Popover, Whisper, Dropdown, 
    Button } from "rsuite/";
  
const renderMenu = ({ left, top, className }, ref) => {
  
    return (
        <Popover ref={ref} 
            className={className} 
            style={{ left, top }} full>
            <Dropdown.Menu title="Create new file">
                <Dropdown.Item eventKey={1}>
                    Create new
                </Dropdown.Item>
                <Dropdown.Item eventKey={2}>
                    Export file
                </Dropdown.Item>
                <Dropdown.Item eventKey={3}>
                    Download file
                </Dropdown.Item>
            </Dropdown.Menu>
        </Popover>
    );
};
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Dropdown used with Button
                </h4>
  
                <Whisper placement="bottomStart" 
                    trigger="click" speaker={renderMenu}>
                    <Button appearance="primary" color="green">
                        Select Option
                    </Button>
                </Whisper>
            </div>
        </center>
    );
}

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra un menú desplegable usando Botón con iconos.

import React from "react";
import "rsuite/dist/rsuite.min.css";
import PageIcon from '@rsuite/icons/Page';
import FileDownloadIcon from '@rsuite/icons/FileDownload';
import DetailIcon from '@rsuite/icons/Detail';
import { Popover, Whisper, Dropdown, 
    IconButton } from "rsuite/";
  
const renderMenu = ({ left, top, className }, ref) => {
    return (
        <Popover ref={ref} className={className} 
            style={{ left, top }} full>
            <Dropdown.Menu title="Create new file">
                <Dropdown.Item icon={<PageIcon />} 
                    eventKey={1}>Create new file
                </Dropdown.Item>
                <Dropdown.Item icon={<FileDownloadIcon />} 
                    eventKey={2}>Export file
                </Dropdown.Item>
                <Dropdown.Item icon={<DetailIcon />} 
                    eventKey={3}>Download file
                </Dropdown.Item>
            </Dropdown.Menu>
        </Popover>
    );
};
  
export default function App() {
    return (
        <center>
            <div style={{ padding: 20 }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Dropdown used with Button
                </h4>
  
                <Whisper placement="bottomStart" 
                    trigger="click" speaker={renderMenu}>
                    <IconButton appearance="primary" 
                        color="blue" icon={<PageIcon />}>
                        Create new
                    </IconButton>
                </Whisper>
            </div>
        </center>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/dropdown/#used-with-buttons