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_button.is_text  = "&Guardar"              // & = letra sublinhada : Alt+G aciona-o
uo_button.is_style = uo_button.STYLE_PRIMARY // botao de acao principal
uo_button.is_image = "mono:img\save.svg"     // icone recolorido pelo tema
uo_button.is_shortcut = "Ctrl+S"             // atalho apresentado e ativo
uo_button.is_tooltip = "Guarda o processo em curso"

// event ue_clicked de uo_button
of_save()

Constantes #

Propriedades #

Métodos #

Eventos #

Exemplos #

Os três estilos #

// O botao principal : responde a tecla Enter
uo_ok.is_text     = "Confirmar"
uo_ok.is_style    = uo_ok.STYLE_PRIMARY
uo_ok.ib_default  = true          // tecla Enter

// O botao de cancelar : responde a tecla Esc
uo_cancel.is_text   = "Cancelar"
uo_cancel.is_style  = uo_cancel.STYLE_STANDARD
uo_cancel.ib_cancel = true       // tecla Esc

// Um botao de ajuda discreto
uo_help.is_text  = "Ajuda"
uo_help.is_style = uo_help.STYLE_FLAT   // discreto, sem contorno

Ícone e emblema de notificação #

// Um icone maior e um selo de contador
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_unread

// 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(/*red*/ 200, /*green*/ 30, /*blue*/ 30)

// Voltar a cor que vem do tema
uo_messages.il_badge_color = -1

Etiqueta enriquecida #

// Texto rico : negrito e tamanho reduzido, ou uma imagem no 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ão de ação principal com atalho e ajuda #

// Congelar o desenho durante as definicoes
uo_submit.of_set_redraw(/*on*/ false)

// Texto, estilo, atalho, botao predefinido e dica rica
uo_submit.is_text     = "&Confirmar a encomenda"
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  = "Envia a encomenda ao fornecedor." &
                                    + "[br][br][size-=15]Ação irreversível.[/size-=15]"

// Um unico redesenho, com tudo
uo_submit.of_set_redraw(/*on*/ true)

Reagir à passagem do rato #

// 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 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