Skeleton

İçerik yüklenirken onun şeklini koruyan bir yer tutucu; veri geldiğinde layout zıplamaz. 1,4 saniyede bir parıldar, azaltılmış hareket açıkken sabit kalır.

<Stack direction="row" gap={3} align="center" aria-busy="true">
<Skeleton circle width={40} height={40} />
<Stack gap={2} style={{ flex: 1 }}>
  <Skeleton width="60%" />
  <Skeleton width="90%" height={12} />
</Stack>
</Stack>

Import

import { Skeleton } from "@merid/react";

Örnekler

Metin bloğu

Boyut prop'u verilmezse skeleton tam genişlikte ve 1em yüksekliğindedir, yani çevresindeki metnin bir satırı kadar. Bloğun paragraf gibi okunması için son satırı kısalt.

<Stack gap={2} aria-busy="true">
<Skeleton height={24} width="50%" />
<Skeleton />
<Skeleton />
<Skeleton width="75%" />
</Stack>

Şekiller

Sayılar piksel, string'ler herhangi bir CSS uzunluğudur. circle tamamen yuvarlar; width ve height'ı eşit ver.

<Skeleton width={120} height={80} />
<Skeleton circle width={48} height={48} />
<Skeleton width={96} height={36} />

API referansı

aria-hidden bir span render'lar ve ref'ini iletir. style boyut prop'larından sonra birleştirilir, yani onları ezebilir.

Stil verme

Skeleton'ın component değişkeni yok. Parıltı --mrd-tray'den --mrd-tray-2'ye gider; Merid'in izin verdiği tek gradyan bu.

Erişilebilirlik

• Her skeleton aria-hidden'dır; tek başına yardımcı teknolojiye hiçbir şey söylemez.
• Yüklenen bölgeye aria-busy="true" ver, içerik gelince kaldır. Sesli bir ipucu için görsel olarak gizli bir “Yükleniyor…” status'u ekle.

Kullanım ilkeleri

İlgili sayfalar

• Spinner: içerik için değil, aksiyonlar için.
• EmptyState: yükleme sonunda hiçbir şey çıkmazsa ne gösterileceği.