Trabalhar com imagens de estado vazio com tema

  • Versão de lançamento: Zurich
  • Atualizado 31 de jul. de 2025
  • 3 min. de leitura

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

    Quando um componente ou uma parte do seu Next Experience a página da web não contém dados, uma imagem de estado vazia é exibida. As imagens de estado vazio podem ser adaptadas a temas e se adaptam às cores do tema da sua instância.

    Figura 1. Imagem de estado vazia
    Imagem de estado vazio de dados não disponível.

    Há 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. Por padrão, o tema usa imagens com tema de estado vazio do sistema de base. Se você optar por substituir essas imagens, consulte Personalize imagens de estado vazio que podem ser selecionadas para o tema.

    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 de ilustração, consulte Estado vazio do sistema de design do Horizon .

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

    Imagem de estado vazio passível de tema com ganchos de tema

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

    Figura 2. Nenhum resultado de pesquisa (destaque sólido)
    Imagem de estado vazio sem resultados de pesquisa, variação sólida de destaque. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

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

    Figura 3. Nenhum resultado de pesquisa (contorno de destaque)
    Imagem de estado vazio sem resultados de pesquisa, variação de contorno de destaque. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

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

    Figura 4. Nenhum resultado de pesquisa (contornos subtis)
    Imagem de estado vazio sem resultados de pesquisa, variação de contornos subtis. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

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

    Figura 5. Nenhum resultado de pesquisa (detalhe escuro do assunto)
    Imagem de estado vazio sem resultados de pesquisa, variação de detalhes escuros do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

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

    Figura 6. Nenhum resultado de pesquisa (detalhe da luz do assunto)
    Imagem de estado vazio sem resultados de pesquisa, variação de detalhe de luz do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

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

    Figura 7. Nenhum resultado de pesquisa (preenchimento de assunto)
    Imagem de estado vazio sem resultados de pesquisa, variação de preenchimento do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

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

    Figura 8. Nenhum resultado de pesquisa (descrição do assunto)
    Imagem de estado vazio sem resultados de pesquisa, variação de contorno do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

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

    Figura 9. Nenhum resultado de pesquisa (sombras de assunto)
    Imagem de estado vazio sem resultados de pesquisa, variação de sombras do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

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

    Tokens do modo de luz de estado vazio

    Figura 10. Imagem de estado vazio do objeto principal
    Imagem de estado vazio do objeto principal. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.
    Os ganchos de tema usados para substituir a imagem de estado vazio do objeto principal.
    • now-illustration--empty-state--main-object--outline
    • now-illustration--empty-state--main-object--fill
    Figura 11. Imagem de estado vazio do objeto primário
    Imagem de estado vazio do objeto primário. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.
    Os ganchos de tema usados para substituir a imagem de estado vazio do objeto primário.
    • now-illustration--empty-state--primary-object--outline
    • now-illustration--empty-state--primary-object--primary-fill
    • now-illustration--empty-state--primary-object--terciário-fill
    • now-illustration--empty-state--primary-object--main-detail
    • now-illustration--empty-state--primary-object--detail
    • now-illustration--empty-state--primary-object--shadow
    Figura 12. Imagem de estado vazio do objeto terciário
    Imagem de estado vazio do objeto terciário. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.
    Os ganchos de tema usados para substituir a imagem de estado vazio do objeto terciário.
    • now-illustration--empty-state--terciário-object--outline
    • now-illustration--empty-state--terciário-object--primary-fill
    • now-illustration--empty-state--terciário-object--terciário-preenchimento
    • now-illustration--empty-state--terciário-object--main-detail
    • now-illustration--empty-state--terciário-object--detalhe
    • now-illustration--empty-state--terciário-object--shadow
    Figura 13. Imagem de estado vazio de fundo
    Imagem de estado vazio de fundo. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.
    Os ganchos de tema usados para substituir a imagem de estado vazio de fundo.
    • now-illustration--empty-state--background--lines
    • now-illustration--empty-state--background--terciário-lines
    • now-illustration--empty-state--background--object-outline
    • now-illustration--empty-state--background--object-detail
    • now-illustration--empty-state--background--object-shadow
    • now-illustration--empty-state--background--object-fill

    Fallbacks do modo de luz de estado vazio

    Tabela 1. Declarações de estilo de fallback do modo claro de estado vazio
    Objeto Declaração de estilo
    Objeto principal 
    
 .main-object--outline {
  fill:rgb(var(--empty-state--main-object--outline),
      var(--main-object--outline), var(--now-color--interactive-3), 51,53,123);
}
    		 
    
 .main-object--fill {
  fill:rgb(var(--empty-state--main-object--fill),
      var(--main-object--fill), var(--now-color--interactive-1), 144,146,213);
}
    Objeto primário 
    
 .primary-object--outline {
  fill:rgb(var(--empty-state--primary-object--outline),
      var(--primary-object--outline), var(--now-color--border--secondary),
    176,181,191);
}
    		 
    
 .primary-object--primary-fill {

      fill:rgb(var(--empty-state--primary-object--primary-fill),
      var(--primary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .primary-object--tertiary-fill {

      fill:rgb(var(--empty-state--primary-object--tertiary-fill),
      var(--primary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .primary-object--main-detail {

      fill:rgb(var(--empty-state--primary-object--main-detail), var(--primary-object--main-detail),
      var(--now-color--border--secondary), 176,181,191);
}
    		 
    
 .primary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .primary-object--shadow {
  fill:rgb(var(--empty-state--primary-object--shadow),
      var(--primary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    Objeto terciário 
    
 .tertiary-object--outline {
  fill:rgb(var(--empty-state--tertiary-object--outline),
      var(--tertiary-object--outline), var(--now-color--border--secondary), 176,181,191);
}
      
    
 .tertiary-object--primary-fill {

      fill:rgb(var(--empty-state--tertiary-object--primary-fill),
      var(--tertiary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .tertiary-object--tertiary-fill {

      fill:rgb(var(--empty-state--tertiary-object--tertiary-fill),
      var(--tertiary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .tertiary-object--main-detail {

      fill:rgb(var(--empty-state--tertiary-object--main-detail),
      var(--tertiary-object--main-detail), var(--now-color--border--secondary),
      176,181,191);
}
    		 
    
 .tertiary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .tertiary-object--shadow {
  fill:rgb(var(--empty-state--tertiary-object--shadow),
      var(--tertiary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    Objeto em segundo plano 
    
 .background--lines {
  fill:rgb(var(--empty-state--background--lines),
      var(--background--lines), var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--tertiary-lines {

      fill:rgb(var(--empty-state--background--tertiary-lines), var(--background--tertiary-lines),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-outline {

      fill:rgb(var(--empty-state--background--object-outline), var(--background--object-outline),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-detail {
  fill:rgb(var(--empty-state--background--object-detail),
      var(--background--object-detail), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .background--object-shadow {
  fill:rgb(var(--empty-state--background--object-shadow),
      var(--background--object-shadow), var(--now-color--background--tertiary),
      228,230,234);
}
    		 
    
 .background--object-fill {
  fill:rgb(var(--empty-state--background--object-fill),
      var(--background--object-fill), var(--now-color--background--primary),
    255,255,255);
}