Button

Metin etiketli düğme: düğmelerin çoğu bu biçimdedir.

import com.pantrixui.components.elements.button.PantrixButton

• Altı varyant. variant düğmenin ne kadar öne çıktığını söyler: ekrandaki tek ana iş Solid, ikincil işler Outline, Soft ve Subtle, üçüncül işler Text, geri alınamayan iş Destructive.
• Beş boyut. size yüksekliği, iç boşluğu ve etiketin yazı stilini birlikte seçer: 24dp'den 56dp'ye, 8'er dp arayla. Yükseklik en az yüksekliktir: sistemin yazı boyutu büyütülünce düğme etiketiyle birlikte uzar.
• İkonlar. leadingIcon etiketin önünde, trailingIcon arkasında durur ve etiketin rengini alır.
• Yükleniyor. loading öndeki ikonun yerine bir spinner koyar ve iş bitene kadar basışları durdurur.
• Form. form verilen düğmeye basılınca önce form doğrulanır: bir alan geçersizken onClick çağrılmaz, o alan odağı alır. Form gönderilirken düğme kendiliğinden yükleniyor görünür.
• Her rolde. Varsayılan renk temanın primary rolüdür, Destructive'te danger rolü; PantrixColor.buttonColors(variant) aynı varyantı başka bir rolde, ButtonColors tamamen kendi renginde verir.
• Kendi içeriği. Etiket yerine bir içerik alan ikinci bir PantrixButton vardır: bir sayaç, iki satır, bir rozet. Onda contentDescription zorunludur.

Örnekler

Varyantlar

variant düğmenin rengini ve ne kadar öne çıktığını seçer. Bir ekranda tek bir Solid olur: göz önce ona gider. Outline, Soft ve Subtle ikincil işlerdir; Text bir yüzeyi olmayan üçüncül iştir, "Vazgeç" gibi. Destructive geri alınamayan işi söyler ve bir dialog'un tek düğmesi olmaz.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    ButtonVariant.entries.forEach { variant ->
        PantrixButton(text = variant.name, onClick = {}, variant = variant, tagKey = "variant_${variant.name}")
    }
}

Boyutlar

size beş yükseklikten birini seçer: 24, 32, 40, 48 ve 56 dp. Varsayılan Medium'dur. İki uç belirli yerler içindir: ExtraSmall sık bir tablo satırında ya da bir alanın yanında, ExtraLarge bir telefon ekranının etrafında kurulduğu tek işte.

Yükseklik düğmenin en az yüksekliğidir. Sistemin yazı boyutu büyütülünce etiket düğmeden uzun olursa düğme onunla birlikte uzar ve etiket kesilmez.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    itemVerticalAlignment = Alignment.CenterVertically
) {
    ButtonSize.entries.forEach { size ->
        PantrixButton(
            text = size.name,
            onClick = {},
            variant = ButtonVariant.Outline,
            size = size,
            tagKey = "size_${size.name}"
        )
    }
}

İkonlu düğmeler

leadingIcon etiketin önünde, trailingIcon arkasında durur. İkonun rengi verilmez: düğmenin içerik rengini kendiliğinden alır. Süs olduğu için contentDescription'ı null'dır; ekran okuyucu yalnızca etiketi okur.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    PantrixButton(
        text = "Yeni klasör",
        onClick = {},
        leadingIcon = { PantrixIcon(imageVector = PantrixIcons.Folder, contentDescription = null) },
        tagKey = "new_folder"
    )
    PantrixButton(
        text = "Devam et",
        onClick = {},
        variant = ButtonVariant.Soft,
        trailingIcon = { PantrixIcon(imageVector = PantrixIcons.ArrowForward, contentDescription = null) },
        tagKey = "continue"
    )
    PantrixButton(
        text = "Yenile",
        onClick = {},
        variant = ButtonVariant.Outline,
        leadingIcon = { PantrixIcon(imageVector = PantrixIcons.Refresh, contentDescription = null) },
        tagKey = "refresh"
    )
}

Yükleniyor ve devre dışı

loading öndeki ikonun yerine bir spinner koyar ve iş bitene kadar basışları durdurur: aynı iş iki kez başlamaz. "Kaydet"e bas: iki saniye yükleniyor görünür, sonra uygulamanın snackbar'ı haber verir.

enabled = false düğmeyi soluk çizer ve düğme basış almaz. İkisi aynı şey değildir: yüklenen düğme bir işin sürdüğünü, devre dışı olan işin şu an yapılamayacağını söyler.

val snackbars = LocalPantrixSnackbars.current
var saving by remember { mutableStateOf(false) }
LaunchedEffect(saving) {
    if (saving) {
        delay(SAVE_MILLIS)
        saving = false
        snackbars?.show(message = "Kaydedildi")
    }
}
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    PantrixButton(text = "Kaydet", onClick = { saving = true }, loading = saving, tagKey = "save")
    PantrixButton(text = "Yükleniyor", onClick = {}, variant = ButtonVariant.Outline, loading = true, tagKey = "loading_outline")
    PantrixButton(text = "Devre dışı", onClick = {}, enabled = false, tagKey = "disabled")
    PantrixButton(text = "Devre dışı", onClick = {}, variant = ButtonVariant.Outline, enabled = false, tagKey = "disabled_outline")
}

private const val SAVE_MILLIS = 2_000L

Tam genişlik

fullWidth düğmeyi bulunduğu yerin genişliğine yayar: bir formun altındaki gönder düğmesi, bir sheet'in iki düğmesi. Burada sütun en fazla 360dp'dir, düğmeler onu doldurur.

Column(
    modifier = Modifier.widthIn(max = 360.dp),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    PantrixButton(text = "Siparişi tamamla", onClick = {}, size = ButtonSize.Large, fullWidth = true, tagKey = "complete_order")
    PantrixButton(text = "Alışverişe dön", onClick = {}, variant = ButtonVariant.Text, fullWidth = true, tagKey = "back_to_shop")
}

Başka bir rolde ve kendi renginde

Bir varyantın renkleri temanın primary rolünden gelir, Destructive'inkiler danger rolünden. PantrixColor.buttonColors(variant) aynı varyantı başka bir rolde verir: üst satır success rolünde dört varyant.

Alt satırdaki düğmenin rengi temanın hiçbir rolünde yok: ButtonColors dolguyu, içeriğin rengini ve istenirse kenarı doğrudan alır.

val success = PantrixTheme.colors.success
val own = ownColors()
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    listOf(ButtonVariant.Solid, ButtonVariant.Soft, ButtonVariant.Outline, ButtonVariant.Text).forEach { variant ->
        PantrixButton(
            text = "Onayla",
            onClick = {},
            colors = success.buttonColors(variant),
            tagKey = "confirm_${variant.name.lowercase()}"
        )
    }
}
PantrixButton(
    text = "Kampanyaya katıl",
    onClick = {},
    colors = ButtonColors(container = own.color, content = own.onColor),
    tagKey = "own_colors"
)

Şekil ve stil

shape tek bir düğmenin köşelerini değiştirir: temanın şekillerinden biri ya da herhangi bir Shape. style ise düğmenin geometrisini değiştirir: burada pressedScale ile basılıyken küçülen bir düğme. Yalnızca verilen alanlar değişir, gerisi temanın ve platformun stilinden gelir.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    PantrixButton(text = "Köşeli", onClick = {}, shape = PantrixTheme.shapes.none, tagKey = "square")
    PantrixButton(text = "Az yuvarlak", onClick = {}, shape = PantrixTheme.shapes.sm, tagKey = "rounded")
    PantrixButton(text = "Tam yuvarlak", onClick = {}, shape = PantrixTheme.shapes.full, tagKey = "pill")
    PantrixButton(
        text = "Basınca küçülür",
        onClick = {},
        variant = ButtonVariant.Soft,
        style = ButtonStyle(pressedScale = 0.94f),
        tagKey = "press_scale"
    )
}

Kendi içeriği

Etiket yerine içerik alan PantrixButton: içerik bir satırdır (RowScope) ve düğmenin içerik rengiyle çizilir. Burada etiketin yanında basıldıkça artan bir sayaç var.

Bu biçimde contentDescription zorunludur: düğmenin içinde ne olursa olsun ekran okuyucu tek bir cümle okur, "Beğen, 12 beğeni".

var likes by rememberSaveable { mutableIntStateOf(12) }
PantrixButton(
    onClick = { likes += 1 },
    contentDescription = "Beğen, $likes beğeni",
    variant = ButtonVariant.Soft,
    tagKey = "like"
) {
    PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null)
    PantrixText(text = "Beğen")
    PantrixText(text = likes.toString(), style = PantrixTheme.typography.footnote)
}

Bir formu gönderen düğme

form verilen düğme formun gönder düğmesidir. Basılınca önce form doğrulanır: alan boşken onClick çağrılmaz, alan hatasını gösterir ve odağı alır. Geçerliyse form.submit çalışır ve o sürerken düğme kendiliğinden yükleniyor görünür: loading ayrıca verilmez.

Alanı boş bırakıp "Davet et"e bas, sonra bir ad yazıp yeniden dene.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
Column(
    modifier = Modifier.widthIn(max = 360.dp),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
) {
    PantrixTextField(
        field = form.field("name", initial = "", Rules.notBlank("Davet edilecek kişinin adını yazın")),
        modifier = Modifier.fillMaxWidth(),
        form = form,
        label = "Ad"
    )
    PantrixButton(
        text = "Davet et",
        onClick = {
            scope.launch {
                form.submit {
                    delay(SAVE_MILLIS)
                    snackbars?.show(message = "Davet gönderildi")
                }
            }
        },
        form = form,
        tagKey = "invite"
    )
}

private const val SAVE_MILLIS = 2_000L

API

text

Metin etiketli düğme: düğmelerin çoğu bu biçimdedir.

onClick

Yuvalı biçim: bir metnin anlatamayacağı içerik için.

ButtonStyle

PantrixButton'ın geometrisi: şekli, basış geri bildirimi ve her ButtonSize için bir yükseklik, bir iç boşluk ve bir ikon boyutu. PantrixIconButton yalnızca boyutları okur.

ButtonColors

Bir düğmenin boyandığı renkler. ButtonVariant.colors bir varyantın primary rolündeki renklerini, PantrixColor.buttonColors ise aynı öne çıkma derecelerini herhangi bir rolde verir.

Erişilebilirlik

• Erişilebilirlik. contentDescription etiketin yerine okunur, ardından değil: yalnızca etiket düğmenin ne yaptığını söylemiyorsa verilir, "+" gibi.