PocketBlocks Docs
Português - Brasil
Português - Brasil
  • Visão geral
  • Instalação
  • Construção de aplicativos
    • Criando um novo aplicativo
    • Editor de aplicativo
    • Manipuladores de eventos
    • Escrevendo JavaScript
      • Escrevendo JavaScript por {{ }}
      • Consulta JavaScript
      • Transformadores
      • Estado temporário
      • Respondedor de dados
      • Funções JavaScript integradas
      • Uso de bibliotecas de terceiros
    • Guias de Componentes
      • Lista de opções
      • Exibição em lista
      • Menu lateral
      • Imagem
      • Gráficos
      • Carregamento de arquivo
      • Componente customizado
      • Uso de Markdown
    • Módulo
    • Interface de usuário do aplicativo
      • Estilo, tema e usabilidade
      • Crie um formulário eficiente e fácil de usar
    • Navigação
    • Atalhos de Teclado
    • Gerenciamento de versão e lançamento
  • Construção de plug-ins
    • Desenvolva plug-ins de componentes de UI
  • Gerenciamento do espaço de trabalho
    • Autenticação
    • Membros e grupos
    • Permissões para recursos
    • Personalização de marca
  • Outros
    • Onde estão as fontes de dados/biblioteca de consultas?
    • Embarcando aplicativos
Powered by GitBook
On this page
  • Layout
  • Posição
  • Redimensionando
  • Eventos
  • Acionando openDrawer
  • Acionando o fechamento do drawer
  1. Construção de aplicativos
  2. Guias de Componentes

Menu lateral

PreviousExibição em listaNextImagem

Last updated 12 months ago

No PocketBlocks, Drawer é uma barra lateral sobreposta para exibir informações ou realizar operações, sem interromper o fluxo de trabalho na janela principal.

O exemplo a seguir cria um carrinho de compras usando uma gaveta.

Layout

Quando inserida pela operação de arrastar e soltar, um Drawer flutua no lado direito (por padrão) da janela principal. Em seguida, você pode adicionar componentes ao Drawer de acordo com suas necessidades. No modo de edição de um Drawer, outros componentes na tela não são editáveis.

Quando um Drawer é fechado, você pode reabri-lo clicando no rótulo correspondente na guia Modais no painel esquerdo.

Posição

Na aba Propriedades, você pode definir a posição do Drawer. A posição padrão é o lado direito da janela principal.

Redimensionando

Na aba Propriedades, você pode definir a largura do drawer em pixels ou porcentagem. Observe que a altura de um drawer é igual à da janela principal e não é personalizável.

Eventos

Você pode fazer referência a um drawer no código JS em qualquer lugar do seu aplicativo ou chamá-lo por meio de uma ação de "componente de controle" em Propriedades > Interação > Manipuladores de eventos.

As seções a seguir orientam você sobre como abrir e fechar um drawer clicando em um botão em um aplicativo de compras online.

Acionando openDrawer

Normalmente, em um aplicativo, você aciona a abertura de um drawer por meio de um evento como clicar em um botão. Por exemplo, abrir um drawer para exibir o carrinho de compras é implementado nas etapas a seguir.

  1. Adicione um botão e renomeie-o como irParaCarro.

  2. Defina o manipulador de eventos do botão. Selecione "Componente de controle" como Ação e selecione o componente "carrinho" e o método "openDrawer". Todas essas configurações são salvas automaticamente.

  3. Clique no botão irParaCarro e o drawer vinculado(carrinho) será aberto.

Acionando o fechamento do drawer

Acionar "closeDrawer" é semelhante a acionar "openDrawer". Ao configurar o manipulador de eventos, selecione o método "closeDrawer". Por exemplo, fechar um drawer que exibe o carrinho de compras é implementado nas etapas a seguir.

  1. Adicione um botão e renomeie-o como voltarShopping.

  2. Defina o manipulador de eventos do botão. Selecione "Componente de controle" como Ação e selecione o componente "carrinho" e o método "closeDrawer". Todas essas configurações são salvas automaticamente.

  3. Clique no botão “Continuar Comprando” e o drawer vinculado (carrinho) é fechado.