Imagens e incorporações
Imagens, vídeos e incorporações de mídia responsivas para enriquecer e ilustrar a sua documentação.
Imagens
Imagens responsivas com otimização automática e funcionalidade de zoom interativo.
Se o
@nuxt/image estiver instalado, o componente <NuxtImg> será usado no lugar da tag img nativa para melhor desempenho e otimização.Zoom
Por padrão, as imagens suportam zoom interativo: clicar em uma imagem a abre em um overlay modal com transições suaves, permitindo que os usuários examinem os detalhes mais de perto.
Para desabilitar o zoom em uma imagem específica, adicione o atributo :zoom="false".
{:zoom="false"}
Tamanho
As imagens se adaptam automaticamente ao seu container mantendo a proporção. Você pode controlar o dimensionamento por meio de atributos markdown ou HTML quando necessário.
{width="300"}
Iframes
Easily embed interactive content like CodeSandbox, Figma, or YouTube.
YouTube
<iframe src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9; width: 100%;"></iframe>
CodeSandbox
<iframe src="https://codesandbox.io/p/devbox/nuxt-ui-xgrzw5" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9; width: 100%;"></iframe>
Figma
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1); width: 100%; height: 450px;" src="https://embed.figma.com/file/1544369209862884086/hf_embed?community_viewer=true&embed_host=fastma&fuid=960610330589944894&kind=file&page-selector=0&viewer=1" allowfullscreen></iframe>