Skeleton Text

Bir paragrafın yer tutucusu: her biri lineHeight yüksekliğinde, lines kadar iskelet satırı. Sonuncusu daha kısadır. Satırlar temanın renklerini almıyorsa her biri colors ile verilen renklerdedir. Sütun, hepsi için tek bir contentDescription taşır.

import com.pantrixui.components.elements.skeleton.PantrixSkeletonText

• 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

Bir paragrafın yerinde

En yalın hâli: yüklenen bir paragrafın yerini tutan üç satır. lines satır sayısıdır; son satır ötekilerden kısadır, böylece blok bir paragraf gibi okunur.

Üstünden geçen bant bir şeyin yüklendiğini söyler; sistem hareketi azalt dediğinde bant durur. Ekran okuyucu üç satır için bir kez "Yükleniyor" der.

PantrixSkeletonText(lines = 3, modifier = Modifier.fillMaxWidth())

Kendi renginde

colors iskelete temanın değil, verilen renkleri verir. İki renk vardır: base bloğun kendi rengi, highlight üstünden geçen bant. Burada ikisi de uygulamanın kendi morunun soluk birer hâli: zemin ne olursa olsun görünür. Sistem hareketi azalt dediğinde bant durur ve yalnızca base görünür.

Yalnızca verilen renk değişir; verilmeyen temanın rolünde kalır.

val own = ownColors()
PantrixSkeletonText(
    lines = 3,
    modifier = Modifier.fillMaxWidth(),
    colors = SkeletonColors(base = own.color.copy(alpha = 0.35f), highlight = own.color.copy(alpha = 0.15f))
)

Satır yüksekliği

lineHeight her satırın yüksekliğidir; varsayılanı PantrixTheme.spacing.md, 12dp. Yerini tuttuğu yazının boyuna göre seçilir: üstte küçük bir yazı için 8dp, ortada varsayılan, altta bir başlık için 20dp. Satırların arasındaki boşluk değişmez.

PantrixSkeletonText(lines = 2, modifier = Modifier.fillMaxWidth(), lineHeight = PantrixTheme.spacing.sm)
PantrixSkeletonText(lines = 2, modifier = Modifier.fillMaxWidth())
PantrixSkeletonText(lines = 2, modifier = Modifier.fillMaxWidth(), lineHeight = 20.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)
}

Bir dolgunun üstünde

İskelet çevresindeki içerik rengine bakmaz: temanın zemini olmayan bir dolguda renklerini çağıran verir. Buradaki yüzey info rolünün container'ında.

base o yüzeyde yazılan rengin (onContainer) soluk bir hâli, highlight yüzeyin kendi rengi: bant, satırların içinden geçen bir açıklık gibi görünür.

val info = PantrixTheme.colors.info
PantrixSurface(modifier = Modifier.fillMaxWidth(), color = info.container) {
    PantrixSkeletonText(
        lines = 2,
        modifier = Modifier.fillMaxWidth().padding(PantrixTheme.spacing.lg),
        colors = SkeletonColors(base = info.onContainer.copy(alpha = 0.3f), highlight = info.container)
    )
}

İç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

lines

Bir paragrafın yer tutucusu: her biri lineHeight yüksekliğinde, lines kadar iskelet satırı. Sonuncusu daha kısadır. Satırlar temanın renklerini almıyorsa her biri colors ile verilen renklerdedir. Sütun, hepsi için tek bir contentDescription taşır.

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.