Ajustar layout para criação dinâmica

Ao criar páginas com autoria dinâmica para diferentes fatores forma, saiba como ajustar o layout para melhorar a aparência da página em tamanhos menores.

Antes de Iniciar

Função necessária: ui_builder_admin

Por Que e Quando Desempenhar Esta Tarefa

Um método para aumentar a usabilidade da página é personalizar os componentes, ajustando o layout entre os pontos de interrupção. Existem várias opções para ajustar o layout. Neste procedimento, ajuste o layout do componente de guias para o fator forma móvel.

A maioria das opções de layout de coluna no painel de propriedades pode ser editada para diferentes fatores forma. No entanto, as seguintes opções têm valores globais em todos os fatores forma:

• Número de colunas
• OpçãoEmpilhar colunas abaixo (pixels)
• Todas as opções em Acessibilidade

Procedimento

1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IU para obter mais informações sobre como criar experiências.
3. Crie uma página do zero com a criação dinâmica.
   Para obter mais informações sobre como criar uma página, consulte Criação de uma página no Construtor de IU.
4. Na parte superior, verifique se o ícone do fator forma da área de trabalho está selecionado.
   
5. Na fase, selecione + Adicionar conteúdo.
6. Na guia Layouts, selecione Coluna única.
7. Adicione o componente de guias.
   1. Selecione o ícone + no centro da coluna na fase.
   2. Na guia Componentes, localize e selecione o componente Guias.
   3. Selecione Save (Salvar).
8. No painel de configuração, na guia Configurar, edite o nome da primeira guia selecionando o ícone de edição.
   
9. Em Rótulo da guia, insira Guia 1.
10. Em ID da guia, insira tab_1
11. Selecione Save (Salvar).
12. Adicione uma segunda guia.
    1. Na guia Configurar, selecione + Adicionar ao lado de Guias.
    2. Selecione Iniciar a partir de um contêiner vazio e Avançar.
    3. Em Rótulo da guia, insira Guia 2.
    4. Verifique se o ID da guia foi preenchido automaticamente com tab_2.
       
    5. Selecione Criar.
13. Adicione uma terceira guia repetindo a etapa 12 e, no 12c, nomeie a guia Guia 3.
14. Verifique se a árvore de conteúdo e a página estão precisas.
    
15. Selecione o ícone do fator forma do tablet.

    

    O espaçamento e a posição das guias ficam bem na largura do tablet.

16. Selecione o ícone do fator forma móvel.

    

    As guias ocupam mais espaço no tamanho menor.

    

17. Mude o layout das guias apenas para o tamanho móvel.
    1. Na árvore de conteúdo, selecione Coluna 1 em Layout de coluna 1.
    2. No painel de configuração, em Direção, selecione o ícone de linha.

       

    3. Selecione Save (Salvar).
    A fase é atualizada automaticamente, mostrando que a guia 1 está visível e que há um novo menu suspenso.

    

18. Selecionar Exibição.
19. Selecione Mais.
    As outras duas guias estão disponíveis.

    

20. Selecione os ícones de fator forma da área de trabalho e do tablet para ver se o menu suspenso Mais não aparece.
21. Selecione o X para fechar a sobreposição de visualização.