HoverCard

Bir link'in üzerine gelince ya da ona focus verince kısa bir gecikmeden sonra görünen önizleme kartı: bir profil, bir repository, bir sayfa özeti.

BetaKaynak kod

İki saat önce @ada tarafından incelendi.

import { Avatar, HoverCard, Link, Text } from "@meridui/react";

export function Example() {
  return (
    <Text>
      İki saat önce{" "}
      <HoverCard.Root>
        <HoverCard.Trigger asChild>
          <Link href="/people/ada">@ada</Link>
        </HoverCard.Trigger>
        <HoverCard.Content>
          <Avatar name="Ada Lovelace" />
          <strong>Ada Lovelace</strong>
          <span>Analytical Engine ekibi · Mart 2021'den beri</span>
        </HoverCard.Content>
      </HoverCard.Root>{" "}
      tarafından incelendi.
    </Text>
  );
}

Import

import { HoverCard } from "@meridui/react";

Anatomi

<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Content />
</HoverCard.Root>

Root açık/kapalı state'ini ve gecikmeleri tutar. Kendisi bir eleman render'lamaz.
Trigger bir <a>'dır; asChild ile kendi Link'ine ya da router link'ine birleşir.
Content, tetikleyiciye göre konumlanan ve portal'lanan karttır. Yalnızca açıkken mount edilir.

Örnekler

Gecikmeler ve konum

openDelay (varsayılan 500ms) imleç üzerinden geçerken kartların yanıp sönmesini önler; closeDelay (varsayılan 300ms) imlecin link'ten karta geçmesine izin verir, kart hover'dayken açık kalır.

northwind-web

<HoverCard.Root openDelay={150} closeDelay={100}>
  <HoverCard.Trigger asChild>
    <Link href="/projects/northwind-web">northwind-web</Link>
  </HoverCard.Trigger>
  <HoverCard.Content placement="top">
    Next.js mağazası · 42 açık pull request · 5 dakika önce deploy edildi
  </HoverCard.Content>
</HoverCard.Root>

API referansı

Root

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	–	Controlled açık/kapalı state'i.
`defaultOpen`	`boolean`	`false`	Uncontrolled kullanımda başlangıç state'i.
`onOpenChange`	`(open: boolean) => void`	–	Açık/kapalı state'i değişmesi gerektiğinde çağrılır.
`openDelay`	`number`	`500`	Hover ya da focus'ta açılmadan önceki gecikme, ms.
`closeDelay`	`number`	`300`	İmleç ayrıldıktan sonra kapanmadan önceki gecikme, ms.

Trigger

Tüm <a> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`asChild`	`boolean`	`false`	<a> yerine tek child elemanı (örneğin kendi Link'ini) render'lar; props, ref ve handler'ları birleştirir.
`ref`	`Ref<HTMLAnchorElement>`	–	İletilen ref.

Content

Tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`placement`	`Placement`	`"bottom"`	Tetikleyiciye göre tercih edilen konum.
`sideOffset`	`number`	`8`	Tetikleyiciye px cinsinden uzaklık.
`container`	`Element \| null`	`document.body`	Portal hedefi.
`ref`	`Ref<HTMLDivElement>`	–	Karta iletilen ref.

Stil verme

Sınıf	Eleman
`.mrd-hover-card`	Content

Attribute	Nerede	Değerler
`data-state`	Trigger	`open`, `closed`
`data-state`	Content	`open`

Hover card tamamlayıcıdır: hover'da ve klavye focus'unda açılır ama ekran okuyuculara bildirilmez ve içeriği Tab sırasında değildir. Tetikleyici tek başına anlamlı olmalı (link tam profile gider); kritik ya da etkileşimli hiçbir şey yalnızca kartta durmamalı. Dokunmatik hover yok sayılır. Etkileşimli içerik için Popover kullan.

Tuş	Ne yapar
`Tab`	Tetikleyiciye focus vermek kartı openDelay sonra açar; ayrılmak kapatır.
`Escape`	Kartı kapatır.

Kullanım ilkeleri

Yap

Link'in gösterdiği şeyi önizle: bir kişinin kim olduğu, bir repository'nin içinde ne olduğu.

Kaçın

Hover card'a buton, form ya da bilginin tek kopyasını koymak.

İlgili sayfalar

Tooltip: bir kontrol için kısa metin etiketi.
Popover: tıklamayla açılan, etkileşimli içerik taşıyabilen panel.