Link

onClick'i çalıştıran, tek başına duran bir bağlantı: text primary renginde ve altı çizili yazılır, çevresinde platformun en küçük dokunma hedefi vardır. Tıklama temanın analitiğine bir Link click olayı olarak bildirilir. enabled değilken hiçbir şey yapmaz. Alt çizgisi devre dışı yazı renginde kalır ki yine bir bağlantı olarak okunsun.

import com.pantrixui.components.elements.link.PantrixLink

İki biçim. onClick alan bağlantı bir işi çalıştırır. url alan, adresi platformun UriHandler'ıyla açar: tarayıcıda ya da o adresi karşılayan uygulamada.
Altı çizili. Bağlantı yalnızca rengiyle ayrılmaz: iki rengi ayırt edemeyen biri onu altındaki çizgiden tanır. Bir cümlenin içinde durmayan, yerinden tanınan bağlantı underline = LinkUnderline.OnHover alır: altı işaretçi üstündeyken ve odaktayken, dokunarak kullanılan platformda her zaman çizilir.
Kendi rengi. color yazıyı, alt çizgiyi ve işaretçi üstündeyken ya da basılıyken altında beliren tonu belirler. Verilmezse temanın primary rengidir, bir dolgunun üstünde de: orada okunan rengi çağıran verir.
Yazı stili. style verilmezse temanın label stilidir, stil verilmemiş bir PantrixText'in stili: bir metnin yanındaki bağlantı o metinle aynı boydadır.
Devre dışı. enabled = false bağlantıyı temanın devre dışı yazı renginde çizer ve bağlantı basış almaz. Alt çizgisi kalır: izlenemeyen bir bağlantı olarak okunur, düz bir yazı olarak değil.
Analitik. Her tıklama temanın analytics'ine Link bileşeninin click olayı olarak bildirilir. Olay bağlantının bir adres açıp açmadığını söyler, adresin kendisini hiçbir zaman.
Otomasyon. tagKey test etiketini kurar: tagKey = "forgot_password" verilen bağlantının etiketi Link_forgot_password'dır.

Örnekler

Bir işi çalıştıran bağlantı

En yalın hâli: bir yazı ve basılınca çalışan onClick. Bağlantı temanın primary renginde ve altı çizili yazılır. "Şifremi unuttum"a bas: uygulamanın snackbar'ı haber verir.

tagKey verildi: bu bağlantı otomasyonda Link_forgot_password etiketiyle bulunur.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
PantrixLink(
    text = "Şifremi unuttum",
    onClick = { scope.launch { snackbars?.show(message = "Sıfırlama bağlantısı gönderildi") } },
    tagKey = "forgot_password"
)

Bir adresi açan bağlantı

İkinci biçim onClick yerine url alır. Basılınca adres platformun UriHandler'ıyla açılır: tarayıcıda ya da o adresi karşılayan uygulamada. Görünüşü ve öteki parametreleri ilk biçimle aynıdır.

PantrixLink(text = "Gizlilik politikası", url = "https://example.com/privacy", tagKey = "privacy_policy")

Kendi renginde

color bağlantının kendi rengidir: yazısını, alt çizgisini ve işaretçi üstüne gelince ya da basınca altında beliren tonu belirler. İlk bağlantının rengi temanın hiçbir rolünde olmayan, uygulamanın kendi moru; ikincisininki temanın danger rolü.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val own = ownColors()
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xl)) {
    PantrixLink(
        text = "Kampanya koşulları",
        onClick = { scope.launch { snackbars?.show(message = "Kampanya koşulları açıldı") } },
        color = own.color,
        tagKey = "campaign_terms"
    )
    PantrixLink(
        text = "Hesabımı sil",
        onClick = {},
        color = PantrixTheme.colors.danger.color,
        tagKey = "delete_account"
    )
}

Bir dolgunun üstünde

Bağlantı çevresindeki içerik rengine bakmaz: renk verilmezse bir dolgunun üstünde de temanın primary rengindedir. Dolgu primary'nin kendisi olduğunda o renk okunmaz; orada okunan rengi color ile çağıran verir, burada rolün onColor'ını.

Yanındaki PantrixText'e renk verilmedi: dolgunun içerik rengini kendiliğinden alır.

val primary = PantrixTheme.colors.primary
PantrixSurface(modifier = Modifier.fillMaxWidth(), color = primary.color) {
    Row(
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.lg),
        horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
        verticalAlignment = Alignment.CenterVertically
    ) {
        PantrixText(text = "Yeni sürüm hazır.")
        PantrixLink(text = "Daha fazla bilgi", onClick = {}, color = primary.onColor, tagKey = "learn_more")
    }
}

Bir metnin yanında ve yazı stili

style verilmeyen bağlantı temanın label stilindedir, stil verilmemiş bir PantrixText gibi: üst satırda ikisi yan yana, aynı boyda durur.

Alttaki bağlantıya style = PantrixTheme.typography.footnote verildi: bir formun altındaki küçük bağlantı. Yazı küçülse de bağlantının yüksekliği platformun dokunma hedefinden az olmaz; genişliği yazısı kadardır ve üstündeki satırla aynı hizada başlar.

Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xs),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixText(text = "Hesabın yok mu?")
    PantrixLink(text = "Kayıt ol", onClick = {}, tagKey = "sign_up")
}
PantrixLink(
    text = "Kullanım koşulları",
    onClick = {},
    style = PantrixTheme.typography.footnote,
    tagKey = "terms_of_use"
)

Bir satırdaki bağlantılar

Bir cümlenin içinde durmayan bağlantılar: bir sayfanın altındaki satır. Yerleri onları zaten bağlantı diye söyler; underline = LinkUnderline.OnHover ile altları yalnızca işaretçi üstündeyken ve klavye odağındayken çizilir.

Dokunarak kullanılan platformda ikisi de olmaz: Android'de ve iOS'ta bu bağlantıların da altı her zaman çizilidir. Bir cümlenin içindeki bağlantı ise varsayılanda, LinkUnderline.Always'te kalır: rengi tek başına onu ayırt edemeyene ulaşmaz.

Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)) {
    PantrixLink(text = "Gizlilik", onClick = {}, underline = LinkUnderline.OnHover, tagKey = "privacy")
    PantrixLink(text = "Koşullar", onClick = {}, underline = LinkUnderline.OnHover, tagKey = "terms")
    PantrixLink(text = "İletişim", onClick = {}, underline = LinkUnderline.OnHover, tagKey = "contact")
}

Dokunma hedefi

Bağlantının kapladığı alan burada boyandı. Yüksekliği en az platformun dokunma hedefi kadardır: Android'de 48dp, iOS'ta 44dp, fareyle kullanılan masaüstünde ve web'de 32dp. Genişliği yazısı kadardır.

İkinci bağlantı caption stilinde: yazı küçülür, alanın yüksekliği aynı kalır. Kısa bir bağlantının hemen yanına dokunmak da ona ulaşır.

val area = PantrixTheme.colors.neutral.container
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xl)) {
    PantrixLink(text = "Yardım", onClick = {}, modifier = Modifier.background(area), tagKey = "help_body")
    PantrixLink(
        text = "Yardım",
        onClick = {},
        modifier = Modifier.background(area),
        style = PantrixTheme.typography.caption,
        tagKey = "help_caption"
    )
}

Devre dışı

enabled = false bağlantıyı temanın devre dışı yazı renginde çizer ve bağlantı basış almaz. Alt çizgisi kalır: çizgisiz kalsaydı düz bir yazı gibi okunurdu. "Kodu yeniden gönder"e bas: bağlantı beş saniye devre dışı kalır.

İkinci bağlantıya color da verildi. Devre dışı bir bağlantı, ne verilirse verilsin, temanın devre dışı rengindedir.

var waiting by remember { mutableStateOf(false) }
LaunchedEffect(waiting) {
    if (waiting) {
        delay(5_000)
        waiting = false
    }
}
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xl)) {
    PantrixLink(
        text = "Kodu yeniden gönder",
        onClick = { waiting = true },
        enabled = !waiting,
        tagKey = "resend_code"
    )
    PantrixLink(
        text = "Yakında",
        onClick = {},
        color = ownColors().color,
        enabled = false,
        tagKey = "coming_soon"
    )
}

Tıklamanın bildirimi

Her tıklama temanın analytics'ine bir olay olarak bildirilir: bileşeni Link, eylemi click. Olayın external değeri bağlantının bir işi mi çalıştırdığını (false), bir adresi mi açtığını (true) söyler; adresin kendisi olayda yoktur.

Buradaki iki bağlantı, yalnızca analytics verilen bir temanın içinde: gelen son olay altlarında yazar. Birine bas.

var lastEvent by remember { mutableStateOf("Henüz bir olay gelmedi") }
val analytics = remember {
    PantrixAnalytics { event ->
        val external = event.props["external"]
        lastEvent = "${event.component} · ${event.action} · ${event.testTag} · external=$external"
    }
}
PantrixTheme(analytics = analytics) {
    Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xl)) {
        PantrixLink(text = "Yardım", onClick = {}, tagKey = "help")
        PantrixLink(text = "Destek sayfası", url = "https://example.com/support", tagKey = "support")
    }
}
PantrixText(text = lastEvent, color = PantrixTheme.colors.textSecondary, tagKey = "link_event")

API

text

Parametre	Tür	Varsayılan	Ne olduğu
`text`	`String`
`onClick`	`() -> Unit`
`modifier`	`Modifier`	`Modifier`	bağlantının modifier'ı.
`style`	`TextStyle`	`LocalPantrixTextStyle.current`
`color`	`Color`	`Color.Unspecified`
`enabled`	`Boolean`	`true`
`tagKey`	`String?`	`null`	bağlantının otomasyon anahtarı: bağlantı `Link_<tagKey>`'dır, anahtar yoksa çağrıldığı yerden bir anahtar alır. Görünen metin hiçbir zaman anahtar olmaz.
`underline`	`LinkUnderline`	`LinkUnderline.Always`	Bağlantının altının ne zaman çizildiği: söylenmezse her zaman; `OnHover` bir cümlenin içinde durmayan bağlantı içindir: altı işaretçinin altında ve klavye odağındayken, dokunarak kullanılan platformda her zaman çizilir.

text

url'i platformun UriHandler'ıyla açan, tek başına duran bir bağlantı: adres tarayıcıda ya da o adresi karşılayan uygulamada açılır.

Parametre	Tür	Varsayılan	Ne olduğu
`text`	`String`		bağlantının söylediği.
`url`	`String`
`modifier`	`Modifier`	`Modifier`	bağlantının modifier'ı.
`style`	`TextStyle`	`LocalPantrixTextStyle.current`	bağlantının yazı tipi: verilmezse `LocalPantrixTextStyle`; böylece bir metnin yanındaki bağlantı o metin kadar büyük olur.
`color`	`Color`	`Color.Unspecified`	bağlantının, temanın `primary`'si olmadığı yerde kendi rengi.
`enabled`	`Boolean`	`true`	bağlantıya basılıp basılamayacağı: basılamayan bağlantı altı çizili kalır, devre dışı yazı renginde.
`tagKey`	`String?`	`null`	bağlantının otomasyon anahtarı: bağlantı `Link_<tagKey>`'dır, anahtar yoksa çağrıldığı yerden bir anahtar alır. Görünen metin hiçbir zaman anahtar olmaz.
`underline`	`LinkUnderline`	`LinkUnderline.Always`	Bağlantının altının ne zaman çizildiği, öteki `PantrixLink`'teki gibi.

Erişilebilirlik

Dokunma hedefi. Yüksekliği platformun en küçük dokunma hedefinden az olmaz: Android'de 48dp, iOS'ta 44dp, fareyle kullanılan masaüstünde ve web'de 32dp. Genişliği yazısı kadardır ve üstündeki metinle aynı hizada başlar.
Fare ve klavye. İşaretçi üstündeyken ve basılıyken yazının altında bağlantının renginde soluk bir ton belirir. Bağlantı klavye odağını da alır: odaktayken o ton odak halkasının rengindedir.