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

Link

Encapsula um elemento para direcionar para uma rota no clique

Prop	Tipo	Descrição
mbTo	string	Nome ou path da rota

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

Navbar

Mostra uma barra de navegação. Por padrão, os ícones são feitos para lidar com a navegação.

O ícone à esquerda mostra uma seta para voltar à última página. Caso a página seja a primeira, ele fechará a aplicação.

O ícone à direita serve para fechar a aplicação em qualquer momento.

Caso queira fazer uma Navbar customizada, deve-se ignorar todos os props

Prop	Tipo	Descrição
mbTitle	string	Título da navbar
mbRightIcon	string	Ícone à direita
mbLeftIcon	string	Ícone à esquerda

Print Area

Componente que encapsula a API de impressão tornando seu uso mais fácil. Todos os elementos dentro do componente Print Area serão impressos ao utilizar o método print

Prop	Tipo	Descrição
mbUseDefaultPrintingElement	boolean	Controla o fluxo de páginas na tela durante uma impressão. Se for `true`, irá mostrar uma tela de impressão e, em caso de erro, mostrará uma tela para tentar imprimir novamente. Se for falso, nenhuma tela é mostrada durante a impressão
mbWidth	string	Largura do elemento. Por padrão, ele usa o tamanho correto da filipeta
mbPrintMessage	string	Mensagem para mostrar quando estiver imprimindo

Métodos

print (options?: IPrinterConfig, callback?: function)

Imprime todos os elementos contidos no Print Area. Os parâmetros são os mesmos da função de print nativa

show ()

Mostra o Print Area. Deve ser usado somente durante o desenvolvimento da aplicação para montar o layout da filipeta

hide ()

Esconde o Print Area. O elemento é escondido por padrão, mas pode ser útil durante o desenvolvimento

resetWidth ()

Reseta a largura da Print Area para o tamanho correto da filipeta

showDefaultPrintingElement ()

Mostra a tela de impressão. Geralmente, não é necessário utilizar este método, pois o método de print lida com todo o fluxo de impressão

hideDefaultPrintingElement ()

Esconde a tela de impressão. Geralmente, não é necessário utilizar este método, pois o método de print lida com todo o fluxo de impressão

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