Text

Temanın yazı ölçeğinde bir metin. style verilmezse temel yazıdır, LocalPantrixTextStyle: label stili ya da ekranın çevresindeki bölümünün verdiği. role ekran okuyucuya metnin ne olduğunu söyler: bir başlık, bir etiket ya da süs. selectable ile kullanıcı metni seçer ve kopyalar.

import com.pantrixui.components.elements.text.PantrixText

Yazı ölçeği. style temanın dokuz stilinden birini alır: büyükten küçüğe display'den caption'a sekiz stil, ve eş aralıklı code. Stil verilmeyen metin label stilinde yazılır.
Rol. role metnin ne olduğunu söyler: düz yazı (Paragraph, varsayılan), başlık (Heading), etiket (Label) ya da süs (Decorative). Başlık gibi yazılmış ama başlık olarak işaretlenmemiş bir metne, ekran okuyucuyla başlıktan başlığa gezen kullanıcı uğramaz.
Renk. Sırayla: color, stilin kendi rengi, metnin durduğu yerin içerik rengi, temanın textPrimary'si. Sayfada, bir yüzeyde ve bir kartta metin textPrimary ile yazılır; bir dolgunun üstünde, orada okunan rengi kendiliğinden alır.
Satırlar ve taşma. maxLines metnin en çok, minLines en az kaç satır tutacağını söyler. Sığmayan kısım overflow'un dediği gibi kesilir: varsayılanı üç noktadır.
Hizalama. textAlign satırları metnin kendi genişliği içinde hizalar.
Seçilebilir metin. selectable ile kullanıcı metni seçer ve kopyalar.
Biçimli metin. AnnotatedString alan ikinci bir PantrixText vardır: bir cümlenin içinde kalın, renkli ya da başka boyda parçalar, bağlantılar, ve inlineContent ile satırın içine yerleşen bir ikon.
Otomasyon. tagKey verilen metin Text_<tagKey> etiketini taşır. Anahtar verilmeyen metin etiketlenmez.

Örnekler

Stil verilmeyen metin

En az yazılan hâli: yalnızca metin. Stil verilmediği için temanın label stilinde, renk verilmediği için temanın textPrimary rengiyle yazılır. İkinci satır aynı metnin label stili açıkça verilmiş hâlidir: ikisi aynıdır.

label bir kontrolün etiketinin stilidir. Bir paragrafa body, bir başlığa title ya da headline stilini sen verirsin: üçüncü satır body ile yazıldı.

PantrixText(text = "Siparişin yola çıktı", tagKey = "no_style")
PantrixText(text = "Siparişin yola çıktı", style = PantrixTheme.typography.label)
PantrixText(text = "Siparişin yola çıktı", style = PantrixTheme.typography.body)

Yazı ölçeği

Temanın dokuz stili, büyükten küçüğe: her satır kendi stiliyle yazıldı ve o stilin ne için olduğunu söylüyor. Bir stil yazının boyutunu, satır yüksekliğini, ağırlığını ve harf aralığını birlikte taşır.

code eş aralıklı bir yazıyla yazılır. Stillerin ölçüleri "Tipografi" sayfasında, temadan okunarak yazar.

val typography = PantrixTheme.typography
PantrixText(text = "display: sayfanın başlığı", style = typography.display)
PantrixText(text = "headline: bölüm başlığı", style = typography.headline)
PantrixText(text = "title: kartın, panelin, dialog'un başlığı", style = typography.title)
PantrixText(text = "callout: öne çıkan gövde metni, boş bir ekranın açıklaması", style = typography.callout)
PantrixText(text = "body: gövde metni, bir paragraf, bir açıklama", style = typography.body)
PantrixText(text = "label: bir kontrolün etiketi, stil verilmeyen metin", style = typography.label)
PantrixText(text = "footnote: yardımcı metin, bir alanın altındaki açıklama", style = typography.footnote)
PantrixText(text = "caption: küçük bilgi, bir saat, bir sayaç", style = typography.caption)
PantrixText(text = "code: order_id = 8F2A-19C4", style = typography.code)

Roller

role metnin ne olduğunu söyler; nasıl göründüğünü style söyler. TextRole.Heading metni ekran okuyucuya başlık olarak bildirir: okuyucuyla başlıktan başlığa gezen kullanıcı ona uğrar. level başlığın derinliğidir: 1 sayfanın başlığı, 2 bölümleri. Büyük ve kalın yazılmış ama rolü verilmemiş bir metin okuyucu için düz yazıdır.

Paragraph ve Label oldukları gibi okunur. Decorative metin okuyucudan gizlenir ve sözleri hiç okunmaz: başka bir şeyin zaten söylediğini yineleyen metin içindir. Burada büyük "%72", altındaki cümlenin resmidir; okuyucu yalnızca cümleyi okur.

val typography = PantrixTheme.typography
PantrixText(
    text = "Hesap",
    style = typography.headline,
    role = TextRole.Heading(level = 1),
    tagKey = "heading_account"
)
PantrixText(
    text = "Depolama",
    style = typography.title,
    role = TextRole.Heading(level = 2),
    tagKey = "heading_storage"
)
PantrixText(text = "%72", style = typography.display, role = TextRole.Decorative, tagKey = "share")
PantrixText(text = "Depolama alanının yüzde 72'si dolu.", style = typography.body)
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixText(text = "Plan", role = TextRole.Label)
    PantrixText(text = "Aylık, 50 GB", color = PantrixTheme.colors.textSecondary)
}

Renk ve durduğu yerin rengi

Renk verilmeyen metin sayfada temanın textPrimary rengiyle yazılır. color onu değiştirir: ikincil bir bilgiye textSecondary, bir hataya danger rolünün rengi.

Bir dolgunun üstünde renk yine verilmez. PantrixSurface bir rolün rengiyle doldurulunca içindeki metin, o dolgunun üstünde okunan rengi kendiliğinden alır: ilk kutuda primary.onColor, ikincisinde success.onContainer. Temanın kendi yüzeyi bir dolgu değil, bir zemindir: üçüncü kutudaki metin yine textPrimary ile yazılır.

val colors = PantrixTheme.colors
val inside = Modifier.padding(PantrixTheme.spacing.md)
PantrixText(text = "Renk verilmedi")
PantrixText(text = "Son güncelleme: 2 dakika önce", color = colors.textSecondary)
PantrixText(text = "Kart numarası geçersiz", color = colors.danger.color, tagKey = "error")
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    PantrixSurface(color = colors.primary.color) {
        PantrixText(text = "primary dolgusunda", modifier = inside)
    }
    PantrixSurface(color = colors.success.container) {
        PantrixText(text = "success.container dolgusunda", modifier = inside)
    }
    PantrixSurface(border = colors.divider) {
        PantrixText(text = "Temanın yüzeyinde", modifier = inside)
    }
}

En çok satır ve taşma

Aynı paragraf üç kez, en fazla 320dp genişliğinde bir sütunda. İlki istediği kadar satır tutar. İkincisi maxLines = 2 ile iki satırda kalır ve sığmayan kısmı üç noktayla biter: overflow'un varsayılanı TextOverflow.Ellipsis'tir. Üçüncüsü tek satırdır ve TextOverflow.Clip ile, üç nokta konmadan kesilir.

val paragraph = "Siparişin kargoya verildi. Teslimat adresine yarın 09:00 ile 18:00 arasında ulaşacak; kurye " +
    "kapıya gelmeden önce seni arayacak."
Column(
    modifier = Modifier.widthIn(max = 320.dp),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
) {
    PantrixText(text = paragraph, style = PantrixTheme.typography.body)
    PantrixText(text = paragraph, style = PantrixTheme.typography.body, maxLines = 2, tagKey = "two_lines")
    PantrixText(
        text = paragraph,
        style = PantrixTheme.typography.body,
        maxLines = 1,
        overflow = TextOverflow.Clip,
        tagKey = "clipped"
    )
}

En az satır

minLines kısa bir metne de o kadar satırlık yer tutturur. Yan yana duran iki kutunun başlıkları minLines = 2 ve maxLines = 2 ile yazıldı: biri tek satıra sığar, öteki iki satırdan uzundur, ama ikisi de iki satır yer tutar. Böylece altlarındaki fiyatlar aynı hizada durur ve kutular aynı boydadır.

val colors = PantrixTheme.colors
val spacing = PantrixTheme.spacing
Row(
    modifier = Modifier.widthIn(max = 420.dp),
    horizontalArrangement = Arrangement.spacedBy(spacing.md)
) {
    PantrixSurface(modifier = Modifier.weight(1f), border = colors.divider) {
        Column(modifier = Modifier.padding(spacing.md), verticalArrangement = Arrangement.spacedBy(spacing.xs)) {
            PantrixText(text = "Çay", style = PantrixTheme.typography.callout, maxLines = 2, minLines = 2)
            PantrixText(text = "45,00 TL", color = colors.textSecondary)
        }
    }
    PantrixSurface(modifier = Modifier.weight(1f), border = colors.divider) {
        Column(modifier = Modifier.padding(spacing.md), verticalArrangement = Arrangement.spacedBy(spacing.xs)) {
            PantrixText(
                text = "Soğuk demlenmiş, tarçınlı ve portakallı filtre kahve",
                style = PantrixTheme.typography.callout,
                maxLines = 2,
                minLines = 2
            )
            PantrixText(text = "120,00 TL", color = colors.textSecondary)
        }
    }
}

Hizalama

textAlign satırları metnin kendi genişliği içinde hizalar. Bu yüzden metinlere fillMaxWidth() verildi: yalnızca sözleri kadar geniş bir metnin içinde hizalanacak yer yoktur.

PantrixText(text = "Başa hizalı", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Start)
PantrixText(text = "Ortalanmış", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center)
PantrixText(text = "Sona hizalı", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.End)

Seçilebilir metin

selectable = true ile kullanıcı metni seçer ve kopyalar. Başka bir yere taşınacak metin içindir: bir sipariş numarası, bir IBAN, bir hata kodu. Ekran okuyucu onu öteki metinler gibi okur.

İkinci satırdaki numarayı seçmeyi dene; üstündeki etiket seçilemez.

PantrixText(text = "Sipariş numarası", style = PantrixTheme.typography.footnote, role = TextRole.Label)
PantrixText(
    text = "PX-2026-0001-8F2A-19C4",
    style = PantrixTheme.typography.code,
    selectable = true,
    tagKey = "order_number"
)

Biçimli metin

AnnotatedString alan PantrixText: tek bir metnin içinde ayrı biçimde parçalar. Stili, rengi, satırları ve rolü düz metindekiyle aynıdır.

İlk satırda tutarın kuruşu 0.6.em ile yazıldı: em, çevresindeki yazının boyutunun payıdır. İkinci satırda bir parça kalın, bir parça danger rolünün renginde. Üçüncü satırda bir bağlantı var; altı çizilidir, çünkü cümlesinden yalnızca renkle ayrılan bir bağlantıyı renkleri ayırt edemeyen göremez. Bağlantıya bas: uygulamanın snackbar'ı haber verir.

val colors = PantrixTheme.colors
val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val price = buildAnnotatedString {
    append("1.250")
    withStyle(SpanStyle(fontSize = 0.6.em)) { append(",00 TL") }
}
val notice = buildAnnotatedString {
    append("Ödemen ")
    withStyle(SpanStyle(fontWeight = FontWeight.Bold)) { append("28 Ekim") }
    append(" tarihinde alınacak. ")
    withStyle(SpanStyle(color = colors.danger.color)) { append("Kartının süresi dolmak üzere.") }
}
val linkStyles = TextLinkStyles(
    style = SpanStyle(color = colors.primary.color, textDecoration = TextDecoration.Underline)
)
val terms = buildAnnotatedString {
    append("Devam ederek ")
    withLink(
        LinkAnnotation.Clickable(tag = "terms", styles = linkStyles) {
            scope.launch { snackbars?.show(message = "Kullanım koşulları açıldı") }
        }
    ) {
        append("kullanım koşullarını")
    }
    append(" kabul etmiş olursun.")
}
PantrixText(text = price, style = PantrixTheme.typography.headline, tagKey = "price")
PantrixText(text = notice, style = PantrixTheme.typography.body)
PantrixText(text = terms, style = PantrixTheme.typography.body, tagKey = "terms")

Satırın içinde bir ikon

inlineContent satırın içine metin olmayan bir şey koyar. Metinde appendInlineContent ile bir yer ayrılır; inlineContent o yerin anahtarına ne çizileceğini ve ne kadar yer tutacağını söyler. Burada cümlenin ortasında bir ikon var: yazıyla aynı satırda durur.

appendInlineContent'in ikinci değeri o yerin metindeki karşılığıdır: ekran okuyucu ikonu bu sözle okur.

val hint = buildAnnotatedString {
    append("Bir ürün bulmak için ")
    appendInlineContent(id = "search", alternateText = "arama")
    append(" düğmesine bas.")
}
PantrixText(
    text = hint,
    style = PantrixTheme.typography.body,
    inlineContent = mapOf(
        "search" to InlineTextContent(
            placeholder = Placeholder(
                width = 1.25.em,
                height = 1.25.em,
                placeholderVerticalAlign = PlaceholderVerticalAlign.TextCenter
            )
        ) {
            PantrixIcon(imageVector = PantrixIcons.Search, contentDescription = null, size = 20.dp)
        }
    ),
    tagKey = "hint"
)

API

text

Parametre	Tür	Varsayılan	Ne olduğu
`text`	`String`		metin.
`modifier`	`Modifier`	`Modifier`	metnin modifier'ı.
`style`	`TextStyle`	`LocalPantrixTextStyle.current`
`color`	`Color`	`Color.Unspecified`
`textAlign`	`TextAlign?`	`null`	satırların metnin genişliği içinde nasıl hizalandığı.
`maxLines`	`Int`	`Int.MAX_VALUE`	metnin en çok kaç satır aldığı; onları aşan kısım `overflow`'un dediği gibi kesilir.
`minLines`	`Int`	`1`	metnin en az kaç satır yüksekliğinde olduğu.
`overflow`	`TextOverflow`	`TextOverflow.Ellipsis`
`softWrap`	`Boolean`	`true`	metnin, genişliğinin bittiği yerde satırlara bölünüp bölünmediği.
`role`	`TextRole`	`TextRole.Paragraph`
`selectable`	`Boolean`	`false`
`onTextLayout`	`((TextLayoutResult) -> Unit)?`	`null`	metin yerleştirilirken onunla çağrılır.
`tagKey`	`String?`	`null`	metnin otomasyon anahtarı: metin `Text_<tagKey>`'dır. Anahtar yoksa etiketi olmaz.

text

AnnotatedString alan PantrixText: metnin biçimli parçalarını ve bağlantılarını çizer, metnin adını verdiği yer tutucular için de inlineContent alır.

Parametre	Tür	Varsayılan	Ne olduğu
`text`	`AnnotatedString`		metin, aralıkları ve bağlantılarıyla.
`modifier`	`Modifier`	`Modifier`	metnin modifier'ı.
`style`	`TextStyle`	`LocalPantrixTextStyle.current`	temel metin: verilmezse `LocalPantrixTextStyle`, yani label rolü ya da ekranın çevresindeki bir parçanın sağladığı.
`color`	`Color`	`Color.Unspecified`	metnin rengi, yoksa stilin rengi, o da yoksa temanın `textPrimary`'si; bir dolgunun üstünde, oraya yazılan renk.
`textAlign`	`TextAlign?`	`null`	satırların metnin genişliği içinde nasıl hizalandığı.
`maxLines`	`Int`	`Int.MAX_VALUE`	metnin en çok kaç satır aldığı; onları aşan kısım `overflow`'un dediği gibi kesilir.
`minLines`	`Int`	`1`	metnin en az kaç satır yüksekliğinde olduğu.
`overflow`	`TextOverflow`	`TextOverflow.Ellipsis`	`maxLines`'tan uzun bir metnin nasıl kesildiği: başka bir şey söylenmedikçe üç noktayla.
`softWrap`	`Boolean`	`true`	metnin, genişliğinin bittiği yerde satırlara bölünüp bölünmediği.
`role`	`TextRole`	`TextRole.Paragraph`	metnin ekran okuyucu için ne olduğu: düz yazı, bir başlık, bir etiket ya da süs.
`selectable`	`Boolean`	`false`	kullanıcının metni seçip kopyalayıp kopyalayamayacağı.
`inlineContent`	`Map<String, InlineTextContent>`	`emptyMap()`
`onTextLayout`	`((TextLayoutResult) -> Unit)?`	`null`	metin yerleştirilirken onunla çağrılır.
`tagKey`	`String?`	`null`	metnin otomasyon anahtarı: metin `Text_<tagKey>`'dır. Anahtar yoksa etiketi olmaz.