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.

KararlıKaynak kod

Henüz fatura yok

Oluşturduğun ya da aldığın faturalar burada görünür.

Import

tsx
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.

Yalnızca başlık

Zorunlu olan tek prop title'dır.

İ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).

PropTipVarsayılanAçıklama
titleZorunluReactNode–Kısa başlık, örneğin "Henüz fatura yok".
descriptionReactNode–Sonraki adımı anlatan bir iki cümle.
iconReactNode–Yumuşak accent zeminli bir karede gösterilen ikon. Dekoratiftir.
actionReactNode–Ana aksiyon(lar), genellikle bir Button.
titleLevel1 | 2 | 3 | 4 | 5 | 63title 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çiciDeğerler
.mrd-empty-stateKök; data-variant = tray · plain
.mrd-empty-state__iconYumuşak accent zeminli ikon karesi
.mrd-empty-state__titleBaşlık
.mrd-empty-state__descriptionGövde metni
.mrd-empty-state__actionAksiyon 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 diye titleLevel'ı 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.

İlgili sayfalar

  • Table: boş durumun en sık göründüğü yer.
  • Skeleton: veri hâlâ yüklenirken, boş olduğu henüz belli değilken.
  • Button: aksiyonun kendisi.