Pular para o conteúdo principal

Reutilizando Artboards

Neste tutorial, iremos aprender como reutilizar seus Artboards de duas formas:

  1. Referenciando o Artboard
  2. Criando componentes

Referenciando um Artboard​

Referenciar um Artboard é útil quando você possui um elemento visual que se repete em vários Artboards, e esse elemento é sempre igual, como no caso de cabeçalhos, barras laterais e rodapés.

No nosso exemplo, iremos reutilizar essa barra lateral. Clique no botão Copiar abaixo, e cole o Artboard no seu Builder.

Comece criando um novo Artboard, dando clique duplo no fundo e selecionando Artboard no menu que se abre.

Em seguida, desenhe um bloco para ser a barra lateral. Selecione o bloco e:

  1. Em Children Mode coloque reference.
  2. Em Children Reference, que aparece quando Children Mode é reference, em Component selecione data2-core-primitives@Artboard, e em Reference selecione o Artboard da barra lateral.

Qualquer alteração no Artboard da barra lateral será refletida nos blocos que referenciam esse Artboard.

Criando Componentes​

Componentes são outra forma de reutilizar seus elementos, no entanto, componentes possuem parâmetros configuráveis, ou seja, diferentemente da referência que é uma cópia exata do Artboard, o componente não é.

Para ilustrar isso, iremos contruir um componente que é um botão. Copie e cole o Artboard abaixo em seu Builder.

Selecione o Artboard criado e:

  1. Habilite o parâmetro Component Class.
  2. Dê um nome ao seu componente, como Button.
  3. Clique em Create Component.

Pronto! Seu componente está criado, vamos usar esse componente que foi criado no Artboard que referencia a Barra Lateral, para isso:

  1. Desenhe dois blocos.
  2. Selecione os dois, clicando em um, segurando SHIFT e clicando no outro.
  3. No topo do Inspector, clique no controle que está escrito data2-core-primitives@Block para mudar o tipo de componente. Procure seu novo componente e selecione.
  4. Ambos os blocos devem ter mudado de aparência, e agora estão idênticos ao Artboard do botão.
  5. Faça ajustes visuais, como tirar o Fill dos blocos, ajustar o tamanho etc.

Agora, iremos transformar o texto do botão em um parâmetro configurável.

  1. Selecione o Artboard do botão.
  2. No controle de Component Class, clique em Add Prop.
  3. No card que foi adicionado, em Prop coloque label, mantenha o tipo como String e em Mock coloque Button Text.
  4. Selecione o Bloco dentro do Artboard que possui o parâmetro Text preenchido.
  5. Mude o tipo do Text clicando no botão com f() e no menu que se abre, clique em Context Reference.
  6. Clique no controle para navegar e configurar a Reference.
  7. Escreva ou selecione label na reference.

Note que o texto no Block do botão não é mais Button Label, mas sim Button Text, que foi o parâmetro configurado no Mock. Esse comportamento facilita o desenvolvimento dos componentes e só ocorre no Artboard que é usado como componente, isto é, outros blocos, como os dois Buttons no Artboard com a barra lateral, não vão mostrar o valor do Mock.

Para colocar textos diferentes, em cada um dos botões criados:

  1. Selecione o Button, clique no título Block no começo do inspector para fechar os parâmetros do Block, e apenas os parâmetros de Button devem ficar visíveis.
  2. No parâmetro Label, escreva o que você quiser, como por exemplo Confirm.
  3. Faça o mesmo para o outro Button, onde escreveremos Cancel ao invés de Confirm.

Componentes x Referência de Artboard​

Como pudemos ver nos exemplos, a principal diferença entre reutilizar Artboards através de componentes ou de referências, é a possibilidade de utilizar parâmetros, acessíveis dentro do Artboard que é um componente através do Context Reference (um componente do tipo data2-core-types@Reference). Em ambos os casos, componentes e referências, alterações no Artboard "original", afetam todos os Blocos do tipo daquele componente, e blocos que referenciam aquele Artboard.

Há outras diferenças que iremos explorar em outros tutoriais.

Resultado final​

O resultado final, isto é, Artboard com a barra lateral, Artboard que é um componente de botão, e Artboard que referencia a barra lateral e possui 2 botões, está disponível em seguida, e pode ser copiado e colado no seu Builder!