Ajustando a visibilidade do componente na criação responsiva

Ao criar páginas com criação responsiva para fatores de forma diferentes, saiba como mostrar ou ocultar componentes concluindo as etapas para ocultar uma imagem no tamanho para celular.

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 é ocultar componentes ou mostrar um componente diferente nos pontos de interrupção. Há 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 tamanho de desktop e tablet, mas no tamanho para celular, oculte os botões e mostre o componente suspenso.
• Use um tamanho de botão menor para o tamanho de celular, mas verifique se os botões são grandes o suficiente para que os usuários pressionem com o polegar. Considere mudar o posicionamento dos botões para celular também.
• Use imagens em páginas de desktop e tablet, mas oculte imagens, especialmente as maiores, em dispositivos móveis.

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

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. Selecione um layout de coluna - Adicionar conteúdo em Corpo na árvore de conteúdo.
6. Em Layouts , selecione Coluna única .
7. Adicione o primeiro componente de botão.
   1. Selecione E ícone no centro da nova coluna na fase.
   2. Em Componentes , localize e selecione Botão componente.
   3. No painel de configuração, selecione Nenhum - Configure o componente manualmente .
   4. No painel de configuração, no Configurar substitua o texto padrão no Rótulo inserindo Tarefas .
      
   5. Selecione Save (Salvar).
8. Repita o passo 7 duas vezes e, em 7d, nomeie os botões Incidentes e. Mudanças .
   Nota:

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

   

9. Verifique se a árvore de conteúdo e a página estão corretas.
   
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 Estilos .
    3. Em Espaçamento , selecione Margem .
    4. No menu, selecione XS (extra pequeno).
       
    5. Selecione Save (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 Coluna 1 na árvore de conteúdo.
    2. No painel de configuração, em Direção , selecione o ícone de linha.

       

    3. Selecione Save (Salvar).
    A página parece boa na largura da área de trabalho.

    

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

    

    O espaçamento e a posição dos botões também ficam bons na largura da mesa gráfica.

    

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

    

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

    

20. Selecione os ícones de fator de forma para desktop e tablet na parte superior.
    Os fatores de forma para desktop e tablet mostram apenas os botões horizontais, não o ícone de menu.
21. Para fechar a sobreposição de visualização, selecione X .