Portal

Children'ı üst DOM ağacının dışında, document.body'ye ya da başka bir elemana render'lar.

import { useState } from "react";
import { Button, Portal } from "@merid/react";

export function Example() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen((o) => !o)}>Banner'ı {open ? "kaldır" : "göster"}</Button>
      {open ? (
        <Portal>
          <div role="status" className="floating-banner">
            document.body içine render'landı
          </div>
        </Portal>
      ) : null}
    </>
  );
}

Import

tsx

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

Portal, kendine ait markup'ı olmayan tek bir component'tir. Dialog, AlertDialog, Drawer, Popover, Tooltip, DropdownMenu, Select ve Toast içeriklerini zaten portal ile render'lar; Portal'ı doğrudan yalnızca kendi kayan katmanların için kullan.

Örnekler

Özel container

document.body yerine belirli bir elemana render'lamak için container ver.

Yukarıda tanımlandı, kutunun içinde render'lanıyor:

const [target, setTarget] = useState<HTMLDivElement | null>(null);

return (
  <>
    <div ref={setTarget} />
    <Portal container={target}>Hedef kutunun içine yerleşti</Portal>
  </>
);

Tema, accent, yoğunluk ve yön

Portal ile render'lanan içerik DOM alt ağacından çıktığı için bir üst elemanda tanımlı data-theme, data-accent, data-density ya da dir değerlerini kaybederdi. Merid'in overlay'leri (Dialog, AlertDialog, Drawer, Popover, DropdownMenu, Select, Tooltip) bu attribute'ların en yakın üst eleman değerlerini tetikleyicilerinden (dialog'larda: açıldıklarında focus'ta olan eleman) alıp display: contents olan bir .mrd-portal sarmalayıcısına kopyalar. Böylece koyu bir kartın menüsü koyu açılır, mor bir bölümün select'i mor kalır. <html> ya da <body> üzerindeki değerler kopyalanmaz; portal bunları doğrudan miras alır. Toast'lar provider'dan portal'lanır ve <html>'i izler; sade Portal component'i ise children'ı olduğu gibi render'lar.

Server rendering

Portal sunucuda, hydration sırasında ve container null iken hiçbir şey render'lamaz, ardından client'ta mount edilir. İlk HTML'de bulunması gereken içeriği portal'a koyma.

API referansı

Portal

Prop	Tip	Varsayılan	Açıklama
`children`Zorunlu	`ReactNode`	–	Portal'a render'lanan içerik.
`container`	`Element \| null`	`document.body`	Hedef eleman. `undefined` `document.body`'yi kullanır; `null` hiçbir şey render'lamaz.

Stil verme

Portal hiçbir sınıf, attribute ya da CSS değişkeni eklemez. İçindeki içerik React ağacında kalmaya devam eder (context ve event'ler React üzerinden yukarı iletilir), ancak CSS hedef elemandan miras alınır; bu yüzden portal'lanan içerik üst elemanlardaki overflow, transform ya da stacking context'in dışında kalır.

Erişilebilirlik

Portal bir widget değil, bir yardımcıdır; bu yüzden bir APG deseni yok. DOM sırasını değiştirir, bu da okuma ve Tab sırasını değiştirir: portal'lanan içerik etkileşimliyse focus'u APG dialog deseninin anlattığı gibi kendin yönet ya da bunu zaten yapan Merid overlay component'lerinden birini kullan.

Portal'ın kendine ait klavye etkileşimi yok.

Kullanım ilkeleri

Yap

Kayan arayüzlerin overflow: hidden ya da bir stacking context'ten kurtulması için Portal kullan.

Kaçın

Okuma sırasında yer alması gereken satır içi içeriği portal'lamak. Sayfanın en sonunda okunur.

Portal

Import

Anatomi

Örnekler

Özel container

Tema, accent, yoğunluk ve yön

Server rendering

API referansı

Portal

Stil verme

Erişilebilirlik

Kullanım ilkeleri

İlgili sayfalar