Divider

İçeriği ayıran bir çizgi: orientation'a göre bir PantrixHorizontalDivider ya da bir PantrixVerticalDivider.

import com.pantrixui.components.elements.divider.PantrixDivider

Yatay ve dikey. Yatay çizgi bulunduğu yerin genişliğini, dikey çizgi yüksekliğini kaplar.
Etiket. label yatay çizginin üstüne bir yazı koyar. align yazının yerini söyler: başta, ortada ya da sonda. Başa ya da sona yaslanan etiketin o yanında kısa bir çizgi kalır.
Kalınlık. thickness çizginin kalınlığıdır; varsayılanı 1dp.
Girinti. startIndent yatay çizginin başında, dikey çizginin üstünde boşluk bırakır. Etiketli bir çizgide kullanılmaz.
Bulunduğu yerin rengi. Renk verilmeyen çizgi temanın kendi zeminlerinde temanın divider rengindedir. Bir dolgunun üstünde, o rengin okunmayacağı yerde, orada yazılan rengin bir payıdır: bir rolün yüzeyinde, dolu bir kartta, kendi rengi olan bir menünün satırları arasında.
Kendi rengi. color çizgiyi verilen renkte çizer. Etiketin rengini değiştirmez: etiket temanın zeminlerinde textSecondary, bir dolguda orada yazılan renktedir.
Sağdan sola. DividerAlign.START ve yatay çizginin startIndent'i satırın başladığı yana göredir: sağdan sola bir arayüzde sağdadır.

Örnekler

Satırların arasında

En yalın hâli: parametresiz bir PantrixDivider. Yataydır, bulunduğu yerin genişliğini kaplar, 1dp kalınlığındadır ve temanın divider rengindedir. Süstür: ekran okuyucu yalnızca satırları okur.

Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)) {
    PantrixText(text = "Profil")
    PantrixDivider()
    PantrixText(text = "Güvenlik")
    PantrixDivider()
    PantrixText(text = "Bildirimler")
}

Etiketli

label çizginin üstüne bir yazı koyar: çizgi yazının iki yanında sürer. Bir giriş ekranında iki yolun arasındaki "ya da" böyle yazılır.

Etiket temanın label stilinde ve ikincil yazı rengindedir. Etiketli çizgi süs değildir: ekran okuyucu etiketi okur.

Column(
    modifier = Modifier.widthIn(max = 360.dp),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
) {
    PantrixButton(text = "E-postayla giriş yap", onClick = {}, fullWidth = true, tagKey = "email")
    PantrixHorizontalDivider(label = "ya da")
    PantrixButton(text = "Telefonla giriş yap", onClick = {}, variant = ButtonVariant.Outline, fullWidth = true, tagKey = "phone")
}

Etiketin yeri

align etiketin çizginin neresinde duracağını söyler; varsayılanı CENTER'dır. START ve END etiketi bir yana yaslar ama kenara yapıştırmaz: o yanda kısa bir çizgi kalır.

PantrixHorizontalDivider(label = "Başta", align = DividerAlign.START)
PantrixHorizontalDivider(label = "Ortada", align = DividerAlign.CENTER)
PantrixHorizontalDivider(label = "Sonda", align = DividerAlign.END)

Kalınlık

thickness çizginin kalınlığıdır: sırayla 1dp (varsayılan, DefaultThickness), iki katı ve dört katı. Etiketli çizgide yazının iki yanındaki çizgiler de o kalınlıktadır.

PantrixHorizontalDivider(thickness = DefaultThickness)
PantrixHorizontalDivider(thickness = DefaultThickness * 2)
PantrixHorizontalDivider(thickness = DefaultThickness * 4)
PantrixHorizontalDivider(label = "Etiketli", thickness = DefaultThickness * 2)

Girinti

startIndent çizginin başında boşluk bırakır: çizgi ikonun altından değil, yazının hizasından başlar. Burada ikon 24dp, yazıyla arası 16dp; girinti ikisinin toplamıdır, 40dp.

Listenin sonundaki çizgi girintisizdir (DefaultStartIndent, 0dp): liste orada biter.

Etiketli bir çizgide startIndent kullanılmaz. Dikey çizgide boşluk çizginin üstünde kalır.

Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)) {
    DividerListRow(icon = PantrixIcons.Inbox, text = "Gelen kutusu")
    PantrixHorizontalDivider(startIndent = 40.dp)
    DividerListRow(icon = PantrixIcons.Star, text = "Yıldızlılar")
    PantrixHorizontalDivider(startIndent = 40.dp)
    DividerListRow(icon = PantrixIcons.Folder, text = "Arşiv")
    PantrixHorizontalDivider(startIndent = DefaultStartIndent)
}

@Composable
private fun DividerListRow(
    icon: ImageVector,
    text: String
) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        PantrixIcon(imageVector = icon, contentDescription = null, size = 24.dp)
        PantrixText(text = text)
    }
}

Dikey

PantrixVerticalDivider bulunduğu yerin yüksekliğini kaplar; bu yüzden yüksekliği belli bir yere konur. Üst satırda yüksekliği satır verir: Modifier.height(IntrinsicSize.Min) satırı içindeki yazının boyuna indirir, çizgi de o kadar olur. Alt satırda yükseklik çizginin kendisine verildi: PantrixTheme.spacing.xl, varsayılan yoğunlukta 24dp.

Dikey çizgi etiket taşımaz ve ekran okuyucudan gizlidir.

Row(
    modifier = Modifier.height(IntrinsicSize.Min),
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)
) {
    PantrixText(text = "12 gönderi")
    PantrixVerticalDivider()
    PantrixText(text = "340 takipçi")
    PantrixVerticalDivider()
    PantrixText(text = "28 takip")
}
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixButton(text = "Kalın", onClick = {}, variant = ButtonVariant.Text, size = ButtonSize.Small, tagKey = "bold")
    PantrixButton(text = "Eğik", onClick = {}, variant = ButtonVariant.Text, size = ButtonSize.Small, tagKey = "italic")
    PantrixVerticalDivider(modifier = Modifier.height(PantrixTheme.spacing.xl))
    PantrixButton(text = "Bağlantı", onClick = {}, variant = ButtonVariant.Text, size = ButtonSize.Small, tagKey = "link")
}

Yönü parametreyle

PantrixDivider yönünü bir değer olarak alır: DividerOrientation.Horizontal bir PantrixHorizontalDivider, DividerOrientation.Vertical bir PantrixVerticalDivider çizer. Yön bir koşula bağlı olduğunda tek bir çağrı ikisini de karşılar.

Burada iki sütunun içindeki çizgiler yatay, sütunların arasındaki dikey. label ve align yalnızca yatay çizgide geçerlidir.

Row(
    modifier = Modifier.height(IntrinsicSize.Min),
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)
) {
    Column(
        modifier = Modifier.weight(1f),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
    ) {
        PantrixText(text = "Teslimat adresi")
        PantrixDivider(orientation = DividerOrientation.Horizontal)
        PantrixText(text = "Atatürk Cad. No: 12, İzmir", color = PantrixTheme.colors.textSecondary)
    }
    PantrixDivider(orientation = DividerOrientation.Vertical)
    Column(
        modifier = Modifier.weight(1f),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
    ) {
        PantrixText(text = "Fatura adresi")
        PantrixDivider(orientation = DividerOrientation.Horizontal)
        PantrixText(text = "Teslimat adresiyle aynı", color = PantrixTheme.colors.textSecondary)
    }
}

Kendi renginde

color çizgiyi verilen renkte çizer: üstteki temanın hiçbir rolünde olmayan, uygulamanın kendi morunda; alttaki temanın danger rolünde.

color yalnızca çizgiyi boyar. Alttaki çizginin etiketi yine temanın ikincil yazı rengindedir.

PantrixHorizontalDivider(color = ownColors().color, thickness = 2.dp)
PantrixHorizontalDivider(color = PantrixTheme.colors.danger.color, label = "Geri alınamayan işler")

Bir dolgunun üstünde

Hiçbir çizgiye renk verilmedi. Temanın divider rengi temanın kendi zeminleri içindir; bir dolgunun üstünde çizgi, orada yazılan rengin bir payıdır (yüzde otuzu), etiket de o rengin kendisi.

Üstteki yüzey temanın primary renginde: çizgi rolün onColor'ından türer. Alttaki dolu bir kart (CardVariant.Filled): çizgi kartın içerik renginden türer.

PantrixSurface(modifier = Modifier.fillMaxWidth(), color = PantrixTheme.colors.primary.color) {
    Column(
        modifier = Modifier.padding(PantrixTheme.spacing.lg),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
    ) {
        PantrixText(text = "Aylık plan")
        PantrixHorizontalDivider()
        PantrixText(text = "Yıllık plan")
        PantrixHorizontalDivider(label = "ya da")
        PantrixText(text = "Ömür boyu")
    }
}
PantrixCard(modifier = Modifier.fillMaxWidth(), variant = CardVariant.Filled) {
    PantrixText(text = "Sipariş özeti")
    PantrixHorizontalDivider()
    PantrixText(text = "Toplam: 240 TL")
}

Sağdan sola

DividerAlign.START ve startIndent satırın başladığı yana göredir, sola göre değil. Bu örnek yazı yönünü kendi içinde sağdan sola çevirir: etiket sağda durur, ikinci çizginin girintisi sağdan bırakılır.

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
    Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)) {
        PantrixHorizontalDivider(label = "Başta", align = DividerAlign.START)
        PantrixHorizontalDivider(startIndent = 56.dp)
    }
}

API

modifier

İçeriği ayıran bir çizgi: orientation'a göre bir PantrixHorizontalDivider ya da bir PantrixVerticalDivider.

Parametre	Tür	Varsayılan	Ne olduğu
`modifier`	`Modifier`	`Modifier`	ayırıcının modifier'ı: yatay bir ayırıcı onun izin verdiği kadar geniş, dikey bir ayırıcı o kadar uzun olur.
`orientation`	`DividerOrientation`	`DividerOrientation.Horizontal`
`color`	`Color`	`Color.Unspecified`
`label`	`String?`	`null`
`align`	`DividerAlign`	`DividerAlign.CENTER`
`thickness`	`Dp`	`DefaultThickness`	çizginin ne kadar kalın olduğu: başka bir şey söylenmedikçe 1dp.
`startIndent`	`Dp`	`DefaultStartIndent`	etiketsiz yatay bir çizginin önündeki ya da dikey bir çizginin üstündeki boşluk: başka bir şey söylenmedikçe yok.

Erişilebilirlik

Ekran okuyucu. Etiketsiz çizgi süstür ve ekran okuyucudan gizlenir. Etiketli çizginin etiketi okunur.