Tag

Bir verinin üstündeki kısa bir etiket: bir durum, bir kategori, bir sürüm.

import com.pantrixui.components.data.tag.PantrixTag

Altı ton. tone etiketi temanın bir rolüyle çizer: Primary, Info, Success, Warning, Danger ve varsayılan Neutral. Marka rengi değişince bütün etiketler onunla değişir.
Üç biçim. Soft rolün soluk dolgusudur ve varsayılandır; Solid rolün dolu rengidir, bir satırın asıl durumu için; Outline dolgusuzdur, kenarı ve yazısı rolün dolu rengindedir. Tema o rengi iki modunda da zeminlerinde okunacak biçimde seçer.
İkon ve nokta. icon yazının önünde, yazının renginde durur. dot yazının önüne rolün dolu renginde küçük bir daire koyar: bir satırın içinde bulunduğu durum. İkon verildiyse nokta çizilmez.
Sözler, renk değil. Anlamı yazı taşır: kırmızı bir "Gecikmiş", kırmızıyı göremeyen birine de aynı şeyi söyler. Ekran okuyucu etiketi tek bir şey olarak, sözleriyle duyar; contentDescription onların yerine geçer.
Basılmaz. Etiket odak almaz, dokunma hedefi yoktur ve her platformda bir chip'ten alçaktır: bir satırın içinde satırı ele geçirmeden durur.
Yazı. Sözler tek satırdır, textStyle verilmedikçe temanın footnote stiliyle yazılır ve yer bittiği yerde "…" ile kesilir. Yazı büyüyünce etiket de uzar; rengi her zaman etiketinkidir.
Dolgunun üstünde. Soft ve Solid kendi zeminlerini getirir, her yerde rolün renkleriyle çizilir. Temanın zemini olmayan bir dolgunun üstünde Outline'ın kenarı ve yazısı orada yazılan renktedir.
Kendi renkleri. colors tonun renklerinin yerine geçer: verilen kullanılır, verilmeyen tonun kalır. Bir rolün dolgusu verilince temanın onunla eşlediği renk de gelir.
Platform. Android'de 24dp, iOS'ta, masaüstünde ve web'de 22 yüksekliğindedir. iOS'ta uçları yuvarlaktır, iOS'un kendi etiketleri gibi; öteki platformlarda köşeleri az yuvarlaktır ve onu chip'ten ayırır.

Örnekler

Tonlar ve biçimler

Her satırda bir biçim, her biçimde altı ton: Soft, Solid ve Outline. Her etiketin sözü, tonun ne anlattığını söyler; renk onu yalnızca destekler.

Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)) {
    TagVariant.entries.forEach { variant ->
        FlowRow(
            horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
            verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
        ) {
            TONE_WORDS.forEach { (tone, words) ->
                PantrixTag(text = words, tone = tone, variant = variant, tagKey = "${variant.name}_${tone.name}")
            }
        }
    }
}

private val TONE_WORDS = listOf(
    TagTone.Primary to "Öne çıkan",
    TagTone.Info to "Bilgi",
    TagTone.Success to "Ödendi",
    TagTone.Warning to "Süresi doluyor",
    TagTone.Danger to "Gecikmiş",
    TagTone.Neutral to "Taslak"
)

İkon ve nokta

İkon yazının önünde, yazının renginde durur ve ekran okuyucuya bir şey söylemez. Nokta rolün dolu rengindedir ve bir durumu söyler: çevrimiçi, kesinti, çevrimdışı. İkisi birden verildiğinde ikon çizilir.

Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)) {
    FlowRow(
        horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
    ) {
        PantrixTag(text = "Doğrulandı", tone = TagTone.Success, icon = PantrixIcons.Check)
        PantrixTag(text = "Beta", tone = TagTone.Info, icon = PantrixIcons.Info)
        PantrixTag(text = "Az stok", tone = TagTone.Warning, icon = PantrixIcons.Warning)
        PantrixTag(text = "Öne çıkan", tone = TagTone.Primary, variant = TagVariant.Solid, icon = PantrixIcons.Star)
    }
    FlowRow(
        horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
    ) {
        PantrixTag(text = "Çevrimiçi", tone = TagTone.Success, dot = true, tagKey = "online")
        PantrixTag(text = "Kesinti", tone = TagTone.Danger, variant = TagVariant.Solid, dot = true)
        PantrixTag(text = "Çevrimdışı", dot = true)
        PantrixTag(text = "Aktif", tone = TagTone.Success, variant = TagVariant.Outline, dot = true)
    }
}

Bir satırın durumu

Etiketin asıl yeri bir satırın sonu: faturanın durumu. Satır etiket kadar alçalmaz; etiket satırın içinde, satırı ele geçirmeden durur ve ona basılmaz. Satıra basmak bir şey yapacaksa onu satır yapar.

Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)) {
    INVOICES.forEach { invoice ->
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
            verticalAlignment = Alignment.CenterVertically
        ) {
            PantrixText(text = invoice.number, modifier = Modifier.weight(1f), maxLines = 1)
            PantrixText(text = invoice.amount, color = PantrixTheme.colors.textSecondary, maxLines = 1)
            PantrixTag(
                text = invoice.state.words,
                tone = invoice.state.tone,
                dot = true,
                tagKey = "state_${invoice.key}"
            )
        }
    }
}

private val INVOICES = listOf(
    Invoice("1042", "Fatura #1042", "1 240 ₺", InvoiceState.Paid),
    Invoice("1043", "Fatura #1043", "860 ₺", InvoiceState.Due),
    Invoice("1044", "Fatura #1044", "3 125 ₺", InvoiceState.Overdue),
    Invoice("1045", "Fatura #1045", "410 ₺", InvoiceState.Draft)
)

private enum class InvoiceState(val words: String, val tone: TagTone) {
    Paid("Ödendi", TagTone.Success),
    Due("Vadesi yakın", TagTone.Warning),
    Overdue("Gecikmiş", TagTone.Danger),
    Draft("Taslak", TagTone.Neutral)
}

private class Invoice(val key: String, val number: String, val amount: String, val state: InvoiceState)

Bir başlığın yanında

Bir yazının konuları, başlığının yanında: dolgusuz etiketler, renkli bir sayfada göze batmaz. Sığmayan etiketler alt satıra geçer; bunu FlowRow yapar, etiket değil. En alttaki etiketin yeri dardır ve sözü "…" ile kesilir.

Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)) {
    FlowRow(
        horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
        itemVerticalAlignment = Alignment.CenterVertically
    ) {
        PantrixText(text = "Compose Multiplatform'da tema", style = PantrixTheme.typography.title)
        TOPICS.forEach { topic -> PantrixTag(text = topic, variant = TagVariant.Outline) }
    }
    PantrixTag(
        text = "Onay bekleyen üç değişiklik var",
        modifier = Modifier.widthIn(max = NARROW_WIDTH.dp),
        tone = TagTone.Warning,
        tagKey = "narrow"
    )
}

private val TOPICS = listOf("Kotlin", "Tasarım", "Erişilebilirlik")

private const val NARROW_WIDTH = 160

Bir dolgunun üstünde

Temanın zemini olmayan bir dolgunun üstünde, burada birincil rolün dolu renginde: Soft ve Solid kendi zeminlerini getirir, rolün renkleriyle çizilir. Dolgusuz Outline ise orada yazılan renkte, burada beyazdır: rolün kendi rengi o dolgunun üstünde okunmayabilir.

PantrixSurface(color = PantrixTheme.colors.primary.color) {
    FlowRow(
        modifier = Modifier.padding(PantrixTheme.spacing.md),
        horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
    ) {
        PantrixTag(text = "Yeni", tone = TagTone.Success)
        PantrixTag(text = "Sınırlı", tone = TagTone.Warning, variant = TagVariant.Solid)
        PantrixTag(text = "Sürüm 2.4", variant = TagVariant.Outline, tagKey = "outline_on_fill")
        PantrixTag(text = "Canlı", variant = TagVariant.Outline, dot = true)
    }
}

Kendi renkleri ve kendi açıklaması

colors, temanın hiçbir rolünde olmayan bir renk verir: burada uygulamanın kendi moru. Verilmeyen renkler tonun kalır. Son etiketin contentDescription'ı vardır: ekran okuyucu "Gecikmiş" yerine "Ödeme durumu: gecikmiş" der.

val own = ownColors()
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    PantrixTag(
        text = "Kampanya",
        colors = TagColors(container = own.container, content = own.onContainer, dot = own.color),
        dot = true,
        tagKey = "own"
    )
    PantrixTag(
        text = "Kampanya",
        variant = TagVariant.Outline,
        colors = TagColors(content = own.onContainer, border = own.color)
    )
    PantrixTag(
        text = "Gecikmiş",
        tone = TagTone.Danger,
        contentDescription = "Ödeme durumu: gecikmiş",
        tagKey = "described"
    )
}

Kendi stiliyle

Kendi stiliyle: TagStyle etiketin yüksekliğini, iç boşluğunu, köşesini ve noktasını verir. Burada etiketler hap biçiminde, 32dp yüksekliğinde ve 10dp'lik noktalıdır; verilmeyen her alan platformun ön ayarıdır. Sözlerin yazısını textStyle verir: burada temanın label'ı, kalın.

val style = TagStyle(shape = ShapeRole.Full, height = 32.dp, horizontalPadding = 14.dp, dotSize = 10.dp)
val words = PantrixTheme.typography.label.copy(fontWeight = FontWeight.Bold)
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    PantrixTag(
        text = "Çevrimiçi",
        tone = TagTone.Success,
        dot = true,
        style = style,
        tagKey = "online_pill",
        textStyle = words
    )
    PantrixTag(
        text = "Bakımda",
        tone = TagTone.Warning,
        dot = true,
        style = style,
        tagKey = "maintenance_pill",
        textStyle = words
    )
}

API

text

Bir verinin üstündeki kısa bir etiket: bir durum, bir kategori, bir sürüm.

Parametre	Tür	Varsayılan	Ne olduğu
`text`	`String`		etiketin söylediği: bir iki söz.
`modifier`	`Modifier`	`Modifier`	etiketin modifier'ı.
`tone`	`TagTone`	`TagTone.Neutral`	etiketin çizildiği renk rolü.
`variant`	`TagVariant`	`TagVariant.Soft`	etiketin rolün ne kadarını giydiği.
`icon`	`ImageVector?`	`null`	sözlerin önüne, onların renginde çizilir. Ekran okuyucuya bir şey söylemez.
`dot`	`Boolean`	`false`	`icon` olmadığında sözlerin önünde rolün dolu renginde küçük bir daire durup durmadığı: bir satırın içinde bulunduğu durum.
`contentDescription`	`String?`	`null`	ekran okuyucunun etiket için sözlerinin yerine söylediği, ya da sözler için null.
`style`	`TagStyle?`	`null`	bu çağrının kendi stili: çevreleyen her stilin üstünde, yoğunluğun altında. Yalnızca verdiği alanlar değişir, her platformda.
`colors`	`TagColors?`	`null`	bu etiketin tonununkilerin yerine kendi renkleri: verdikleri, geri kalanlar için tonunkiler.
`tagKey`	`String?`	`null`	etiketin otomasyon anahtarı: etiket `Tag_<tagKey>` olur, ve yalnızca bir anahtar verildiğinde test etiketi alır.
`textStyle`	`TextStyle`	`PantrixTheme.typography.footnote`	sözlerin yazı stili: verilmezse temanın `footnote` stili. Renklerini etiket verir.

TagStyle

PantrixTag'in geometrisi: bir satırın içinde, onu ele geçirmeden duracak kadar küçük bir etiket.

Parametre	Tür	Varsayılan	Ne olduğu
`shape`	`ShapeSpec`	`ShapeSpec.Unspecified`	Etiketin köşeleri: markanın şekil ölçeğinden bir adım, ya da sabit bir şekil.
`height`	`Dp`	`Dp.Unspecified`	Bir etiketin en az yüksekliği. Daha büyük bir yazı onu uzatır.
`horizontalPadding`	`Dp`	`Dp.Unspecified`	Etiketin kenarlarıyla içindekiler arasındaki boşluk.
`iconPadding`	`Dp`	`Dp.Unspecified`	İkon ya da nokta ile sözler arasında.
`iconSize`	`Dp`	`Dp.Unspecified`	İkonun genişliği ve yüksekliği.
`borderWidth`	`Dp`	`Dp.Unspecified`	`TagVariant.Outline`'ın kenarının ve `TagColors`'ta verilen bir kenarın genişliği.
`dotSize`	`Dp`	`Dp.Unspecified`	Noktanın genişliği ve yüksekliği.

TagColors

Bir PantrixTag'in tonunun renkleri yerine boyandığı renkler: verilen bir renk kullanılır, bırakılan tonunki kalır.

Parametre	Tür	Varsayılan	Ne olduğu
`container`	`Color`	`Color.Unspecified`	Etiketin dolgusu. `TagVariant.Soft`'ta rolün `container`'ı, `TagVariant.Solid`'de `color`'ı, `TagVariant.Outline`'da yok.
`content`	`Color`	`Color.Unspecified`	Sözler ve ikon: `container`'ın üstünde okunan renk. `TagVariant.Soft`'ta rolün `onContainer`'ı, `TagVariant.Solid`'de `onColor`'ı, `TagVariant.Outline`'da temanın zeminlerinde okunan `color`'ı. Temanın zemini olmayan bir dolgunun üstündeki çerçeveli etiket orada yazılan renkte yazılır.
`border`	`Color`	`Color.Unspecified`	Etiketin kenarı: `TagVariant.Outline`'ınki, `content` renginde. Başka bir biçimdeki etiketin kenarı, burada verildiyse olur.
`dot`	`Color`	`Color.Unspecified`	Nokta: rolün `color`'ı, rolün dolu rengi üstünde ise onun `onColor`'ı. Temanın zemini olmayan bir dolgunun üstünde çerçeveli etiketin noktası `content` renginde.