Como ajustar a visibilidade do componente na criação dinâmica

Ao criar páginas com autoria dinâmica para diferentes fatores forma, aprenda a mostrar ou ocultar componentes concluindo as etapas para ocultar uma imagem no tamanho móvel.

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 é ocultar componentes ou mostrar um componente diferente em pontos de interrupção. Existem inúmeras maneiras de usar a visibilidade do componente, mas alguns exemplos incluem:

• Use vários componentes de botão horizontalmente na parte superior de uma página para o tamanho de desktop e tablet, mas no tamanho de dispositivo móvel, oculte os botões e mostre o componente suspenso.
• Use um tamanho de botão menor para o tamanho móvel, mas verifique se os botões são grandes o suficiente para os usuários pressionarem com o polegar. Considere mudar o posicionamento dos botões para dispositivos móveis também.
• Use imagens em páginas de desktop e tablet, mas oculte imagens, especialmente as maiores, em dispositivos móveis.

Neste procedimento, mostre os botões na parte superior para os fatores forma de desktop e tablet, mas oculte os botões e use o componente suspenso para dispositivos móveis.

Procedimento

1. Navegar até Todos > 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. Adicione um layout de coluna selecionando + Adicionar conteúdo em Corpo na árvore de conteúdo.
6. Na guia Layouts, selecione Coluna única.
7. Adicione o primeiro componente de botão.
   1. Selecione o ícone + no centro da nova coluna na fase.
   2. Na guia Componentes, localize e selecione o componente Botão.
   3. No painel de configuração, selecione Nenhum - Configure o componente manualmente.
   4. No painel de configuração, na guia Configurar, substitua o texto padrão no campo Rótulo inserindo Tarefas.
      
   5. Selecione Salvar.
8. Adicione mais dois botões repetindo a etapa 7 duas vezes e no 7d nomeie os botões como Incidentes e Mudanças.
   Nota:

   Para adicionar os botões, aponte para o Botão 1 na árvore de conteúdo, selecione o ícone de menu e selecione Adicionar após.

   

9. Verifique se a árvore de conteúdo e a página estão precisas.
   
10. Adicione algum espaço ao redor de cada botão.
    1. Na árvore de conteúdo, selecione Botão 1.
    2. No painel de configuração, selecione a guia Estilos.
    3. Em Espaçamento, selecione Margem.
    4. No menu, selecione XS (extra pequeno).
       
    5. Selecione Salvar.
11. Adicione espaço ao redor dos outros dois botões repetindo a etapa 10 para cada um.
12. Mude os botões da direção vertical para a horizontal.
    1. Selecione a Coluna 1 na árvore de conteúdo.
    2. No painel de configuração, em Direção, selecione o ícone de linha.

       

    3. Selecione Salvar.
    A página tem uma boa aparência na largura da área de trabalho.

    

13. Selecione o ícone do fator forma do tablet.

    

    O espaçamento e a posição dos botões também ficam bem na largura do tablet.

    

14. Selecione o ícone de criação dinâmica de dispositivos móveis.

    

    Os botões usam quase todo o espaço horizontal no tamanho menor.

    

15. Adicione o componente suspenso.
    1. Selecione o fator forma da área de trabalho na parte superior da fase.
    2. Aponte para o Botão 3 na árvore de conteúdo, selecione o ícone de menu e selecione Adicionar após.
    3. Na guia Componentes, localize e selecione o componente Menu suspenso.
    4. No painel de configuração, selecione Nenhum - Configure o componente manualmente.
    5. No painel de configuração, na guia Configurar, remova o texto padrão em Texto de espaço reservado e selecione menu-outline em Ícone.
       
    6. Selecione Salvar.
16. Oculte o componente suspenso nos fatores forma de desktop e tablet.
    1. Na árvore de conteúdo, selecione Menu suspenso 1.
    2. No painel de configuração, na guia Configurar, selecione Visibilidade do componente para mostrar as opções.
    3. Selecione Ocultar componente.
    4. Selecione Salvar.
17. No fator forma móvel, oculte os componentes do botão.
    1. Selecione o ícone do fator forma móvel na parte superior da fase.
    2. Na árvore de conteúdo, selecione Botão 1.
    3. No painel de configuração, na guia Configurar, selecione Ocultar componente.
    4. Repita as etapas bc para o Botão 2 e o Botão 3.
    5. Selecione Salvar.
    Dois locais mostram que os componentes do botão estão ocultos no tamanho móvel. Primeiro, no painel de configuração, ao lado da opção Ocultar componente, selecione o ícone móvel. Uma mensagem é exibida para confirmar que o valor (ocultar componente selecionado) é para o tamanho móvel.

    

    Em segundo lugar, na árvore de conteúdo, os três componentes do botão são exibidos com o oculto.
18. No fator forma móvel, mostre o componente suspenso.
    1. Na árvore de conteúdo, selecione Menu suspenso 1.
    2. No painel de configuração, na guia Configurar, selecione Ocultar componente para limpar o campo.
    3. Selecione Salvar.
19. Selecionar Exibição.
    O fator forma móvel é exibido com o ícone de menu. Se você selecionar a seta, as opções padrão serão exibidas (Item de lista 1, Item de lista 2 e assim por diante). Você configuraria o componente suspenso para exibir Tarefas, Incidentese Mudanças da mesma forma que os botões horizontais disponíveis nos fatores forma de tablet e desktop.

    

20. Selecione os ícones de fator forma da área de trabalho e do tablet na parte superior.
    Os fatores forma da área de trabalho e do tablet mostram somente os botões horizontais, não o ícone do menu.
21. Feche a sobreposição de visualização selecionando o X.