button — u_pbt_button #

← Referência dos componentes · Índice do guia

Botão com tema: texto e ícone, estilos, emblema de contador, atalho de teclado, botões predefinido e de cancelamento.

⚠️ Vários botões? Prefira buttonbar: uma fila num único componente, onde N button separados custam N vezes a memória (cada componente é uma vista do motor). button continua suportado para o código existente.

▶ Ver ao vivo — Aplicação de demonstração, mosaico Button: a pré-visualização, o código que o produz e esta página, lado a lado.

Em resumo #

Início rápido #

// event open da janela
uo_bouton.is_text  = "&Guardar"              // & = letra sublinhada (mnemonica)
uo_bouton.is_style = uo_bouton.STYLE_PRIMARY // botao de acao principal
uo_bouton.is_image = "mono:img\save.svg"     // icone recolorido pelo tema
uo_bouton.is_shortcut = "Ctrl+S"             // atalho apresentado e ativo
uo_bouton.is_tooltip = "Guarda o processo em curso"

// event ue_clicked de uo_bouton
of_enregistrer()

Constantes #

Propriedades #

Métodos #

Eventos #

Exemplos #

Os três estilos #

uo_ok.is_text     = "Confirmar"
uo_ok.is_style    = uo_ok.STYLE_PRIMARY
uo_ok.ib_default  = true          // tecla Enter

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

uo_aide.is_text  = "Ajuda"
uo_aide.is_style = uo_aide.STYLE_FLAT   // discreto, sem contorno

Ícone e emblema de notificação #

uo_messages.is_text  = "Mensagens"
uo_messages.is_image = "mono:img\mail.svg"
uo_messages.ii_image_size = 20
uo_messages.ii_badge = 12             // emblema "12"

// Atualizar o contador: o emblema desaparece a 0
uo_messages.ii_badge = ll_non_lus

// Um emblema vermelho para um alerta, em vez da cor do tema.
// A cor do texto e escolhida sozinha para continuar legivel.
uo_messages.il_badge_color = RGB(200, 30, 30)

// Voltar a cor que vem do 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ão de ação principal com atalho e ajuda #

uo_valider.of_set_redraw(false)

uo_valider.is_text     = "&Confirmar a encomenda"
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  = "Envia a encomenda ao fornecedor." &
                                    + "[br][br][size-=15]Ação irreversível.[/size-=15]"

uo_valider.of_set_redraw(true)

Reagir à passagem do rato #

uo_bouton.ib_track_mouse = true

// event ue_mouse_enter de uo_bouton
uo_statut.of_item("main").is_text = "Guarda o processo em curso"

Boas práticas #

• Um único botão primary por ecrã: é a ação esperada.
• ib_default e ib_cancel substituem a gestão manual de Enter / Esc na janela.
• Deve utilizar-se mono: para os ícones monocromáticos: acompanharão o tema claro tal como o escuro.
• Deve chamar-se of_reset() antes de reutilizar um botão para outra ação.

Herdado da base comum #

Estes membros existem em todos os componentes visuais — não são próprios deste. São detalhados uma só vez, nos capítulos transversais; esta tabela apenas diz onde os ler.

Duas ajudas não são herdadas: of_icon e of_escape_markup vivem em n_pbt_utils. Declare um — n_pbt_utils lnv_utils, nada a criar — e chame-as nele.

← Referência dos componentes · Índice do guia