Componentdata-display

Image Zoom

Stable

Clique numa imagem e ela sai da página: a original fica onde está, uma cópia cresce até preencher a viewport sobre um scrim, e um clique, Escape ou um arrasto a devolvem. É um lightbox de uma imagem só — não há galeria, não há próxima nem anterior — e envolve o que receber, então uma `img`, um `svg` ou uma figure ampliam do mesmo jeito. O comportamento é do react-medium-image-zoom; a aparência é da Foundation.

Instalação

npx up-web-ds add image-zoom

Preview

Basic

A Test Plate

With Zoom Img

Named In Portuguese

Disabled

Own Backdrop

Around AFigure

Placa de teste FIGURA — Placa de teste, grade de 24px

Controlled

na página

All states

Basic

A Test Plate

With Zoom Img

Named In Portuguese

Disabled

Own Backdrop

Around AFigure

Controlled

na página

Usage

@/components/image-zoom

import { ImageZoom } from '@/components/image-zoom'

Image Zoom

1
2
3
4
5
6
7
8
9
10
11
12<div className="max-w-md">
  <ImageZoom>
    {/* biome-ignore lint/performance/noImgElement: registry item must remain framework-portable */}
    <img
      alt="Diagrama do núcleo do Up Web DS"
      className="w-full rounded-lg border border-border"
      height={941}
      src="/ds-core.png"
      width={1347}
    />
  </ImageZoom>
</div>

Props

Props de ImageZoom
Prop	Type	Default	Description
backdropClassName	`string`	sem valor padrão	Classes for the dialog the zoomed image opens in, scrim included.
className	`string`	sem valor padrão	Classes for the box around the image that stays on the page.
isZoomed	`boolean`	sem valor padrão	Whether the image is zoomed, when the caller owns it. `undefined` -- and only `undefined` -- means the component keeps the state itself.
children, obrigatória	`React.ReactNode`	sem valor padrão
a11yNameButtonUnzoom	`string`	sem valor padrão
a11yNameButtonZoom	`string`	sem valor padrão
canSwipeToUnzoom	`boolean`	sem valor padrão
classDialog	`string`	sem valor padrão
IconUnzoom	`React.ElementType<any, keyof React.JSX.IntrinsicElements>`	sem valor padrão
IconZoom	`React.ElementType<any, keyof React.JSX.IntrinsicElements>`	sem valor padrão
isDisabled	`boolean`	sem valor padrão
onZoomChange	`((value: boolean, data: { event: React.SyntheticEvent \| Event; }) => void)`	sem valor padrão	Called with the next zoom state, and with the event that asked for it.
swipeToUnzoomThreshold	`number`	sem valor padrão
wrapElement	`"div" \| "span"`	sem valor padrão
ZoomContent	`((data: { buttonUnzoom: React.ReactElement<HTMLButtonElement>; img: React.ReactElement \| null; isZoomImgLoaded: boolean; modalState: ModalState; onUnzoom: (e: Event) => void; }) => React.ReactElement)`	sem valor padrão
zoomImg	`React.ImgHTMLAttributes<HTMLImageElement>`	sem valor padrão
zoomMargin	`number`	sem valor padrão

Estende UncontrolledProps.

prop obrigatória.

Metadata

Notas de acessibilidade

Verificado em tests/e2e/image-zoom.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: o botão de ampliar fica recortado por clip-path até receber foco, e então vira um alvo de 40x40 que abre com Enter; Escape fecha. O diálogo é aberto com showModal(), então o foco entra nele e o Tab dá a volta lá dentro sem alcançar a página atrás — verificado percorrendo o ciclo inteiro de tabulação. Leitor de tela: o botão é nomeado pela imagem que abre ("Expand image: <alt>"), a cópia ampliada carrega o mesmo alt, o diálogo é role="dialog" com aria-modal, e os nomes dos dois botões são props para um produto em outra língua. isDisabled deixou de entregar um controle morto: upstream mantinha o botão na página e só parava de responder, e agora não há botão nenhum. O botão de fechar era 0x0 e sem estilo porque a biblioteca porta o diálogo para fora do wrapper onde as regras do upstream viviam; as regras estão no classDialog e ele é um alvo de verdade. Toque verificado em 375px com emulação de toque: a imagem não transborda a viewport, o toque abre a ampliação e o alvo dentro do diálogo atinge 24x24. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — ampliar é a função, então a acomodação leva o tween e não a ampliação: a cópia chega maior, com transition-property: none na imagem e no scrim. A biblioteca lê a duração computada da cópia para saber quando o zoom terminou, então tirar a transição a faz ler 0s e cada transição de estado acontece na hora, sem deixar o diálogo preso.

Classificação

Layer: Component
Domínio: Application
Categoria: data-display
Status: Stable

Origem e distribuição

Fonte: kibo registry / image-zoom
Licença: MIT
URL: https://www.kibo-ui.com/r/image-zoom.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: react-medium-image-zoom
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda