wiki-Dropdown

Ver en Git

---

Dropdown

Referencia de la API

Propiedad	Tipo	Predeterminado	Descripción
children	ReactNode	Obligatorio	Elemento o contenido que activa el menú desplegable.
menu	ReactNode	Obligatorio	Contenido o elementos que se mostrarán dentro del menú desplegable.
dropdownRender	(menu: ReactNode) => ReactNode	undefined	Función para personalizar el renderizado del menú desplegable.
dropdownClassName	string	undefined	Clase CSS adicional para el menú desplegable.
childrenContainerClassName	string	undefined	Clase CSS adicional para el contenedor de los elementos hijos.
className	string	undefined	Clase CSS adicional para el contenedor principal.
style	CSSProperties	undefined	Estilos en línea para personalizar el contenedor principal.
direction	'bottom'	'bottomLeft'	'bottomRight'
corner	'bottomLeft'	'bottomRight'	'topLeft'
trigger	Array<'click' | 'hover'>	['click']	Define cómo se activará el menú desplegable (click, hover o ambos).
open	boolean	undefined	Controla manualmente el estado de apertura del menú.
onOpenChange	(open: boolean) => void	undefined	Función que se ejecuta al cambiar el estado de apertura del menú.
mask	boolean	false	Si es true, se muestra una máscara semitransparente detrás del menú desplegable.
disabled	boolean	false	Deshabilita la interacción con el menú desplegable.
aura-test	string	'dropdown'	Identificador para pruebas automatizadas.

Ejemplo de Uso

import { useState } from 'react';
import { Dropdown } from '@auravant/ui-kit';

export const DropdownExample = () => {
 const [isOpen, setIsOpen] = useState(false);

 const handleOpenChange = (open: boolean) => setIsOpen(open);

 return (
 <Dropdown
 menu={<div style={{ padding: '10px' }}>Contenido del Menú</div>}
 className="custom-dropdown"
 dropdownClassName="custom-menu"
 trigger={['click']}
 open={isOpen}
 onOpenChange={handleOpenChange}
 direction="bottomLeft"
 >
 <button>Click</button>
 </Dropdown>
 );
};

Notas

• Eventos Globales: El componente escucha eventos globales como click, scroll y resize para gestionar el cierre y reposicionamiento dinámico.
• Elementos Responsivos: Si la ventana tiene un ancho menor a 540px, el menú se renderiza dentro de un contenedor específico.