Autoria dinâmica
Use a criação responsiva para criar Construtor de IUpáginas que se ajustam suavemente a diferentes formatos (tamanhos), como desktop, tablet e celular.
Criação responsiva em Construtor de IU
A criação responsiva permite que você crie páginas com boa aparência e que funcionem corretamente em qualquer fator de forma, facilitando a interação com o conteúdo. Por exemplo, uma página que contém três colunas quando exibida em um laptop pode ser ajustada a uma única coluna para telas menores.
Construtor de IU atualmente oferece três fatores de forma padrão:
- Desktop (1281 pixels até infinito)
- Tablet (1280 pixels e menor)
- Mobile (500 pixels a zero)
Além desses fatores de forma, você pode criar até três pontos de interrupção personalizados adicionais (larguras). Para obter mais informações, consulte Crie um ponto de interrupção para criação responsiva.
Reflow e criação responsivos
A partir da Xanadu Store versão 1, a criação responsiva só está disponível ao criar Construtor de IUpáginas do zero. A criação responsiva não está disponível para páginas existentes ou páginas criadas com um modelo. Esses tipos de páginas continuam a usar o modelo de refluxo padrão existente para ajustar as páginas para larguras de tela diferentes.
O Reflow transforma layouts de página em uma exibição vertical empilhada automaticamente sem perda de conteúdo ou funcionalidade quando os usuários aumentam o zoom do navegador para 400%. Este ajuste ajuda os usuários com visão reduzida ou que têm problemas para ver o conteúdo da web em um navegador devido ao tamanho do monitor, tipo de dispositivo, pouca iluminação ou outras situações.
Todas as páginas existentes que foram criadas com modelos ou do zero usam o Refluxo automaticamente. Agora, ao criar páginas do zero em Construtor de IU, uma etapa extra mostra que a criação responsiva está selecionada por padrão. Em vez disso, você pode optar por usar o Reflow selecionando Crie sem resposta , no entanto, o uso da opção de criação responsiva oferece mais controle sobre como as páginas funcionam e a aparência de diferentes fatores de forma. Para obter mais informações sobre como criar páginas em Construtor de IU, consulte Crie uma página no Construtor de IU .
Para obter mais informações sobre refluxo, consulte .
Para obter uma lista de Construtor de IUcomponentes compatíveis com refluxo, consulte Suporte para refluxo . Notas da versão dos componentes do Next Experience .
Aplicação e cascata de mudanças
Todas as mudanças feitas em um fator de forma são aplicadas a todos os fatores de forma menores automaticamente. Por exemplo, todas as mudanças feitas no tablet se aplicam ao tablet e ao celular. No entanto, se você fizer mudanças no fator de forma móvel, ele substituirá as configurações em cascata do fator de forma do tablet. Esta funcionalidade em cascata permite que você faça mudanças específicas para cada fator de forma menor para que a página tenha uma boa aparência e funcione bem.
Autoria responsiva e controladores
Se você adicionar um controlador a uma página, as propriedades do controlador serão globais e não poderão ser definidas por fator de forma. Para obter mais informações sobre controladores, consulte Vincular dados a Construtor de IUpáginas que usam controladores (recurso avançado).
Usando a criação responsiva ao criar páginas
Ao criar páginas, crie designs personalizados para controlar a aparência de diferentes fatores de forma.
Por padrão no palco, você cria páginas para a área de trabalho (1281 pixels até infinito). A qualquer momento, selecione outro ícone para ver a página na fase em um formato diferente, como tablet ou celular. Conforme necessário, edite a página para que ela seja exibida adequadamente no novo fator de forma.
Uma página de amostra se parece com o fator de forma para desktop.
Esta é a mesma página personalizada para o fator de forma do tablet.
Para tablet, o cabeçalho e os componentes da imagem foram reduzidos em tamanho. A configuração do componente de lista simples foi editada para mostrar quatro colunas em vez de seis e o número máximo de linhas foi definido como 5. Ao editar um componente para um fator de forma, os campos que foram alterados são marcados com um ícone em cascata para esse fator de forma (neste caso, tablet). O ícone permite determinar facilmente as diferenças entre os fatores de forma de uma determinada página.
Esta é a mesma página personalizada para o fator de forma móvel.
O número de palavras no título foi reduzido e o componente de imagem foi oculto. A configuração do componente de lista simples foi editada para mostrar duas colunas em vez de quatro e a opção de ocultar a opção de rodapé "exibir tudo" foi selecionada. Os dois campos personalizados especificamente para dispositivos móveis têm um ícone em cascata para dispositivos móveis ao lado deles. . Máximo de linhas o campo ainda mantém o ícone em cascata do tablet porque esse campo herda a configuração do tablet e não foi personalizado para celular.
Além dos fatores de forma padrão na exibição do editor, a qualquer momento você pode inserir manualmente um número no campo de pixels. A fase se ajusta ao fator de forma mais próximo com base no intervalo. Por exemplo, inserir 850 pixels ajusta a fase ao fator de forma da mesa gráfica porque seu intervalo é definido como 1280 a 501 pixels.
