nili/ui
enfaartr
Tüm bileşenler

Modal

Genel görünüm
13 export5 varyant ekseni25 prop4 dosya
import { Modal, StatusModal } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

open ve onOpenChange ile denetlenir. Body’ye taşınır, açıkken odağı hapseder ve kapanışta odağı tetikleyiciye geri verir.

import { Modal, Button } from "@nili/ui"

export function Example() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>

      <Modal
        open={open}
        onOpenChange={setOpen}
        title="Invite a teammate"
        description="They will get an email with a link to join."
        closeLabel="Close"
        footer={
          <>
            <Button appearance="stroke" onClick={() => setOpen(false)}>Cancel</Button>
            <Button onClick={() => setOpen(false)}>Send invite</Button>
          </>
        }
      >
        <TextInput label={t('invite.email')} placeholder="hello@nili.design" />
      </Modal>
    </>
  )
}

Boyutlar

Dört panel genişliği. headerSize ayrıdır — Figma’nın Medium (80) ve Small (56) başlığı.

import { Modal } from "@nili/ui"

export function Example() {
  return (
    <>
      <Modal size="sm" … />
      <Modal size="md" … />
      <Modal size="lg" … />
      <Modal size="xl" … />
    </>
  )
}

Başlık ve hizalama

icon serbest bir ön yuvadır ve status’a üstün gelir. Dikey bir alignment simgeyi, başlığı ve metni ortalar — bir onayın istediği biçim.

import { Modal, Icon } from "@nili/ui"
import { RiDeleteBinLine } from "@remixicon/react"

export function Example() {
  return (
    <Modal
      open={open}
      onOpenChange={setOpen}
      alignment="vertical"
      status="error"
      icon={<Icon icon={RiDeleteBinLine} />}
      title="Delete this project?"
      description="This cannot be undone. Everything in it will be removed."
      stretchFooter
      footer={
        <>
          <Button appearance="stroke" onClick={close}>Cancel</Button>
          <Button color="error" onClick={close}>Delete</Button>
        </>
      }
    />
  )
}

Durum kipi

Durumu sabitlenmiş aynı kip: KeyIcon’u ve rengini kendisi seçer; böylece bir “success” iletişim kutusu kırmızı gelemez.

durumlar
import { StatusModal, Button } from "@nili/ui"

export function Example() {
  return (
    <StatusModal
      open={open}
      onOpenChange={setOpen}
      status="success"
      alignment="vertical"
      title="Payment received"
      description="We have emailed you a receipt."
      stretchFooter
      footer={<Button onClick={close}>Done</Button>}
    />
  )
}

Kapatmayı denetlemek

closeOnOutsideClick ve closeOnEscape varsayılan olarak açıktır. Kaydedilmemiş iş tutan bir iletişim kutusu için kapatın — ama o zaman kapatma düğmesini bırakın, yoksa çıkış yolu kalmaz.

import { Modal } from "@nili/ui"

export function Example() {
  return (
    <Modal
      open={open}
      onOpenChange={setOpen}
      closeOnOutsideClick={false}
      closeOnEscape={false}
      showClose
      closeLabel="Close"
      title="Unsaved changes"
      …
    />
  )
}