Componentnavigation

Glimpse

Stable

Prévia do destino de um link: no hover ou no foco, mostra os metadados da página para onde ele aponta — imagem Open Graph, título e descrição (ou o `<title>` e a meta description, quando ela não publica `og:*`) — e, tipicamente, o endereço. É um resumo do destino, não uma miniatura nem um iframe da página. Composto sobre o Hover Card, de quem herda intenção do ponteiro, foco, Escape e política de movimento. O componente é apresentacional: quem lê os metadados é a aplicação, no servidor, e os passa como children — o helper `glimpse(url)` da origem, que baixava a URL e lia as tags, ficou de fora de propósito.

Instalação

npx up-web-ds add glimpse

Preview

Basic

Ajuda do catálogo

With Image

Catálogo do Up Web DS

In Prose

Antes de promover um item, confira a política de movimento descrita no Hover Card e o que ela exige sob movimento reduzido.

All states

Basic

Ajuda do catálogo

With Image

Catálogo do Up Web DS

In Prose

Antes de promover um item, confira a política de movimento descrita no Hover Card e o que ela exige sob movimento reduzido.

Usage

@/components/glimpse

import {
  Glimpse,
  GlimpseContent,
  GlimpseDescription,
  GlimpseTitle,
  GlimpseTrigger,
} from '@/components/glimpse'

Glimpse

1
2
3
4
5
6
7
8
9
10<Glimpse>
  <GlimpseTrigger href="/preview/help">Ajuda do catálogo</GlimpseTrigger>
  <GlimpseContent>
    <GlimpseTitle>Ajuda · Up Web Studio DS</GlimpseTitle>
    <GlimpseDescription>
      Como classificar, importar, criar, validar e distribuir componentes do
      Up Web DS.
    </GlimpseDescription>
  </GlimpseContent>
</Glimpse>

Props

Glimpse

Props de Glimpse
Prop	Type	Default	Description
actionsRef	`React.RefObject<PreviewCardRootActions \| null>`	sem valor padrão	A ref to imperative actions. - `unmount`: Unmounts the preview card popup. - `close`: Closes the preview card imperatively when called.
children	`React.ReactNode \| PayloadChildRenderFunction<unknown>`	sem valor padrão	The content of the preview card. This can be a regular React node or a render function that receives the `payload` of the active trigger.
defaultOpen	`boolean`	`false`	Whether the preview card is initially open. To render a controlled preview card, use the `open` prop instead.
defaultTriggerId	`string \| null`	sem valor padrão	ID of the trigger that the preview card is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open preview card.
handle	`PreviewCardHandle<unknown>`	sem valor padrão	A handle to associate the preview card with a trigger. If specified, allows external triggers to control the card's open state. Can be created with the PreviewCard.createHandle() method.
onOpenChange	`((open: boolean, eventDetails: PreviewCardRoot.ChangeEventDetails) => void)`	sem valor padrão	Event handler called when the preview card is opened or closed.
onOpenChangeComplete	`((open: boolean) => void)`	sem valor padrão	Event handler called after any animations complete when the preview card is opened or closed.
open	`boolean`	sem valor padrão	Whether the preview card is currently open.
triggerId	`string \| null`	sem valor padrão	ID of the trigger that the preview card is associated with. This is useful in conjunction with the `open` prop to create a controlled preview card. There's no need to specify this prop when the preview card is uncontrolled (that is, when the `open` prop is not set).

Estende HoverCardProps.

GlimpseTrigger

Props de GlimpseTrigger
Prop	Type	Default	Description
className	`string \| ((state: PreviewCardTriggerState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
closeDelay	`number`	`300`	How long to wait before closing the preview card. Specified in milliseconds.
delay	`number`	`600`	How long to wait before the preview card opens. Specified in milliseconds.
handle	`PreviewCardHandle<unknown>`	sem valor padrão	A handle to associate the trigger with a preview card.
payload	`unknown`	sem valor padrão	A payload to pass to the preview card when it is opened.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, PreviewCardTriggerState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: PreviewCardTriggerState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende React.ComponentProps<typeof HoverCardTrigger>. Aceita também os atributos padrão de um elemento React (283 não listados).

GlimpseContent

Props de GlimpseContent
Prop	Type	Default	Description
align	`Align`	`'center'`	How to align the popup relative to the specified side.
alignOffset	`number \| OffsetFunction`	`0`	Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
className	`string \| ((state: PreviewCardPopupState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, PreviewCardPopupState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
side	`Side`	`'bottom'`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
sideOffset	`number \| OffsetFunction`	`0`	Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side.
style	`React.CSSProperties \| ((state: PreviewCardPopupState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende React.ComponentProps<typeof HoverCardContent>. Aceita também os atributos padrão de um elemento React (275 não listados).

GlimpseTitle

Estende React.ComponentProps<'p'>. Aceita também os atributos padrão de um elemento React (280 não listados).

GlimpseDescription

Estende React.ComponentProps<'p'>. Aceita também os atributos padrão de um elemento React (280 não listados).

GlimpseImage

Estende React.ComponentProps<'img'>. Aceita também os atributos padrão de um elemento React (292 não listados).

Composition

Gatilho e prévia são irmãos dentro do Glimpse. A prévia empilha a imagem Open Graph, o título e a descrição do destino, nessa ordem; todos são opcionais, e o endereço pode vir logo abaixo, composto por quem usa.

Composição de Glimpse

Glimpse

GlimpseTrigger
GlimpseContent
- GlimpseImage
- GlimpseTitle
- GlimpseDescription

Metadata

Notas de acessibilidade

Teclado verificado por teste e em navegador: a prévia abre quando o link recebe foco por Tab — não só no hover —, Escape a dispensa sem tirar o foco do gatilho e um link dentro da prévia é alcançável por Tab (WCAG 2.2 SC 1.4.13). Leitor de tela verificado por teste e pela árvore de acessibilidade do navegador: o gatilho é um link com href real e nome vindo do texto, e a prévia é conteúdo suplementar, nunca a única rota até o que ela mostra. A imagem Open Graph é decorativa por padrão (alt vazio), porque o título ao lado já nomeia a página e anunciá-la repetiria a informação; quem passa alt a torna uma imagem nomeada. A prévia é texto e imagem do destino, nunca um iframe. Axe sem violações WCAG 2.2 AA com a prévia aberta, em light e dark. Toque verificado em viewport de 375px com emulação de toque: sem hover não há prévia, e isso é decisão de design e não lacuna — tocar o link segue para a mesma página que a prévia resume, e o gatilho mede pelo menos 24x24 graças a um padding vertical que não desloca a linha. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — a entrada é a do Hover Card, que chega sem deslocamento nem zoom enquanto o fade que o Base UI observa continua, e a escala de motion não é colapsada.

Classificação

Layer: Component
Domínio: Application
Categoria: navigation
Status: Stable

Origem e distribuição

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

Acessibilidade

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

Dependências

Pacotes: Nenhuma
Ícones: Nenhum
Construído sobre: Hover Card
Usado por: Nenhum ainda