Configurando componentes para criação responsiva

Ao criar páginas com criação responsiva para diferentes fatores de forma, saiba como ajustar algumas opções de configuração de componente pode fazer com que as páginas tenham uma aparência e funcionem melhor 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 a aparência dos componentes usando diferentes configurações nos pontos de interrupção. Há inúmeras maneiras de usar a configuração de componente. Neste procedimento, edite várias opções de configuração do componente Lista para torná-lo mais adequado para fatores de forma menores.

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. Selecione o componente da lista E no centro da nova coluna.
8. Em Componentes , localize e selecione Lista componente.
9. No painel de configuração, selecione Nenhum - Configure o componente manualmente .
10. Exiba a página no fator de forma para desktop.
    

    Observe os elementos exibidos, incluindo os ícones na parte superior, o número de colunas e as informações de paginação na parte inferior.

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

    

    No fator de forma móvel, o componente da lista está lotado e contém barras de rolagem verticais e horizontais.

    

    Faça algumas mudanças de configuração simples para melhorar a usabilidade e a aparência do fator de forma móvel.

12. Selecione Lista 1 na árvore de conteúdo.
13. No painel de configuração, no Configurar , localize o. Número de colunas exibidas e insira 1 .
    Apenas o. Número a coluna é exibida. A barra de rolagem horizontal foi removida.
14. No painel de configuração, no Configurar role para baixo para fazer as seguintes mudanças no Cabeçalho seção:
    1. Mude o. Tamanho para Pequeno .
    2. Selecione Oculte as informações da última atualização opção.
    3. Selecione Ocultar ações da lista opção.
       
       À medida que você fazia cada mudança, a fase era atualizada automaticamente. O cabeçalho tem um tamanho menor, o tempo de atualização foi removido e o ícone de ações da lista foi removido.
    4. Selecione Save (Salvar).
15. No palco, role até a parte inferior da exibição para celular.
16. No painel de configuração, no Configurar , role para baixo e faça as seguintes mudanças no Paginação seção (se necessário, selecione Paginação para expandir o campo):
    1. Selecione Ocultar intervalo opção.
    2. Selecione Ocultar contagem de linhas opção.
    3. Selecione Oculte linhas por seletor de página .
    4. Selecione Save (Salvar).
    O seletor de intervalo, contagem de linhas e linhas por página foram removidos. (A contagem de linhas ainda está disponível na parte superior da tela do celular).

    

    No painel de configuração, as opções e os campos editados são marcados com o ícone em cascata para celular.

17. Selecione o ícone em cascata para celular ao lado de qualquer opção ou campo para confirmar que o valor é para o fator de forma para celular.
    
18. Selecione os ícones de fator de forma do tablet e desktop na parte superior para confirmar que nenhuma mudança foi feita nos fatores de forma maiores.