Popover

Tetikleyicisine bağlı, modal olmayan kayan bir panel. Escape ya da dışarıya tıklamak onu kapatır.

Import

tsx

import { Popover } from "@merid/react";

<Popover.Root>
<Popover.Trigger asChild>
  <Button variant="secondary">Paylaş</Button>
</Popover.Trigger>
<Popover.Content aria-label="Paylaş">
  <p>Linke sahip olan herkes bu sayfayı görüntüleyebilir.</p>
  <Popover.Close asChild>
    <Button variant="primary" size="sm">Linki kopyala</Button>
  </Popover.Close>
</Popover.Content>
</Popover.Root>

Anatomi

tsx

<Popover.Root>
  <Popover.Trigger />
  <Popover.Content>
    <Popover.Close />
  </Popover.Content>
</Popover.Root>

Root açık state'ini tutar.
Trigger, panelin bağlandığı <button>'dır. Paneli kendi elemanına, örneğin bir Button'a bağlamak için asChild ver.
Content kayan paneldir; portal ile render'lanır ve çakışma kontrolüyle konumlanır.
Close, popover'ı kapatıp focus'u tetikleyiciye döndüren stilsiz bir butondur. Kendi Button'ını render'lamak için asChild ver.

Örnekler

Konum

placement herhangi bir Floating UI konumunu (top, bottom-start, left-end…) kabul eder. Ekranda kalmak için yön değiştirir ve kayar.

<Popover.Content placement="top">Üstte</Popover.Content>
<Popover.Content placement="right">Sağda</Popover.Content>
<Popover.Content placement="bottom">Altta</Popover.Content>
<Popover.Content placement="left">Solda</Popover.Content>

Controlled

Kapalı

const [open, setOpen] = useState(false);

<Popover.Root open={open} onOpenChange={setOpen}>
<Popover.Trigger asChild>
  <Button variant="secondary">Ayrıntılar</Button>
</Popover.Trigger>
<Popover.Content aria-label="Ayrıntılar">Açık: {String(open)}</Popover.Content>
</Popover.Root>
<span>{open ? "Açık" : "Kapalı"}</span>

API referansı

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	–	Controlled açık state'i.
`defaultOpen`	`boolean`	`false`	Uncontrolled kullanımda başlangıçtaki açık state'i.
`onOpenChange`	`(open: boolean) => void`	–	Açık state'i değişmesi gerektiğinde çağrılır.
`children`	`ReactNode`	–	Trigger ve Content.

Popover.Trigger

Tüm <button> attribute'larını kabul eder. type varsayılan olarak "button"'dır (asChild kullanıldığında atanmaz).

Prop	Tip	Varsayılan	Açıklama
`asChild`	`boolean`	`false`	Bir `<button>` yerine tek child elemanı (örneğin kendi `Button`'ını) render'lar; prop'ları, ref'i ve handler'ları birleştirir.
`ref`	`Ref<HTMLButtonElement>`	–	Butona iletilen ref.

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

Prop	Tip	Varsayılan	Açıklama
`placement`	`Placement`	`"bottom-start"`	Tetikleyiciye göre tercih edilen konum.
`sideOffset`	`number`	`8`	Tetikleyiciye px cinsinden uzaklık.
`aria-label`	`string`	–	İçerikte görünür bir başlık yoksa erişilebilir ad.
`container`	`Element \| null`	`document.body`	Portal hedefi. `undefined` `document.body`'yi kullanır; `null` verildiğinde hedef var olana kadar hiçbir şey render'lanmaz.
`ref`	`Ref<HTMLDivElement>`	–	İçerik elemanına iletilen ref.

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

Prop	Tip	Varsayılan	Açıklama
`asChild`	`boolean`	`false`	Bir `<button>` yerine tek child elemanı (örneğin kendi `Button`'ını) render'lar; prop'ları, ref'i ve handler'ları birleştirir.
`ref`	`Ref<HTMLButtonElement>`	–	Butona iletilen ref.

.mrd-popover paneldir: --mrd-surface, 1px --mrd-line kenarlık, --mrd-radius-xl, --mrd-shadow-lg, en fazla min(360px, 100vw - 16px) genişlik. Üzerinde data-state="open" bulunur; tetikleyicide data-state="open" | "closed" bulunur. Trigger ve Close stilsiz butonlardır; stil vermek için asChild ile bir Button geçir.

Erişilebilirlik

Content role="dialog" taşır (modal değil); tetikleyicide aria-haspopup="dialog", aria-expanded ve aria-controls bulunur. Açıldığında focus panele geçer ama içinde hapsedilmez. Modal karşılığı için WAI-ARIA Dialog desenine bak. Content'e bir aria-label ya da aria-labelledby ile bağlanmış görünür bir başlık ver.

Tuş	Ne yapar
`SpaceEnter`	Tetikleyicideyken popover'ı açar ya da kapatır.
`Tab`	Popover içeriğinde ilerler, sonra dışına çıkar.
`Esc`	Popover'ı kapatır ve focus'u tetikleyiciye döndürür.

Kullanım ilkeleri

Yap

Popover'ı tek bir kontrole bağlı, küçük ve isteğe bağlı içerik için kullan: paylaşım, hızlı ayarlar, ayrıntılar.

Kaçın

Ana bir görevi ya da uzun bir formu popover'a koymak. Bunun için Dialog kullan.

İlgili sayfalar

Tooltip: kısa, etkileşimsiz etiketler için.
DropdownMenu: aksiyon listeleri için.
Dialog