Card Skeleton

İçeriği henüz gelmemiş bir PantrixCard: kartın kendi yüzeyi, başlığının, gövdesinin ve eylemlerinin geleceği yerde çubuklarla.

import com.pantrixui.components.container.card.PantrixCardSkeleton

• Üç varyant. variant kartın durduğu yerden nasıl ayrıldığını söyler: Elevated bir gölgeyle, Filled bir dolguyla, Outlined ince bir kenarla.
• Yuvalar. header gövdenin üstünde, footer altında durur; media hepsinin üstünde, kartın iç boşluğunu almadan kenardan kenara çizilir. Gövdedeki satırların arasında temanın küçük boşluğu (spacing.sm) vardır.
• Yükseklik. Yükseklik verilen kartın gövdesi onu doldurur: footer kartın dibinde durur ve gövdede weight alan bir çocuk aradaki yeri alır. Bir satırın kartları böylece aynı boyda olur.
• Tek bir düğme. onClick verilen kartın tamamı tek bir düğmedir: ekran okuyucu tek bir hedef duyar. footer'daki bir düğme kendi basışını korur.
• Basılamayan kart. onClick'i olan ve enabled'ı false olan kart, içindekilere temanın devre dışı rengini verir; kendi rengini veren bir çocuk onu korur.
• İçerik rengi. Temanın surface'ı üstünde, yani Elevated ve Outlined kartta, kart içindekilere renk vermez: her çocuk kendi varsayılanıyla çizilir. Filled kart ve bir rolün dolgusu verilen kart, o dolguda okunan rengi verir.
• Kendi renkleri. CardColors dolguyu, içeriğin rengini ve kenarı verir; verilmeyen varyantınki kalır.
• Platform. Köşeler ve gölge platforma göredir (CardStyle): Android'de orta köşe ve 2dp gölge, iOS'ta büyük köşe ve gölgesiz, masaüstünde ve web'de küçük köşe ve 1dp gölge.
• İskelet. PantrixCardSkeleton verisi gelmemiş bir kartın yerini tutar: kartın kendi yüzeyi, içinde başlığın, satırların ve düğmelerin yerinde çubuklar. Ekran okuyucuya bir kez, kartın tamamı için duyurulur.
• Otomasyon. tagKey karta Card_<tagKey> etiketini verir; bir basış, varyantıyla birlikte Card olayı olarak bildirilir.

Örnekler

Veri gelene kadar: iskelet

"Yenile"ye bas: iki kart iki saniyeliğine iskeletleriyle yer değiştirir. PantrixCardSkeleton bir karta benzetilerek çizilmez, kartın kendi şekli, dolgusu, gölgesi, iç boşluğu ve aralıklarıyla kurulur. Çubukları, yerini tuttukları şeyin kapladığı yeri kaplar: veri gelince kartın yüksekliği değişmez ve altındaki hiçbir şey yerinden oynamaz.

İskelet kartın içinde ne olduğunu bilemez: showHeader, lines, footerButtons ve mediaHeight yerine geçtiği karta göre verilir. İlk kartın bir başlığı, bir satırı ve iki düğmesi var: lines = 1, footerButtons = 2.

"Kampanya" kartının dolgusu ve içeriğinin rengi dışarıdan verildi. İskeleti de kartın renklerini colors ile alır; çubukları skeletonColors ile verilen renkte çizilir.

val own = ownColors()
val campaign = CardColors(container = own.container, content = own.onContainer)
var loading by remember { mutableStateOf(false) }
LaunchedEffect(loading) {
    if (loading) {
        delay(2_000)
        loading = false
    }
}
if (loading) {
    PantrixCardSkeleton(modifier = Modifier.fillMaxWidth(), lines = 1, footerButtons = 2)
} else {
    PantrixCard(
        modifier = Modifier.fillMaxWidth(),
        header = {
            PantrixText(
                text = "Sipariş #1042",
                style = PantrixTheme.typography.title,
                role = TextRole.Heading(level = 3)
            )
        },
        footer = {
            PantrixButton(
                text = "Yenile",
                onClick = { loading = true },
                variant = ButtonVariant.Text,
                tagKey = "reload"
            )
            PantrixButton(text = "Takip et", onClick = {}, tagKey = "track")
        }
    ) {
        PantrixText(text = "İki ürün, perşembe günü teslim")
    }
}
if (loading) {
    PantrixCardSkeleton(
        modifier = Modifier.fillMaxWidth(),
        variant = CardVariant.Filled,
        colors = campaign,
        skeletonColors = SkeletonColors(base = own.onContainer.copy(alpha = 0.3f), highlight = own.container),
        lines = 1
    )
} else {
    PantrixCard(
        modifier = Modifier.fillMaxWidth(),
        variant = CardVariant.Filled,
        colors = campaign,
        tagKey = "campaign"
    ) {
        PantrixText(text = "Kampanya", style = PantrixTheme.typography.title)
        PantrixText(text = "Dolgusu ve içeriğinin rengi dışarıdan verildi")
    }
}

Yüklenen liste

Yüklenen bir liste: iki kenarlı kartın iskeleti. mediaHeight kartın göstereceği görselin yerini tutar, lines gövdenin satırlarının, footerButtons eylemlerin.

Tek başına duran iskelet ekran okuyucuya bir kez, kartın tamamı için duyurulur: temanın "yükleniyor" sözüyle. Zaten yüklendiğini söyleyen bir şeyin içinde bu söz kapatılır: burada yüklendiğini liste bir kez söyler, iskeletlere contentDescription = null verildi.

val loading = PantrixTheme.strings.loading
Column(
    modifier = Modifier.widthIn(max = 360.dp).semantics { contentDescription = loading },
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
) {
    repeat(2) {
        PantrixCardSkeleton(
            modifier = Modifier.fillMaxWidth(),
            variant = CardVariant.Outlined,
            lines = 2,
            footerButtons = 1,
            mediaHeight = 96.dp,
            contentDescription = null
        )
    }
}

API

modifier

İçeriği henüz gelmemiş bir PantrixCard: kartın kendi yüzeyi, başlığının, gövdesinin ve eylemlerinin geleceği yerde çubuklarla.

CardStyle

PantrixCard'ın geometrisi: köşeleri ve yükseltilmiş varyantının gölgesi.

CardColors

Varyantının renklerini almayan bir PantrixCard'ın boyandığı renkler: verilen renk kullanılır, verilmeyen varyantınki kalır.