Quick View

O mk-quick-view exibe um conjunto de imagens relacionadas ao mesmo produto ou objeto: uma imagem em foco com setas de navegação e uma lista de miniaturas clicáveis, além de um overlay interno para ampliar cada imagem sem sair da página. Use em páginas de detalhe de produto (PDP), cards de catálogo de e-commerce/marketplace ou qualquer superfície que precise exibir mais de uma foto do mesmo item.

Padrão

import { MkQuickView } from '@db1/makuco-ui-react';

const images = [
  { src: '/produto-frente.jpg', alt: 'Vista frontal do produto' },
  { src: '/produto-lado.jpg', alt: 'Vista lateral do produto' },
  { src: '/produto-costas.jpg', alt: 'Vista traseira do produto' },
];

<MkQuickView images={images} />

<mk-quick-view [images]="images"></mk-quick-view>

Proporção e tamanho

ratio e size controlam a imagem em foco na exibição inline — os mesmos tipos de mk-image. As miniaturas nunca seguem ratio/size: são sempre fixas em 40×40, tanto inline quanto no overlay, para não gerar layout shift na lista.

<MkQuickView images={images} ratio="16:9" size="lg" />

<mk-quick-view [images]="images" ratio="16:9" size="lg"></mk-quick-view>

Overlay ampliado

Clicar na imagem em foco abre um overlay interno com a imagem ampliada, as mesmas setas de navegação, miniaturas e um contador de posição ("X/Y"). O overlay fecha ao pressionar Escape ou ao clicar no backdrop; não há botão de fechar (X) visível nesta versão. overlayOpen é controlável externamente.

Dentro do overlay a imagem em foco é sempre exibida em suas proporções naturais — sem aplicar ratio/size —, limitada apenas por max-width/max-height para caber na viewport.

<MkQuickView images={images} overlayOpen={true} />

<mk-quick-view [images]="images" [overlayOpen]="true"></mk-quick-view>

Proporções mistas no overlay

Como o overlay não força nenhum ratio/size, imagens quadradas, panorâmicas ou em retrato dentro do mesmo images são exibidas cada uma com sua própria proporção original.

const images = [
  { src: '/produto-frente.jpg', alt: 'Vista frontal' },
  { src: '/produto-lado.jpg', alt: 'Vista lateral panorâmica' },
  { src: '/produto-detalhe.jpg', alt: 'Detalhe em retrato' },
];

<MkQuickView images={images} overlayOpen={true} />

<mk-quick-view [images]="images" [overlayOpen]="true"></mk-quick-view>

Imagem única

Quando images tem um único item, as setas de navegação e a lista de miniaturas são ocultadas — não há nada para navegar. A imagem em foco ainda pode ser clicada para abrir o overlay.

<MkQuickView images={[{ src: '/produto.jpg', alt: 'Produto' }]} />

<mk-quick-view [images]="images"></mk-quick-view>

Vazio

Quando images está vazio ou ausente, o componente exibe o mesmo fallback de mk-image sem src; navegação e miniaturas ficam ocultas e a imagem em foco não é clicável.

<MkQuickView images={[]} />

<mk-quick-view [images]="[]"></mk-quick-view>

Props

Eventos

Acessibilidade

• A lista de miniaturas usa role="tablist"; cada miniatura usa role="tab" com aria-selected refletindo o estado ativo e aria-label descrevendo posição e texto alternativo. A barra de rolagem é ocultada visualmente; a rolagem continua acessível via teclado (←/→/Home/End) ou arrastando a lista com o ponteiro (mouse/touch).
• O container da imagem em foco usa role="region" com aria-live="polite" e aria-atomic="true", anunciando a troca de imagem.
• O overlay usa role="dialog" e aria-modal="true"; o foco é movido para dentro dele ao abrir, fica preso (Tab/Shift+Tab) enquanto aberto, e retorna ao elemento que o abriu ao fechar.
• Teclado:
  • Tab — move o foco entre setas de navegação e a lista de miniaturas
  • Enter/Space — ativa a miniatura ou seta focada
  • ←/→ — navegam e ativam a miniatura anterior/próxima
  • Home/End — ativam a primeira/última miniatura
  • Escape — fecha o overlay, quando aberto