EmptyState
Gösterilecek bir şey olmadığı anlar için ortalanmış bir alan: boş bir liste, sonuç vermeyen bir arama, ilk açılış ekranı. Nedenini açıklar ve bir sonraki adımı sunar.
Henüz fatura yok
Oluşturduğun ya da aldığın faturalar burada görünür.
<EmptyState
icon={<InboxIcon />}
title="Henüz fatura yok"
description="Oluşturduğun ya da aldığın faturalar burada görünür."
action={<Button variant="primary" leadingIcon={<PlusIcon />}>Yeni fatura</Button>}
/>Import
import { EmptyState } from "@merid/react";Örnekler
Plain
variant="plain" gri yüzey (tray) arka planını kaldırır. Zaten bir yüzeyi olan kart ya da tablo çerçevesinin içinde bunu kullan. titleLevel, başlık seviyesini sayfanın başlık hiyerarşisine uyacak şekilde ayarlar.
“çeyreklik” için sonuç yok
Daha kısa bir arama dene ya da yazımı kontrol et.
<EmptyState
variant="plain"
icon={<SearchIcon />}
title="“çeyreklik” için sonuç yok"
description="Daha kısa bir arama dene ya da yazımı kontrol et."
action={<Button>Aramayı temizle</Button>}
titleLevel={2}
/>Yalnızca başlık
Zorunlu olan tek prop title'dır.
İncelenecek bir şey yok
<EmptyState title="İncelenecek bir şey yok" />API referansı
Bir div render'lar; ref'i ve diğer div attribute'larını iletir (native title attribute'unun yerini title prop'u alır).
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
titleZorunlu | ReactNode | – | Kısa başlık, örneğin "Henüz fatura yok". |
description | ReactNode | – | Sonraki adımı anlatan bir iki cümle. |
icon | ReactNode | – | Yumuşak accent zeminli bir karede gösterilen ikon. Dekoratiftir. |
action | ReactNode | – | Ana aksiyon(lar), genellikle bir Button. |
titleLevel | 1 | 2 | 3 | 4 | 5 | 6 | 3 | title için başlık seviyesi. |
variant | "tray" | "plain" | "tray" | Yüzey: tray içe gömülü gri bir panel, plain arka plansız. |
Stil verme
| Seçici | Değerler |
|---|---|
.mrd-empty-state | Kök; data-variant = tray · plain |
.mrd-empty-state__icon | Yumuşak accent zeminli ikon karesi |
.mrd-empty-state__title | Başlık |
.mrd-empty-state__description | Gövde metni |
.mrd-empty-state__action | Aksiyon satırı |
EmptyState'in component değişkeni yoktur.
Erişilebilirlik
- Başlık gerçek bir heading'dir (varsayılan
h3). Çevresindeki başlık hiyerarşisine uysun diyetitleLevel'ı ayarla. - İkon
aria-hidden'dır; anlamı başlık tek başına taşımalı. - Boş durum bir aramadan sonra sonuçların yerini alıyorsa değişikliği duyur. Örneğin sonuç sayısını polite bir live region içinde render'la.
Kullanım ilkeleri
Yap
Neyin eksik olduğunu ve nasıl doldurulacağını söyle: “Henüz fatura yok” ve yanında bir “Yeni fatura” butonu.
Kaçın
Yalnızca “Veri yok” yazmak ya da ilerleme yolu sunmayan büyük bir illüstrasyon göstermek.