button — u_pbt_button #

← Referencia de componentes · Índice de la guía

Botón con tema: texto e icono, estilos, distintivo de contador, atajo de teclado, botones predeterminado y de cancelación.

⚠️ ¿Varios botones? Prefiera buttonbar: una fila en un solo componente, donde N button separados cuestan N veces la memoria (cada componente es una vista del motor). button sigue soportado para el código existente.

▶ Verlo en vivo — Aplicación de demostración, mosaico Button: la vista previa, el código que lo genera y esta página, uno al lado del otro.

De un vistazo #

Inicio rápido #

// event open de la ventana
uo_button.is_text  = "&Guardar"               // & = letra subrayada : Alt+G lo activa
uo_button.is_style = uo_button.STYLE_PRIMARY // boton de accion principal
uo_button.is_image = "mono:img\save.svg"     // icono recoloreado por el tema
uo_button.is_shortcut = "Ctrl+S"             // atajo mostrado y activo
uo_button.is_tooltip = "Guarda el expediente en curso"

// event ue_clicked de uo_button
of_save()

Constantes #

Propiedades #

Métodos #

Eventos #

Ejemplos #

Los tres estilos #

// El boton principal : responde a la tecla Intro
uo_ok.is_text     = "Aceptar"
uo_ok.is_style    = uo_ok.STYLE_PRIMARY
uo_ok.ib_default  = true          // tecla Intro

// El boton de cancelar : responde a la tecla Esc
uo_cancel.is_text   = "Cancelar"
uo_cancel.is_style  = uo_cancel.STYLE_STANDARD
uo_cancel.ib_cancel = true       // tecla Esc

// Un boton de ayuda discreto
uo_help.is_text  = "Ayuda"
uo_help.is_style = uo_help.STYLE_FLAT   // discreto, sin borde

Icono y distintivo de notificación #

// Un icono mas grande y una insignia de contador
uo_messages.is_text  = "Mensajes"
uo_messages.is_image = "mono:img\mail.svg"
uo_messages.ii_image_size = 20
uo_messages.ii_badge = 12             // distintivo "12"

// Actualizar el contador: el distintivo desaparece en 0
uo_messages.ii_badge = ll_unread

// Un distintivo rojo para una alerta, en lugar del color del tema.
// El color del texto se elige solo para seguir siendo legible.
uo_messages.il_badge_color = RGB(/*red*/ 200, /*green*/ 30, /*blue*/ 30)

// Volver al color que viene del tema
uo_messages.il_badge_color = -1

Etiqueta enriquecida #

// Texto enriquecido : negrita y tamano reducido, o una imagen en el texto
uo_button.is_text = "[b]Exportar[/b] [size-=20]· CSV[/size-=20]"
uo_button.is_text = "Estado [picture=mono:img\ok.svg,14,14]"

Botón de acción principal con atajo y ayuda #

// Congelar el dibujo durante los ajustes
uo_submit.of_set_redraw(/*on*/ false)

// Texto, estilo, atajo, boton por defecto y tooltip enriquecido
uo_submit.is_text     = "&Confirmar el pedido"
uo_submit.is_style    = uo_submit.STYLE_PRIMARY
uo_submit.is_shortcut = "Ctrl+Enter"
uo_submit.ib_default  = true
uo_submit.is_super_tooltip_title = "Confirmar"
uo_submit.is_super_tooltip_text  = "Envía el pedido al proveedor." &
                                    + "[br][br][size-=15]Acción irreversible.[/size-=15]"

// Un solo redibujado, con todo
uo_submit.of_set_redraw(/*on*/ true)

Reaccionar al paso del cursor #

// Raise ue_mouse_enter and ue_mouse_leave when the pointer comes and goes
uo_button.ib_track_mouse = true

// event ue_mouse_enter de uo_button
uo_status.of_panel(/*key*/ "main").is_text = "Guarda el expediente en curso"

Buenas prácticas #

• Un solo botón primary por pantalla: es la acción esperada.
• ib_default e ib_cancel sustituyen la gestión manual de Intro / Esc en su ventana.
• Utilice mono: para los iconos monocromos: seguirán tanto el tema claro como el oscuro.
• Llame a of_reset() antes de reutilizar un botón para otra acción.

Heredado de la base común #

Estos miembros existen en todos los componentes visuales — no son propios de este. Se detallan una sola vez, en los capítulos transversales; esta tabla solo dice dónde leerlos.

Dos ayudas no se heredan: of_icon y of_escape_markup viven en n_pbt_utils. Declare uno — n_pbt_utils lnv_utils, nada que crear — y llámelas sobre él.

← Referencia de componentes · Índice de la guía