nili/ui
enfaartr
كل المكوّنات

Modal

عرض شامل
١٣ تصدير٥ محور تنويع٢٥ خاصيّة٤ ملف
import { Modal, StatusModal } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

أساسي

يُتحكّم به عبر open وonOpenChange. ويُنقل إلى body، ويحبس التركيز وهو مفتوح، ويعيده إلى المُشغِّل عند الإغلاق.

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>
    </>
  )
}

الأحجام

أربعة عروض للوحة. وheaderSize منفصلة — ترويسة Medium (‏٨٠) وSmall (‏٥٦) في فيجما.

import { Modal } from "@nili/ui"

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

الترويسة والمحاذاة

icon فتحة متقدّمة حرّة وتتقدّم على status. والمحاذاة الرأسية توسّط الأيقونة والعنوان والنص — وهو الشكل الذي يريده التأكيد.

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>
        </>
      }
    />
  )
}

نافذة الحالة

النافذة نفسها مع تثبيت الحالة: تختار KeyIcon ولونها، فلا يأتي حوار «success» بالأحمر.

الحالات
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>}
    />
  )
}

التحكّم في الإغلاق

closeOnOutsideClick وcloseOnEscape مفعّلتان افتراضيًا. أطفئهما لحوار يحمل عملًا غير محفوظ — لكن أبقِ زر الإغلاق عندئذ، وإلا فلا مخرج.

import { Modal } from "@nili/ui"

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