Como trabalhar com imagens de estado vazio com capacidade de tema

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 3 min. de leitura

    • 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
    Não há dados disponíveis 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 Personalize imagens de estado vazio com capacidade de tema para o seu 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 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)
    Imagem do estado vazio de Nenhum resultado de pesquisa, variação de acento sólido. Para obter a descrição de texto, consulte as informações de 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)
    Nenhum resultado de pesquisa imagem do estado vazio, variação de contorno de acento. Para obter a descrição de texto, consulte as informações de 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 (delineamentos sutis)
    Imagem de estado vazio sem resultados de pesquisa, variação de contornos sutis. Para obter a descrição de texto, consulte as informações de 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 do estado vazio de Nenhum resultado de pesquisa, variação de detalhes escuros do assunto. Para obter a descrição de texto, consulte as informações de gancho do tema a seguir.

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

    Figura 6. Nenhum resultado de pesquisa (detalhe do assunto claro)
    Nenhum resultado de pesquisa imagem do estado vazio, variação de detalhe da luz do assunto. Para obter a descrição de texto, consulte as informações de 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)
    Nenhum resultado de pesquisa imagem do estado vazio, variação de preenchimento de assunto. Para obter a descrição de texto, consulte as informações de 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 (esquema de tópicos do assunto)
    Nenhum resultado de pesquisa imagem do estado vazio, variação de contorno do assunto. Para obter a descrição de texto, consulte as informações de 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 do assunto)
    Nenhum resultado de pesquisa imagem do estado vazio, variação de sombras do assunto. Para obter a descrição de texto, consulte as informações de gancho do tema a seguir.

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

    Tokens do modo claro com estado vazio

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

    Fallbacks do modo claro do estado vazio

    Tabela 1. Declarações de estilo de fallback do modo claro com 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);
}