nili/ui
enfaartr
Tüm bileşenler

EmptyState

Genel görünüm
4 export0 varyant ekseni7 prop2 dosya
import { EmptyState } 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

Yalnızca title zorunlu. illustration yuvası verdiğiniz SVG veya görselin boyutunu size ekseninden alır; bu yüzden onu çerçeveleyen bir şeyi değil, simgenin kendisini verin — çizimler Figma’da durur ve dışa aktarılır, bileşenle gelmez.

No invoices yet

When you send your first invoice, it will show up here.

import { EmptyState, Button, Icon } from "@nili/ui"
import { RiInboxLine, RiAddLine } from "@remixicon/react"

export function Example() {
  return (
    <EmptyState
      illustration={<Icon icon={RiInboxLine} />}
      title={t('copy.noInvoices')}
      description={t('copy.noInvoicesBody')}
      actions={<Button startIcon={<Icon icon={RiAddLine} />}>New invoice</Button>}
    />
  )
}

Boyutlar

Üç yoğunluk. Boş bir hücre ya da dar panel için sm, kart için md, tüm sayfa için lg.

sm
No results

Başka bir arama terimi deneyin.

md
No results

Başka bir arama terimi deneyin.

lg
No results

Başka bir arama terimi deneyin.

import { EmptyState } from "@nili/ui"

export function Example() {
  return (
    <>
      <EmptyState size="sm" title={t('copy.noResults')} />
      <EmptyState size="md" title="No results" />
      <EmptyState size="lg" title="No results" />
    </>
  )
}

Ayırmaya değer üç durum

“Henüz bir şey oluşturulmadı”, “eşleşen bir şey yok” ve “bir şeyler ters gitti” farklı durumlardır ve her birinde eylem değişir. “Sonuç yok” durumunda “İlk öğeni oluştur” demek kafa karıştırır — öğeler var, yanlış olan filtredir.

No projects yet

Create one to get started.

“roadmap” için eşleşme yok

Check the spelling, or clear the filters.

Could not load projects

Check your connection and try again.

Desteğe yazın
import { EmptyState, Button, LinkButton, Icon } from "@nili/ui"
import { RiInboxLine, RiSearchLine, RiWifiOffLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      {/* nothing created yet → offer to create */}
      <EmptyState
        illustration={<Icon icon={RiInboxLine} />}
        title={t('copy.noProjects')}
        description={t('copy.noProjectsBody')}
        actions={<Button>New project</Button>}
      />

      {/* nothing matched → offer to clear the filter */}
      <EmptyState
        illustration={<Icon icon={RiSearchLine} />}
        title="No projects match “roadmap”"
        description={t('copy.noMatchesBody')}
        actions={<Button appearance="stroke">Clear filters</Button>}
      />

      {/* something failed → offer to retry */}
      <EmptyState
        illustration={<Icon icon={RiWifiOffLine} />}
        title={t('copy.loadFailed')}
        description={t('copy.loadFailedBody')}
        actions={
          <>
            <Button appearance="stroke">Retry</Button>
            <LinkButton href="#">Contact support</LinkButton>
          </>
        }
      />
    </>
  )
}