Como trabalhar com imagens de estado vazio com capacidade de tema

Adicione imagens de estado vazio com capacidade de tema para personalizar estados vazios e melhorar a experiência do usuário. Os estados vazios incluem orientações ou ações para os usuários adicionarem ou criarem conteúdo.

Quando um componente ou uma parte da sua página da web Next Experience não contém dados, uma imagem de estado vazio é exibida. As imagens de estado vazio são compatíveis com o tema e se adaptam às cores do tema da sua instância.

Figura 1. Imagem de estado vazio

Existem 12 tipos de imagem de estado vazio disponíveis, cada um incluindo uma versão pequena, média e grande. Ao criar um tema usando Construtor de temas, um registro de imagens de estilos de UX é criado. No entanto, o registro está vazio. Nesse caso, o padrão do seu tema é usar imagens de estado vazio do sistema base. Se você optar por substituir essas imagens, consulte .

Você pode inserir uma imagem de estado vazia em sua experiência personalizada usando o componente Ilustração em Construtor de IU. O componente Ilustração exibe todas as imagens de estado vazio disponíveis. Para obter mais informações sobre o componente Ilustração, consulte Estado vazio do sistema Horizon Design.

Você também pode adicionar imagens personalizadas usando o componente de ilustração personalizada em Construtor de IU.

Imagem de estado vazio que pode ser tematizada com ganchos de tema

As imagens a seguir representam a imagem do estado vazio Sem resultados de pesquisa junto com os ganchos de tema necessários para cada variação.

Figura 2. Nenhum resultado de pesquisa (acento sólido)

O gancho de tema necessário para esta variação é $now-color_interactive-1.

Figura 3. Nenhum resultado de pesquisa (contorno de destaque)

O gancho de tema necessário para esta variação é $now-color_interactive-3.

Figura 4. Nenhum resultado de pesquisa (delineamentos sutis)

O gancho de tema necessário para esta variação é $now-color_border-secondary.

Figura 5. Nenhum resultado de pesquisa (detalhe escuro do assunto)

O gancho de tema necessário para esta variação é $now-color_border-tertiary.

Figura 6. Nenhum resultado de pesquisa (detalhe do assunto claro)

O gancho de tema necessário para esta variação é $now-color_background-secondary.

Figura 7. Nenhum resultado de pesquisa (preenchimento de assunto)

O gancho de tema necessário para esta variação é $now-color_background-primary.

Figura 8. Nenhum resultado de pesquisa (esquema de tópicos do assunto)

O gancho de tema necessário para esta variação é $now-color_border-secondary.

Figura 9. Nenhum resultado de pesquisa (sombras do assunto)

O gancho de tema necessário para esta variação é $now-color_border-secondary.

Tokens do modo claro com estado vazio

• Personalize imagens de estado vazio com capacidade de tema para o seu tema
  Personalize imagens de estado vazio padrão para os temas do Next Experience e do Construtor de temas usando o registro de imagens do tema.