Skeleton

Yüklenmesi süren içeriğin yer tutucusu: shape şeklinde bir blok ve üstünden geçen açık bir bant. Sistem hareketin azaltılmasını istediğinde bant durur. Boyutu modifier ile verilir. colors, temanın renklerini almayan bloğun kendi renkleridir. Ekran okuyucu contentDescription'ı okur: varsayılanı temanın "yükleniyor" metnidir. Yüklendiğini onu saran bir öğe zaten duyuruyorsa null verilir. tagKey otomasyon anahtarıdır: blok Skeleton_<tagKey>'dır ve bir test içeriğin geldiğini onun gitmesinden anlar. Anahtar yoksa etiketi olmaz.

import com.pantrixui.components.elements.skeleton.PantrixSkeleton

• Boyutu çağıran verir. PantrixSkeleton'ın kendi boyutu yoktur: modifier ile, yerini tuttuğu içeriğin boyutunda verilir.
• Şekil. shape bloğun köşeleridir. Varsayılanı temanın en küçük yuvarlağıdır (shapes.xs); bir avatarın yerinde shapes.full bir daire çizer.
• Satırlar. PantrixSkeletonText lines kadar satır çizer. Son satır ötekilerden kısadır: blok bir paragraf gibi okunur. lineHeight satırların yüksekliğidir.
• Bant. Bloğun üstünden daha açık bir bant geçer, bir uçtan ötekine gidip gelir. Sistem hareketin azaltılmasını istediğinde bant durur ve blok yalnızca kendi rengindedir.
• Renkler. SkeletonColors iki renktir: bloğun kendi rengi (base) ve üstünden geçen bant (highlight). Verilmeyen renk temanın rolünde kalır: disabledContent ve divider.
• Dolgunun üstünde. İskelet çevresindeki içerik rengine bakmaz: temanın zemini olmayan bir dolguda renklerini çağıran verir.
• Bir kez duyurmak. Birkaç iskeletten oluşan bir yer tutucuda parçalara contentDescription = null verilir ve yüklendiğini onları saran öğe bir kez söyler.

Örnekler

Tek bir blok ve şekli

PantrixSkeleton tek bir bloktur ve kendi boyutu yoktur: boyutunu modifier verir, yerini tuttuğu içeriğinki kadar. shape bloğun köşeleridir.

Sırayla: bir avatarın dairesi (shapes.full), bir resmin dikdörtgeni (shapes.md), bir düğmenin hapı ve şekil verilmeyen bir satır. Varsayılan şekil temanın en küçük yuvarlağıdır: shapes.xs.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    itemVerticalAlignment = Alignment.CenterVertically
) {
    PantrixSkeleton(modifier = Modifier.size(48.dp), shape = PantrixTheme.shapes.full)
    PantrixSkeleton(modifier = Modifier.size(width = 96.dp, height = 64.dp), shape = PantrixTheme.shapes.md)
    PantrixSkeleton(modifier = Modifier.size(width = 88.dp, height = 32.dp), shape = PantrixTheme.shapes.full)
    PantrixSkeleton(modifier = Modifier.size(width = 120.dp, height = 12.dp))
}

Bir kez duyurulan satır

Bir avatar ve iki satır: bir liste satırının iskeleti. İki parçanın ikisi de "Yükleniyor" deseydi ekran okuyucu aynı satır için iki kez söylerdi.

Parçalara contentDescription = null verildi. Yüklendiğini satırın tamamı bir kez söyler, temanın kendi metniyle: PantrixTheme.strings.loading.

val loading = PantrixTheme.strings.loading
Row(
    modifier = Modifier.fillMaxWidth().semantics(mergeDescendants = true) { contentDescription = loading },
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixSkeleton(modifier = Modifier.size(40.dp), shape = PantrixTheme.shapes.full, contentDescription = null)
    PantrixSkeletonText(lines = 2, modifier = Modifier.weight(1f), contentDescription = null)
}

İçerik gelene kadar

İskelet, yerini tuttuğu içeriğe benzer: avatarın yerinde aynı boyda bir daire, iki satır yazının yerinde iki satır. Düğmeye bas: içerik gelir ve iskeletin yerini alır. İkisinden hangisinin çizileceğine çağıran karar verir.

Yüklenirken dairenin açıklaması yoktur; "Yükleniyor"u yanındaki satırlar bir kez söyler. Satırların etiketi (tagKey) bir testin beklediğidir: SkeletonText_profile gidince içerik gelmiştir.

var loading by rememberSaveable { mutableStateOf(true) }
Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalAlignment = Alignment.CenterVertically
) {
    if (loading) {
        PantrixSkeleton(
            modifier = Modifier.size(40.dp),
            shape = PantrixTheme.shapes.full,
            contentDescription = null
        )
        PantrixSkeletonText(lines = 2, modifier = Modifier.weight(1f), tagKey = "profile")
    } else {
        PantrixAvatar(contentDescription = null, initials = "AY", size = 40.dp)
        Column(modifier = Modifier.weight(1f)) {
            PantrixText(text = "Ayşe Yılmaz", tagKey = "profile_name")
            PantrixText(
                text = "Tasarım ekibi",
                style = PantrixTheme.typography.footnote,
                color = PantrixTheme.colors.textSecondary
            )
        }
    }
}
PantrixButton(
    text = if (loading) "İçeriği getir" else "Yeniden yükle",
    onClick = { loading = !loading },
    variant = ButtonVariant.Outline,
    size = ButtonSize.Small,
    tagKey = "toggle_profile"
)

API

modifier

Yüklenmesi süren içeriğin yer tutucusu: shape şeklinde bir blok ve üstünden geçen açık bir bant. Sistem hareketin azaltılmasını istediğinde bant durur. Boyutu modifier ile verilir. colors, temanın renklerini almayan bloğun kendi renkleridir. Ekran okuyucu contentDescription'ı okur: varsayılanı temanın "yükleniyor" metnidir. Yüklendiğini onu saran bir öğe zaten duyuruyorsa null verilir. tagKey otomasyon anahtarıdır: blok Skeleton_<tagKey>'dır ve bir test içeriğin geldiğini onun gitmesinden anlar. Anahtar yoksa etiketi olmaz.

SkeletonColors

Temanın renklerini almayan bir yer tutucuda PantrixSkeleton ve PantrixSkeletonText'in boyandığı renkler: verilen renk kullanılır, verilmeyen temanın rolünde kalır.

Erişilebilirlik

• Ekran okuyucu. Her iskelet contentDescription'ını söyler; varsayılanı temanın dilindeki "Yükleniyor"dur. PantrixSkeletonText bütün satırları için bir kez söyler.