Componente DropDownButton

¿Qué es el componente DropDownButton?

El componente DropDownButton muestra un menú desplegable cuando se hace clic en su botón principal. Permite crear menús contextuales con opciones personalizables.

¿Cómo se utiliza el componente DropDownButton?

Para usar el componente DropDownButton, importa la clase y configura sus propiedades:


import DropDownButton, { DropDownContentStyle, DropDownPosition } from "@seigenta/TypesCraft/widgets/dropDownButton";
import { FloatingButton, Text } from "@seigenta/TypesCraft/widgets";
import { Color, EdgeSize } from "@seigenta/TypesCraft/widgets/utils";

// Uso básico
new DropDownButton({
    builder: (ctx, open) => new FloatingButton({
        child: new Text({ text: 'Menú' }),
        onPressed: open
    }),
    options: [
        {
            widget: new Text({ text: 'Opción 1' }),
            onTap: () => console.log('Opción 1 seleccionada')
        },
        {
            widget: new Text({ text: 'Opción 2' }),
            onTap: () => console.log('Opción 2 seleccionada')
        }
    ]
})

Propiedades del componente

El componente DropDownButton acepta las siguientes propiedades:

  • builder: (Context, Function) => Widget - Función que crea el botón principal
  • options: Array de objetos - Opciones del menú desplegable
  • contentStyle?: DropDownContentStyle - Estilo del contenido desplegable
  • position?: DropDownPosition - Posición del menú (topLeft, topRight, bottomLeft, bottomRight)
  • key?: string - Identificador único

DropDownContentStyle - Propiedades de estilo

El objeto DropDownContentStyle permite configurar:

  • backgroundColor?: Color - Color de fondo
  • padding?: EdgeSize - Relleno interno
  • height?: Size - Altura del menú
  • width?: Size - Ancho del menú
  • border?: BorderStyle - Borde del menú
  • boxShadow?: BoxShadow[] - Sombras del menú
  • css?: Css - Estilos CSS personalizados

Ejemplos de uso

Ejemplo básico con menú simple:


new DropDownButton({
    builder: (ctx, open) => new FloatingButton({
        child: new Text({ text: 'Opciones' }),
        onPressed: open
    }),
    options: [
        { widget: new Text({ text: 'Editar' }), onTap: () => editItem() },
        { widget: new Text({ text: 'Eliminar' }), onTap: () => deleteItem() }
    ],
    contentStyle: new DropDownContentStyle({
        backgroundColor: Color.hex("#ffffff"),
        padding: EdgeSize.all(Size.px(8))
    })
})

Ejemplo avanzado con posición personalizada y sombra:


new DropDownButton({
    builder: (ctx, open) => new IconButton({
        icon: 'more_vert',
        onPressed: open
    }),
    options: [
        { widget: new Text({ text: 'Compartir' }), onTap: shareItem },
        { widget: new Text({ text: 'Descargar' }), onTap: downloadItem },
        { widget: new Text({ text: 'Reportar' }), onTap: reportItem }
    ],
    position: DropDownPosition.bottomRight,
    contentStyle: new DropDownContentStyle({
        backgroundColor: Color.hex("#ffffff"),
        padding: EdgeSize.symmetric({ vertical: Size.px(8) }),
        width: Size.px(200),
        boxShadow: [BoxShadow.elevation(4)],
        border: BorderStyle.all(Size.px(1), Color.hex("#e0e0e0"))
    })
})

Comportamiento

El componente DropDownButton:

  • Muestra/oculta el menú al hacer clic en el botón principal
  • Cierra automáticamente al hacer clic fuera o seleccionar una opción
  • Permite múltiples posiciones de despliegue (arriba/abajo, izquierda/derecha)
  • Genera estilos CSS eficientes reutilizables
  • Maneja dinámicamente actualizaciones de opciones y botón