Ajuste o layout para criação responsiva

Ao criar páginas com criação responsiva para diferentes fatores de 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 de aumentar a usabilidade da página é personalizar os componentes ajustando o layout entre os pontos de interrupção. Existem inúmeras opções para ajustar o layout. Neste procedimento, ajuste o layout do componente de guias para o fator de forma móvel.

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

• Número de colunas
• Empilhar colunas abaixo (pixels) opção
• 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 IUpara obter mais informações sobre como criar experiências.
3. Crie uma página do zero com criação responsiva.
   Para obter mais informações sobre como criar uma página, consulte Crie uma página no Construtor de IU .
4. Na parte superior, verifique se o ícone do fator de forma da área de trabalho está selecionado.
   
5. Na fase, selecione - Adicionar conteúdo .
6. Em Layouts , selecione Coluna única .
7. Adicione o componente de guias.
   1. Selecione E ícone no centro da coluna na fase.
   2. Em Componentes , localize e selecione Guias componente.
   3. Selecione Save (Salvar).
8. No painel de configuração, no 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. Em Configurar , selecione E Adicionar ao lado de Guias .
    2. Selecione Comece a partir de um contêiner vazio e, em seguida, selecione Próximo .
    3. Em Rótulo da guia , insira Guia 2 .
    4. Verifique isso ID da guia foi preenchido automaticamente com tab_2 .
       
    5. Selecione Criar.
13. Adicione uma terceira guia repetindo a etapa 12 e nomeie a guia em 12c Guia 3 .
14. Verifique se a árvore de conteúdo e a página estão corretas.
    
15. Selecione o ícone do fator de forma do tablet.

    

    O espaçamento e a posição das guias parecem bons na largura da mesa gráfica.

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

    

    As guias ocupam mais espaço no tamanho menor.

    

17. Mude o layout das guias apenas para o tamanho do celular.
    1. Na árvore de conteúdo, selecione Coluna 1 em Layout da 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 de forma para desktop e tablet para ver que o menu suspenso Mais não aparece.
21. Selecione X para fechar o. Visualização sobreposição.