Panel y divisor desplegable de React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. El componente desplegable permite al usuario proporcionar una navegación que utiliza un selector de selección si desea seleccionar un valor. 

Dividir y Panel se utilizan en el menú desplegable para establecer las opciones de división y el panel de configuración, respectivamente. Las opciones de división significan que podemos poner una barra horizontal para separar diferentes elementos desplegables. La palabra clave se utiliza panel. Panelar significa agrupar algunas declaraciones en un panel. La palabra clave utilizada es el divisor.

Sintaxis:

<Dropdown title="GeeksforGeeks">
    <Dropdown.Item panel >
        {some statements}
    </Dropdown.Item>
    <Dropdown.Item divider />
    <Dropdown.Item>{Items}</Dropdown.Item>
</Dropdown>

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

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

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Tendrá el siguiente aspecto.

 

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. En este ejemplo, crearemos un menú desplegable y mostraremos el lenguaje de programación en la primera división y algunas otras opciones en la segunda división. En Panel, mostraremos «GeeksforGeeks» así como un Avatar.

import React from 'react';
import Dropdown from 'rsuite/Dropdown';
import 'rsuite/dist/rsuite.min.css';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
  
function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
              
            <h3>React Suite Dropdown Divider and Panel</h3>
              
            <Dropdown title="Divider and Panel">
                <Dropdown.Item panel 
                    style={{ padding: 10, width: 160 }} >
                    <Stack direction="row" >
                        GeeksforGeeks Panel 
                        <Avatar sx={{ 
                            bgcolor: 'green', 
                            color: 'white' 
                        }}>
                            G
                        </Avatar>
                    </Stack>
                </Dropdown.Item>
  
                <Dropdown.Item divider />
                <Dropdown.Item>C++</Dropdown.Item>
                <Dropdown.Item>Java</Dropdown.Item>
                <Dropdown.Item>C#</Dropdown.Item>
                <Dropdown.Item>Python</Dropdown.Item>
                <Dropdown.Item>Javascript</Dropdown.Item>
  
                <Dropdown.Item divider />
                <Dropdown.Item>Help</Dropdown.Item>
                <Dropdown.Item>Contribute</Dropdown.Item>
                <Dropdown.Item>Careers</Dropdown.Item>
            </Dropdown>
        </div>
    )
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida:

 

Ejemplo 2: En este ejemplo, aprenderemos cómo dar estilo al divisor y al panel. Crearemos un divisor de color rojo y agregaremos algo de estilo al texto del Panel. Además, verá algunos estilos en el elemento desplegable.

import React from 'react';
import Dropdown from 'rsuite/Dropdown';
import 'rsuite/dist/rsuite.min.css';
import Avatar from '@mui/material/Avatar';
import Stack from '@mui/material/Stack';
  
function App() {
    return (
        <div>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
              
            <h3>React Suite Dropdown Divider and Panel</h3>
              
            <Dropdown title="Divider and Panel">
                <Dropdown.Item panel style={{ 
                    padding: 10, 
                    width: 160, 
                    color: 'green' 
                }} >
                    <Stack direction="row" >
                        GeeksforGeeks Panel 
                        <Avatar sx={{ 
                            bgcolor: 'green', 
                            color: 'white' 
                        }}>
                            G
                        </Avatar>
                    </Stack>
                </Dropdown.Item>
  
                <Dropdown.Item divider 
                    style={{ background: 'red' }} />
  
                <Dropdown.Item style={{ 
                    background: 'green', 
                    color: 'white' 
                }}>
                    DSA
                </Dropdown.Item>
                <Dropdown.Item style={{ 
                    background: 'green', 
                    color: 'white' 
                }}>
                    Blockchain
                </Dropdown.Item>
                <Dropdown.Item style={{ 
                    background: 'green', 
                    color: 'white' 
                }}>
                    Web Technology
                </Dropdown.Item>
                <Dropdown.Item style={{ 
                    background: 'green', 
                    color: 'white' 
                }}>
                    Engineering Mathematics
                </Dropdown.Item>
                <Dropdown.Item style={{ 
                    background: 'green', 
                    color: 'white' 
                }}>
                    Machine Learning
                </Dropdown.Item>
  
                <Dropdown.Item divider 
                    style={{ background: 'red' }} />
                <Dropdown.Item style={{ 
                    background: 'green', 
                    color: 'white' 
                }}>
                    Help
                </Dropdown.Item>
                <Dropdown.Item style={{ 
                    background: 'green', 
                    color: 'white' 
                }}>
                    Contribute
                </Dropdown.Item>
                <Dropdown.Item style={{ 
                    background: 'green', 
                    color: 'white' 
                }}>
                    Careers
                </Dropdown.Item>
            </Dropdown>
        </div>
    )
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/dropdown/#divider-and-panel