nili/ui
enfaartr
Tüm bileşenler

Alert

Genel görünüm
11 export7 varyant ekseni17 prop4 dosya
import { Alert, AlertAction } 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.

Durumlar

Beş anlam. error varsayılan olarak kesintili duyurulur; diğerleri bir duraklamayı bekler.

Bu bir error uyarısıdır.
Bu bir warning uyarısıdır.
Bu bir success uyarısıdır.
Bu bir info uyarısıdır.
Bu bir feature uyarısıdır.
import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert status="error" title="Something went wrong." />
      <Alert status="warning" title="Your trial ends in 3 days." />
      <Alert status="success" title="Payment received." />
      <Alert status="info" title="A new version is available." />
      <Alert status="feature" title="Try the new dashboard." />
    </>
  )
}

Görünümler

filled, light, lighter ve stroke. En yükseği filled — onu gerçekten böleni bildirmeye saklayın.

Görünüm: filled
Görünüm: light
Görünüm: lighter
Görünüm: stroke
import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert appearance="filled" status="info" title="Filled" />
      <Alert appearance="light" status="info" title="Light" />
      <Alert appearance="lighter" status="info" title="Lighter" />
      <Alert appearance="stroke" status="info" title="Stroke" />
    </>
  )
}

Boyutlar

x-small, simge boşluğu olmayan tek satırdır; large açıklama ve eylem taşır.

x-small
Değişiklikleriniz kaydedildi.
small
Değişiklikleriniz kaydedildi.
large
Değişiklikleriniz kaydedildi.

Ekipteki herkes artık görebilir.

import { Alert } from "@nili/ui"

export function Example() {
  return (
    <>
      <Alert size="x-small" status="success" title="Saved." />
      <Alert size="small" status="success" title="Saved." />
      <Alert
        size="large"
        status="success"
        title="Saved."
        description="Your changes are live for everyone on the team."
      />
    </>
  )
}

Eylemler, simgeler ve kapatma

actions en çok iki satır içi eylem alır. icon varsayılan simge için true, onu değiştirmek için bir düğüm, kaldırmak için false kabul eder. dismissible için dismissLabel gerekir — bir ✕’in erişilebilir adı yoktur.

Your plan is almost full.

You have used 92% of your storage.

YükseltDaha fazla
Introducing smart filters.
Hiç simge yok.
Beni kapat.
import { Alert, Icon } from "@nili/ui"
import { RiSparkling2Line } from "@remixicon/react"

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

  return (
    <>
      <Alert
        status="warning"
        appearance="stroke"
        size="large"
        title={t('actions.planTitle')}
        description={t('actions.planBody')}
        actions={[
          { label: "Upgrade", href: "#" },
          { label: "Dismiss", onClick: () => setOpen(false) },
        ]}
        dismissible
        dismissLabel={t('close')}
        onDismiss={() => setOpen(false)}
      />

      {/* Custom icon */}
      <Alert
        status="feature"
        title={t('actions.feature')}
        icon={<Icon icon={RiSparkling2Line} />}
      />

      {/* No icon */}
      <Alert status="info" title="No icon." icon={false} />
    </>
  )
}