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_bouton.is_text  = "&Guardar"               // & = letra subrayada (mnemotecnico)
uo_bouton.is_style = uo_bouton.STYLE_PRIMARY // boton de accion principal
uo_bouton.is_image = "mono:img\save.svg"     // icono recoloreado por el tema
uo_bouton.is_shortcut = "Ctrl+S"             // atajo mostrado y activo
uo_bouton.is_tooltip = "Guarda el expediente en curso"

// event ue_clicked de uo_bouton
of_enregistrer()

Constantes #

Propiedades #

Métodos #

Eventos #

Ejemplos #

Los tres estilos #

uo_ok.is_text     = "Aceptar"
uo_ok.is_style    = uo_ok.STYLE_PRIMARY
uo_ok.ib_default  = true          // tecla Intro

uo_annuler.is_text   = "Cancelar"
uo_annuler.is_style  = uo_annuler.STYLE_STANDARD
uo_annuler.ib_cancel = true       // tecla Esc

uo_aide.is_text  = "Ayuda"
uo_aide.is_style = uo_aide.STYLE_FLAT   // discreto, sin borde

Icono y distintivo de notificación #

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_non_lus

// 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(200, 30, 30)

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

Etiqueta enriquecida #

uo_bouton.is_text = "[b]Exportar[/b] [size-=20]· CSV[/size-=20]"
uo_bouton.is_text = "Estado [picture=mono:img\ok.svg,14,14]"

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

uo_valider.of_set_redraw(false)

uo_valider.is_text     = "&Confirmar el pedido"
uo_valider.is_style    = uo_valider.STYLE_PRIMARY
uo_valider.is_shortcut = "Ctrl+Enter"
uo_valider.ib_default  = true
uo_valider.is_super_tooltip_title = "Confirmar"
uo_valider.is_super_tooltip_text  = "Envía el pedido al proveedor." &
                                    + "[br][br][size-=15]Acción irreversible.[/size-=15]"

uo_valider.of_set_redraw(true)

Reaccionar al paso del cursor #

uo_bouton.ib_track_mouse = true

// event ue_mouse_enter de uo_bouton
uo_statut.of_item("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