Layout dos Widgets

Os widgets são construídos usando uma estrutura baseada em páginas. Um widget consiste em várias páginas com múltiplos componentes em cada página.

Você pode gerenciar o layout do widget em Widget > Personalizar.

Páginas

As páginas representam todas as telas dentro do widget. Isso inclui a página inicial, as diferentes abas do seu widget e páginas de destino de botões, por exemplo, um ícone de informações que leva a uma página de Como Funciona.

Cada tela visualizável no widget deve ser adicionada como uma página. A página inicial do seu widget tem um ícone inicial ao lado.

Cada página inclui as seguintes propriedades:

• id: O identificador único da página.

• Elementos: O número de elementos dentro da página. Esse número é atualizado automaticamente conforme você adiciona componentes na página

• path: O caminho da URL usado para navegar até a página, por exemplo /homepage ou /homepage/achievements.

• Título: O título da página. Por exemplo, se o título for missões, um rótulo é criado automaticamente para o título da página-página quests-page

Componentes

Componentes são os blocos de construção adicionados às páginas. Para adicionar componentes a uma página, clique com o botão direito na página e selecione Novo Item. Os componentes disponíveis são agrupados em quatro categorias: Componentes Básicos, Contêineres, Listas e Seções.

Componentes Básicos

Os componentes básicos incluem o seguinte:

• Botão de Volta: Permite que os usuários retornem a uma tela anterior. Você deve especificar um backpath para definir a página de destino. Por exemplo, um botão de voltar em uma página de "Como Funciona" normalmente teria um **backpath **(/homepage) levando à página inicial.

• Botão de Balanceamento: Exibe um ícone representando o saldo total dos tokens para o usuário. O ícone usado é o que é carregado na aba **Mídia e Ativos**para tokens. Um link deve ser fornecido para uma página de destino, como uma página de transações ( /transactions), onde os usuários podem visualizar seu histórico de recompensas.

• Botão de Ajuda: Este ícone abre uma página de Como funciona . O texto de exibição desse botão é gerenciado na seção Como Funciona na aba Mídia e Ativos .

  Você pode adicionar mais de um botão de Ajuda no seu widget. O texto dessas páginas adicionais pode ser adicionado usando componentes de Texto .

• Imagem: Incorpora uma imagem usando uma URL de origem. Você pode configurar a fonte, texto alternativo, altura e largura em pixels.

• Aba de navegação: Isso permite adicionar tipos específicos de aba: gráfico de barras, esportes ou saldo da conta. Você deve fornecer um link para a página de destino de cada aba. Abas de navegação devem ser usadas dentro de um contêiner de Aba de Navegação.

• Texto: Adiciona conteúdo de texto. Você pode definir a variante para título, corpo, nota de rodapé ou legenda.

Contêineres

Contêineres são componentes de layout que agrupam e organizam outros elementos. Use esses conteúdos para definir como seu conteúdo é estruturado em cada página.

• HStack e VStack: HStack organiza os elementos filhos horizontalmente e VStack os arranja verticalmente. À medida que você adiciona elementos dentro desses contêineres, a contagem no campo Elementos é atualizada. Você pode usar as seguintes opções de alinhamento para controlar como os elementos ficam dentro da pilha:

  • Flex-start: Alinha elementos ao início do recipiente.

  • Centro: Posiciona os elementos no meio do recipiente.

  • Flex-end: Alinha elementos à extremidade do recipiente.

  • Alargamento: Expande os elementos para preencher a largura ou altura total do recipiente. Você pode usar as seguintes opções de justificação para gerenciar o espaçamento ao longo do eixo principal: início flexível, centro, extremidade flexível, espaço entre eles e espaço ao redor. Você também pode especificar margens e a altura do contêiner usando pixels, porcentagens ou unidades rem.

• Cabeçalho da página: Este é um contêiner projetado especificamente para a seção superior de uma página. O recipiente permanece preso no topo da tela. Isso garante que o cabeçalho permaneça visível mesmo quando você percorre páginas mais longas. Ele usa o mesmo alinhamento e opções de justificação que as pilhas padrão. Você pode especificar espaços para definir o espaçamento em pixels entre os elementos do cabeçalho.

• Aba de navegação: Este contêiner contém múltiplos componentes individuais da aba de navegação. Você deve adicionar esse contêiner à página antes de inserir abas individuais de navegação. Ao configurar esse container, você deve especificar um selectedTab para determinar qual aba está ativa por padrão quando um usuário visualiza a página.

Listas e Seções

Listas renderizam automaticamente os itens com base nos dados que você configurou no Hall de Fidelidade. Isso inclui itens como conquistas, missões, enquetes e opções de resgate.

Seções são componentes pré-construídos que agrupam múltiplos elementos relacionados. Esses são usados para funções específicas dentro do widget, como exibir regras do jogo ou gerenciar feedback.

Quando você seleciona qualquer componente de Lista ou Seção, uma prévia é exibida mostrando como o componente é renderizado.