Lista de Componentes

Action Page

O Action Page é um layout que informa o usuário sobre algo e pergunta se ele deseja realizar uma ação.

Prop Tipo Descrição
mbImageSrc string Caminho para a imagem mostrada ao usuário
mbDescription string Descrição da informação
mbQuestion string Pergunta feita ao usuário
mbNegativeText string Texto da ação negativa (e.g. Não)
mbPositiveText string Texto da ação positiva (e.g Sim)
mbNegativeCallback function Função chamada quando o usuário nega o action page
mbPositiveCallback function Função chamada quando o usuário confirma o action page
mbShowNegativeButton boolean Controla a visibilidade do botão negativo

Avatar

Avatar mostra uma imagem ou elemento delimitado por um círculo

Button

Botão capaz de conter ícones

Prop Tipo Descrição
mbText string Texto do botão
mbRightIcon string Ícone à direita (e.g. mb-icon-star)
mbLeftIcon string Ícone à esquerda

Collection Group

Agrupa vários collections

Prop Tipo Descrição
mbShortcuts boolean True se devem ser adicionados atalhos numéricos aos itens
mbShortcutStart string Primeiro número da contagem dos atalhos

Métodos

addKeyEventListeners ()

Começa a monitorar o teclado para simular cliques nos Collection Items de acordo com os atalhos. Deve ser chamado no onMount da página

setShorcutCallbacks (callback: function)

Registra uma callback que é chamada sempre que o usuário interage com a coleção. A callback possui o seguinte formato

Parâmetro Tipo Descrição
index number O atalho relativo ao Collection Item (e.g. 1)
collectionItem Component Instância do Collection Item que foi relativo à ação do usuário

removeKeyEventListeners ()

Para de monitorar o teclado. Deve ser chamado no onUnmout da página

Collection Item

Utilizado em conjunto com Collection, o Collection Item define os itens de uma coleção

Prop Tipo Descrição
mbText string Texto do collection item
mbRightIcon string Ícone à direita
mbLeftIcon string Ícone à esquerda
mbDescription string Descrição do collection item
mbKeyboardShortcut string Texto do atalho. É mudado automaticamente ao utilizar em conjunto com Collection
mbLinkTo string Path ou nome da rota associada ao Collection Item
mbCallback string Callback associada ao Collection Item. Será chamada de acordo com a interação do usuário
mbNoInk string True para tirar a tinta (Ink) do componente

Métodos

addEventKey ()

Começa a monitorar o teclado. Deve ser chamado no onMount. Desnecessário caso use a função addKeyEventListeners do Collection

removeEventKey ()

Para de monitorar o teclado. Deve ser chamado no onUnmount. Desnecessário caso use a função removeKeyEventListeners do Collection

setShortcutCallback (callback: function)

Registra uma callback que é chamada sempre que o usuário interage com o Collection Item. A callback possui o seguinte formato

Parâmetro Tipo Descrição
event Event O evento de clique ou teclado que interagiu com o collection item

Collection

Coleção de itens dispostos verticalmente. Deve ser utilizado com conjunto com Collection Item.

É utilizado geralmente para prover navegação entre páginas.

Prop Tipo Descrição
mbShortcuts boolean True se devem ser adicionados atalhos numéricos aos itens
mbShortcutStart string Primeiro número da contagem dos atalhos
mbTitle string Título da coleção

Métodos

addKeyEventListeners ()

Começa a monitorar o teclado para simular cliques nos Collection Items de acordo com os atalhos. Deve ser chamado no onMount da página

setShorcutCallbacks (callback: function)

Registra uma callback que é chamada sempre que o usuário interage com a coleção. A callback possui o seguinte formato

Parâmetro Tipo Descrição
index number O atalho relativo ao Collection Item (e.g. 1)
collectionItem Component Instância do Collection Item que foi relativo à ação do usuário

removeKeyEventListeners ()

Para de monitorar o teclado. Deve ser chamado no onUnmout da página

getNumberOfShortcuts (): number

Retorna o número de atalhos

Dialog

Prop Tipo Descrição
mbTitle string Título do dialog
mbPositiveAction string Texto da ação positiva
mbNegativeAction string Texto da ação negativa
mbDisableNegativeAction boolean Desabilita o botão negativo
mbHideNegativeAction boolean Esconde o botão negativo
mbDisablePositiveAction boolean Desabilita o botão positivo

Métodos

open (callback: function)

Abre o Dialog. A callback será achamada assim que o dialog for fechado. Esta possui os seguinte parâmetros

Parâmetro Tipo Descrição
action ‘cancel’ | ‘ok’ A ação que resultou no fechamento do dialog. ‘ok’ é usado quando o usuário interage com o botão positivo, ‘cancel’ é usado quando ele interage com o botão negativo

close (action: string)

Fecha o Dialog. Neste momento, a callback especificada na abertura do Dialog será chamada com o parâmetro action como parâmetro

Parâmetro Tipo Descrição
action string A ação para passar para a callback. As ações padrão são ‘cancel’ e ‘ok’

Full Page Loading

Este componente é usado quando algum processamento está sendo feito e o usuário precisa aguardar até ele terminar. Por exemplo, fazendo uma requisição para um servidor; uma tela de “carregando” deve ser mostrada enquanto a requisição estiver sendo feita e uma segunda tela pode ser mostrada caso tenha dado algum erro ou se a operação foi bem sucedida ou se a atenção do usuário é necessária.

Prop Tipo Descrição
mbErrorMsg string Mensagem de erro
mbSuccessMsg string Mensagem de sucesso
mbLoadingMsg string Mensagem de carregando
mbAttentionMsg string Mensagem de atenção
mbPaymentApprovedMsg string Mensagem de pagamento aprovado
mbCloseButtonText string Texto do botão de fechar
mbTimeout number Timeout para a página ser fechada automaticamente
mbShowCloseButton boolean Controla se o botão de fechar deve ser mostrado. Ele nunca é mostrado na tela de carregando
mbCloseButtonCallback function Função chamada quando o botão de fechar é clicado

Métodos

showLoading (message?: string)

Mostra a tela de loading

showError (message?: string, callback?: function)

Mostra a tela de erro. A callback é chamada quando a página é fechada

showSuccess (message?: string, callback?: function)

Mostra a tela de sucesso. A callback é chamada quando a página é fechada

showAttention (message?: string, callback?: function)

Mostra a tela de atenção. A callback é chamada quando a página é fechada

showPaymentApproved (message?: string, callback?: function)

Mostra a tela de pagamento aprovado. A callback é chamada quando a página é fechada

hide ()

Esconde o componente

Gif

Mostra um gif com performance nativa.

Se um gif for utilizado através do HTML, ele terá uma performance ruim e comportamento imprevisível.

Este componente faz interface com as ferramentas nativas do POS para renderizar um gif de forma performática

Prop Tipo Descrição
mb-src string Caminho do gif
mbCenter boolean True se o gif deve ser centralizado na tela

Methods

cache ()

Faz cache do gif

show ()

Mostra o gif

hide ()

Esconde o gif

get (): IRect

Pega a posição e dimensões do gif (x, y, w, h)

Grid Item

Define um item em uma Grid. O tamanho é controlado pelas classes do elemento.

Classe Descrição
s<number> Define o tamanho da coluna. Varia de 1 a 12
offset-s<number> Define quantas colunas à direita se deslocar

Grid

Define uma grade de 12 colunas

Icon

Define um ícone que pode ser colorido através de classes

Prop Tipo Descrição
mb-src string O ícone a ser usado no formato mb-icon-*
Classe Descrição
<cor> A cor a ser utilizada (e.g. red, blue, green, primary-color, primary-color-dark, primary-color-light, …)

Image

Componente utilizado para mostrar imagens.

Note que utilizar a tag <img> irá funcionar em desenvolvimento, mas irá falhar após fazer o build da aplicação. Isso ocorre devido ao caminho da imagem, que deve conter ./ no início do path

Prop Tipo Descrição
mb-src string O caminho da imagem

Ink

Adiciona feedback visual de clique em um elemento

Prop Tipo Descrição
mbDisabled boolean Desabilita o componente de tinta

Input Container

Aplica o estilo em um input e lida com mensagens de validação de entrada

Prop Tipo Descrição
mbValidMessage string Mensagem de entrada válida
mbInvalidMessage string Mensagem de entrada inválida

Métodos

setValid (message?: string)

Mostra a mensagem de entrada válida

setInvalid (message?: string)

Mostra a mensagem de entrada inválida

clear ()

Limpa a validação e esconde as mensagens de entrada

Input

Prop Tipo Descrição
mbLockCursor true Mantém o cursor no final do input
mbNumericKeyboard string True se o teclado deve ser numérico
mbMask string Máscara para formatar a entrada. Qualquer tralha (#) será substituída pela entrada (e.g. ##/## poderia ser uma máscara para dia/mês)

Métodos

forceFocus (force: boolean)

Força o foco do input. Um elemento com forceFocus mantém o foco mesmo que o usuário clique fora do elemento. Geralmente é utilizado nos métodos onMount e onUnmount das páginas.

Ao forçar o foco, é preciso se lembrar de remover o foco quando o input não for mais necessário

Justified Line

Componente auxiliar para mostrar um texto à esquerda e outro à direita

Prop Tipo Descrição
mbLabel string Texto à esquerda
mbValue string Texto à direita

Loading Group

Muda o estilo de elementos selecionados para dar um efeito de carregamento.

Para selecionar um elemento, é necessário adicionar a classe mb-loading a ele. Caso um elemento seja um texto de uma linha, deve-se adicionar a classe line

Classe Descrição
mb-loading Marca se um elemento deve ter seu estilo modificado para simular um carregamento
line Muda as dimensões de um elemento para se assemelhar a uma linha carregando

Métodos

activate ()

Ativa a mudança de estilo

deactivate ()

Desativa a mudança de estilo

Progress Slider

Mostra uma barra de progresso juntamente com botões para o controle. É usado geralmente quando o usuário deve configurar algum parâmetro dentro de um intervalo pequeno, como por exemplo a luminosidade da tela.

Prop Tipo Descrição
mbPercentageImageSrc string Caminho da imagem ao lado da porcentagem
mbMin number Valor mínimo da barra
mbMax number Valor máximo da barra
mbStep number Passo usado para incrementar ou decrementar a barra quando o usuário interage com os botões
onChange function Callback chamada quando o valor do slider muda
onIncrease function Callback chamada quando o valor é incrementado
onDecrease function Callback chamada quando o valor é decrementado

Métodos

increase (amount?: number)

Aumenta o valor do Progress Slider em um passo

decrease (amount?: number)

Diminui o valor do Progress Slider em um passo

setPercentage (percentage: number)

Muda o valor do Progress Slider. Deve estar entre seus limites mbMin e mbMax

Progress

Mostra um elemento de progresso

Prop Tipo Descrição
mbDeterminate boolean True para mostrar um progresso determinado
mbCircular boolean True para mostrar um progresso circular
mbStone boolean True para mostrar um progresso indeterminado com o logo da Stone

Métodos

setProgress (progress: number)

Muda o progresso atual. O progresso deve estar entre 0 e 100. Este parâmetro só será usado se o progresso for determinado

Switch

Prop Tipo Descrição
onCheckChange function Função chamada quando o estado do Switch muda
mbDisabled boolean Se for true, a chave será desabilitada

Métodos

isChecked (): boolean

Retorna true se o Switch estiver checado

check ()

Muda o estado do Switch para checado

uncheck ()

Muda o estado do Switch para não checado

Switcher Item

Usado em conjunto com Switcher, define os itens a serem mostrados ou escondidos

Switcher

Usado em conjunto com Switcher Item para mostrar ou esconder elementos. Todos os Switcher Items contidos no switcher serão escondidos, com excessão de um, que será o elemento ativo no momento.

Prop Tipo Descrição
onIndexChange function Função chamada quando o index do Switcher muda

Métodos

activateByIndex (index: number)

Ativa o elemento pelo seu index

next ()

Ativa o próximo elemento

previous ()

Ativa o elemento anterior

Tab Item

Usado em conjunto com tabs, define uma aba

Prop Tipo Descrição
mbLabel string Nome da tab

Métodos

activate ()

Ativa a Tab Item

deactivate ()

Desativa a Tab Item. Note que ao usar esse método, nenhuma outra aba será ativada

Tabs

Prop Tipo Descrição
onIndexChange function Função chamada quando o index da Tab muda

Métodos

activateFirstTabAvailable ()

Ativa a primeira Tab que não esteja desabilitada.

activateTabByIndex (index: number)

Ativa uma Tab de acordo com seu index

disableTabByIndex (index: number)

Desabilita uma Tab de acordo com seu index

enableTabByIndex (index: number)

Habilita uma Tab de acordo com seu index