Trabalhar com estilos de imagem

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

    • Os estilos de imagem permitem que você experimente diferentes esquemas de cores para ilustrações e substitua ilustrações padrão por suas próprias imagens personalizadas. O recurso Estilos de imagem fornece flexibilidade na personalização dos elementos visuais do seu tema.

    Ilustrações de estado vazio

    Quando um componente ou uma parte do seu Next Experience a página da web não contém dados, uma ilustração de estado vazio é exibida. As ilustrações de estado vazio podem ser adaptadas a temas e se adaptam às cores do tema da sua instância.
    Importante:
    As ilustrações de estado vazio se aplicam a espaços de trabalho e não são compatíveis com IU principal.
    Figura 1. Ilustração de estado vazio
    Ilustração de estado vazio sem dados disponíveis.
    O recurso Estilos de imagem oferece os seguintes tipos de ilustração de estado vazio, cada um incluindo uma versão pequena, média e grande:
    • Adicionar anexo
    • Adicionar dados
    • Tarefas concluídas
    • Tarefas concluídas
    • Erro
    • Usuário iniciante
    • Interrompido
    • Nenhuma atividade
    • Sem dados
    • Tarefas concluídas
    • Sem permissão
    • Tarefas concluídas
    • Nenhum resultado de pesquisa
    • Tarefas concluídas
    • Off-line
    • Não configurado

    Imagens personalizadas

    Carregue suas imagens personalizadas para Construtor de temas para substituir as ilustrações de estado vazio padrão.

    Para substituir as ilustrações de estado vazio padrão por imagens personalizadas, carregue cada tamanho de imagem individualmente. Você pode optar por substituir apenas um tamanho ou todos os três tamanhos de um tipo de estado vazio. As limitações de tamanho e formato para cada um dos três tamanhos de arquivo são as seguintes:
    Tabela 1. Tamanho de imagem pequeno e limitações de formato
    Campo Descrição
    Limite de dimensões h56 x h56 px
    Formato SVG
    Limite de tamanho de arquivo 2 MB
    Tabela 2. Tamanho médio da imagem e limitações de formato
    Campo Descrição
    Limite de dimensões w216 x h168 px
    Formato SVG
    Limite de tamanho de arquivo 2 MB
    Tabela 3. Tamanho de imagem grande e limitações de formato
    Campo Descrição
    Limite de dimensões w350 x h318 px
    Formato SVG
    Limite de tamanho de arquivo 2 MB
    As ilustrações de estado vazio dependem de dois tokens de design que manipulam suas cores:
    • -empty-state--main-object--fill
    • -empty-state--main-object - contorno
    As imagens personalizadas não refletem automaticamente as cores do tema. Para tornar sua imagem compatível com o tema, adicione esses tokens ao seu código usando seu editor de texto preferencial antes de carregar o SVG personalizado para Construtor de temas. Depois de adicionar esses tokens ao seu código de imagem, as imagens adotarão as cores do tema e permitirão que você edite as cores quando carregadas para Construtor de temas.
    O exemplo a seguir mostra os tokens de design aplicados. 
    <style>
    .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))));
    }
  </style>