nili/ui
enfaartr
Tüm bileşenler

Banner

Genel görünüm
10 export6 varyant ekseni17 prop4 dosya
import { Banner, BannerAction } 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

Alert ile aynı beş anlam. Afiş genelde ilk boyamada zaten ekrandadır, bu yüzden varsayılan olarak nazikçe duyurulur.

Bu bir error afişidir.
Bu bir warning afişidir.
Bu bir success afişidir.
Bu bir info afişidir.
Bu bir feature afişidir.
import { Banner } from "@nili/ui"

export function Example() {
  return (
    <>
      <Banner status="error" title="Payment failed." />
      <Banner status="warning" title={t('content.maintenance')} />
      <Banner status="success" title={t('content.verified')} />
      <Banner status="info" title="We updated our terms." />
      <Banner status="feature" title={t('content.feature')} />
    </>
  )
}

Görünümler

Alert ile eşleşen dört işleyiş.

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

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

Açıklama, eylem ve kapatma

description başlıktan sonra bir noktayla ayrılarak eklenir. Afiş tasarım gereği tek bir satır içi action alır — ikiye ihtiyacınız varsa istediğiniz şey Alert’tir.

açıklama ve eylemle
Scheduled maintenance tonight.UTC 02:00 ile 03:00 arasında.
Ayrıntılar
özel simge
Smart filters are here.
Göz atın
kapatılabilir
Your account is verified.
import { Banner, Icon } from "@nili/ui"
import { RiSparkling2Line } from "@remixicon/react"

export function Example() {
  const [open, setOpen] = useState(true)
  if (!open) return null

  return (
    <Banner
      status="feature"
      appearance="light"
      title="Smart filters are here."
      description="Save a filter set and reuse it everywhere."
      icon={<Icon icon={RiSparkling2Line} />}
      action={{ label: "Take a look", href: "#" }}
      dismissible
      dismissLabel={t('close')}
      onDismiss={() => setOpen(false)}
    />
  )
}

Yapışkan

sticky afişi görünüm alanının üstüne sabitler. Sayfa düzeyindeki bir duyuru için doğru, kartın içindeki için yanlış.

You are viewing a read-only archive.
import { Banner } from "@nili/ui"

export function Example() {
  return (
    <Banner
      sticky
      status="info"
      title={t('sticky.archive')}
    />
  )
}