Pular para o conteúdo principal

Image

Base​

Tamanhos​

Customizados​

Por padrão o componente Image renderiza a imagem em suas dimensões originais, utilize as propriedades width e height para customizar a largura e altura, respectivamente.

Fluida​

Utilize a propriedade fluid para que a imagem ocupe todo o espaço horizontal disponível. Caso a propriedade height não esteja definida, a altura será ajustada proporcionalmente com base em seu valor original em relação a nova largura.

Proporções​

A propriedade fit determina como a imagem deve ser redimensionada proporcionalmente para caber em seu container, no caso, o container é o próprio componente Image.

Existem cinco valores padrão que você pode usar com esta propriedade:

  • fill (padrão): A imagem é redimensionada para preencher completamente o container. Se necessário, a imagem será esticada ou comprimida para caber
  • none: A imagem não é redimensionada e é centralizada por padrão. A imagem poderá ser cortada
  • contain: A imagem será redimensionada e a sua proporção mantida para que a imagem inteira caiba dentro do container
  • cover: A imagem é redimensionada e a sua proporção mantida, mas poderá ser cortada nos casos em que a proporção da imagem não corresponda à proporção do container
  • scale-down: A imagem será redimensionada para a menor versão possível entre as opções none ou contain

Essa propriedade se comporta como a propriedade CSS object-fit. Saiba mais acessando este link.

Cantos arredondados​

Utilize a propriedade rounded para adicionar cantos arredondados ao componente.

Como link ou outro elemento customizado​

Utiliza a propriedade as para customizar o elemento que será renderizado como container do componente.

Erros de carregamento​

É possível tratar cenários em que a imagem não foi carregada com sucesso, definindo um texto de apoio e/ou ainda um callback para tratar a exceção.

Dica!

Valores para mensagens pré-definidas nos idiomas português, inglês e espanhol estão disponíveis em Image.translations.en.loadingError, Image.translations.ptBR.loadingError ou Image.translations.es.loadingError.

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.