Button Group

Bir düğme grubu: aynı önemde birkaç eylem, tek bir kontrol olarak çizilmiş ya da aralarında aynı boşlukla ayrı duran.

import com.pantrixui.components.elements.buttongroup.PantrixButtonGroup

• Bitişik ya da ayrık. attached açıkken, ki varsayılanı budur, düğmeler birbirine değer: grubun tek bir şekli, çevresinde tek bir kenarı ve düğmelerin arasında birer çizgisi vardır. Kapalıyken aynı düğmeler aralarında bir boşlukla, her biri kendi şekli ve kenarıyla durur.
• Satır ya da sütun. orientation düğmeleri yan yana ya da alt alta dizer. Sütunda hepsi en geniş olan kadar geniştir.
• Genişlik. Satırda her düğme söylediği kadar geniştir. Dar bir yerde kısa olanlar bütün kalır, uzun olanlar kalan yeri paylaşır; equalWidth ile hepsi grubun genişliğini eşit paylaşır.
• Etiketli ya da yalnızca ikon. GroupButton'ın iki kurucusu vardır: bir etiket, önünde bir ikonla ya da ikonsuz; ya da yalnızca bir ikon. Yalnızca ikon olan düğmede contentDescription zorunludur.
• Her düğme bir düğmedir. Tab her birinde durur, ekran okuyucu her birinin adını ve rolünü söyler, her biri kendi odak halkasını çizer ve kendi basışını bildirir.
• Düğmenin kendi hâli. enabled, loading, variant ve colors her GroupButton'da ayrı verilebilir. Grubun variant, size, colors ve enabled değerleri bütün düğmeler içindir.
• Otomasyon. Düğmeler grubun test etiketi içinde adlandırılır: ButtonGroup_clipboard.Button_copy. Yalnızca ikon olan düğme IconButton olarak, anahtarı olmayan düğme sırasıyla etiketlenir.

Örnekler

Bitişik bir araç çubuğu

En az yazılan hâli: bir düğme listesi. Grup bitişiktir ve varyantı Outline'dır: çevresinde tek kenar, düğmelerin arasında birer çizgi vardır, köşeler yalnızca grubun iki ucundadır.

İlk düğmenin etiketinin önünde bir ikon var; sonuncusu yalnızca bir ikondur ve ne yaptığını contentDescription ile söyler. Her düğme kendi başına bir düğmedir: Tab her birinde durur, ekran okuyucu her birinin adını söyler. Bir düğmeye bas: alttaki satır son eylemi söyler.

var last by rememberSaveable { mutableStateOf<String?>(null) }
PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Kopyala", onClick = { last = "Kopyala" }, icon = PantrixIcons.Copy, tagKey = "copy"),
        GroupButton(text = "Yapıştır", onClick = { last = "Yapıştır" }, tagKey = "paste"),
        GroupButton(
            icon = PantrixIcons.MoreHorizontal,
            contentDescription = "Diğer eylemler",
            onClick = { last = "Diğer eylemler" },
            tagKey = "more"
        )
    ),
    tagKey = "clipboard"
)
PantrixText(
    text = last?.let { "Son eylem: $it" } ?: "Henüz bir eyleme basılmadı",
    style = PantrixTheme.typography.footnote,
    color = PantrixTheme.colors.textSecondary,
    tagKey = "clipboard_result"
)

Yalnızca ikonlardan bir sayaç

Yalnızca ikonlardan oluşan bir sayaç, Soft varyantında. Yalnızca ikon olan düğme GroupButton'ın ikinci kurucusuyla yazılır ve contentDescription orada zorunludur: bir düğme hiçbir zaman süs değildir.

enabled her düğmede ayrı verilir: alt sınırda eksi düğmesi basılamaz, artı basılır.

var count by rememberSaveable { mutableIntStateOf(1) }
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixButtonGroup(
        buttons = listOf(
            GroupButton(
                icon = PantrixIcons.Minus,
                contentDescription = "Azalt",
                onClick = { count-- },
                enabled = count > 1,
                tagKey = "minus"
            ),
            GroupButton(
                icon = PantrixIcons.Plus,
                contentDescription = "Artır",
                onClick = { count++ },
                tagKey = "plus"
            )
        ),
        variant = ButtonVariant.Soft,
        tagKey = "stepper"
    )
    PantrixText(text = "$count adet", tagKey = "stepper_count")
}

Açıklamasıyla okunan etiketler

Yazı boyutunu değiştiren iki düğme. Etiketleri "A-" ve "A+": görene yeter, ama ekran okuyucuda bir anlam taşımaz. Bu yüzden her birinin bir contentDescription'ı vardır ve okuyucu etiketi değil yalnızca açıklamayı okur: "Yazıyı küçült", "Yazıyı büyüt".

var percent by rememberSaveable { mutableIntStateOf(100) }
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixButtonGroup(
        buttons = listOf(
            GroupButton(
                text = "A-",
                onClick = { percent -= 10 },
                enabled = percent > 80,
                contentDescription = "Yazıyı küçült",
                tagKey = "smaller"
            ),
            GroupButton(
                text = "A+",
                onClick = { percent += 10 },
                enabled = percent < 150,
                contentDescription = "Yazıyı büyüt",
                tagKey = "larger"
            )
        ),
        tagKey = "text_size"
    )
    PantrixText(text = "Yazı boyutu: %$percent", tagKey = "text_size_percent")
}

Varyantlar

variant kendi varyantı olmayan her düğmenin varyantıdır; verilmezse Outline. Kenarı olan varyantlarda, Outline ve Subtle'da, grubun çevresinde tek bir kenar vardır ve aradaki çizgiler o renktedir. Kenarı olmayanlarda yalnızca düğmelerin arasındaki çizgiler çizilir.

listOf(
    ButtonVariant.Outline,
    ButtonVariant.Subtle,
    ButtonVariant.Soft,
    ButtonVariant.Solid,
    ButtonVariant.Text
).forEach { variant ->
    PantrixButtonGroup(
        buttons = listOf(
            GroupButton(text = "Önceki", onClick = {}, tagKey = "previous"),
            GroupButton(text = "Sonraki", onClick = {}, tagKey = "next")
        ),
        variant = variant,
        tagKey = "variant_${variant.name}"
    )
}

Boyutlar

size gruptaki bütün düğmelerin boyutudur, böylece hepsi aynı hizada durur: burada Small, Medium ve Large. Verilmezse Medium'dur.

listOf(ButtonSize.Small, ButtonSize.Medium, ButtonSize.Large).forEach { size ->
    PantrixButtonGroup(
        buttons = listOf(
            GroupButton(text = "Kes", onClick = {}, tagKey = "cut"),
            GroupButton(text = "Kopyala", onClick = {}, tagKey = "copy"),
            GroupButton(text = "Yapıştır", onClick = {}, tagKey = "paste")
        ),
        size = size,
        tagKey = "size_${size.name}"
    )
}

Alt alta eylemler

orientation = Orientation.Vertical düğmeleri alt alta dizer: hepsi en geniş olan kadar geniştir. Bitişik bir sütunda köşeler grubun üstünde ve altındadır, çizgiler düğmelerin arasında yatay durur.

Silen eylem kendi varyantını taşır: GroupButton'ın variant'ı o düğmede grubunkinin yerine geçer.

PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Yeniden adlandır", onClick = {}, tagKey = "rename"),
        GroupButton(text = "Çoğalt", onClick = {}, tagKey = "duplicate"),
        GroupButton(text = "Sil", onClick = {}, variant = ButtonVariant.Destructive, tagKey = "delete")
    ),
    orientation = Orientation.Vertical,
    tagKey = "record"
)

Ayrık ve eşit genişlikte

Bir dialog'un altındaki iki eylem. attached = false ile ayrık dururlar: her biri kendi şekli ve kenarıyla, stilin boşluğu kadar arayla. equalWidth = true ile grubun genişliğini eşit paylaşırlar; grup burada en fazla 360dp genişliğindedir.

loading düğmenin kendi hâlidir: "Sil" basılınca kısa bir süre yükleniyor görünür ve o sırada basılamaz. "Vazgeç" yüklemeyi durdurur.

var deleting by remember { mutableStateOf(false) }
LaunchedEffect(deleting) {
    if (deleting) {
        delay(1500)
        deleting = false
    }
}
PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Vazgeç", onClick = { deleting = false }, tagKey = "cancel"),
        GroupButton(
            text = "Sil",
            onClick = { deleting = true },
            loading = deleting,
            variant = ButtonVariant.Destructive,
            tagKey = "delete"
        )
    ),
    modifier = Modifier.widthIn(max = 360.dp),
    attached = false,
    equalWidth = true,
    tagKey = "footer"
)

Dar bir yerde

Aynı üç düğme, 280dp'lik bir yerde iki kez. Satırda her düğme söylediği kadar geniştir; yer yetmeyince kısa olanlar bütün kalır ve uzun olan kalan yeri alır, etiketi üç noktayla kesilir.

İkinci grupta equalWidth = true: üç düğme genişliği eşit paylaşır, uzun etiket daha erken kesilir.

PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Kaydet", onClick = {}, tagKey = "save"),
        GroupButton(text = "Kaydetmeden çık ve taslağı sil", onClick = {}, tagKey = "discard"),
        GroupButton(text = "Vazgeç", onClick = {}, tagKey = "cancel")
    ),
    modifier = Modifier.width(280.dp),
    tagKey = "narrow"
)
PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Kaydet", onClick = {}, tagKey = "save"),
        GroupButton(text = "Kaydetmeden çık ve taslağı sil", onClick = {}, tagKey = "discard"),
        GroupButton(text = "Vazgeç", onClick = {}, tagKey = "cancel")
    ),
    modifier = Modifier.width(280.dp),
    equalWidth = true,
    tagKey = "narrow_equal"
)

Bir rolün renklerinde

colors grubun düğmelerini bir varyantın primary renkleri yerine verilen renklerle çizer. Burada PantrixColor.buttonColors(ButtonVariant.Outline) ile success rolünün çerçeveli düğme renkleri verildi. Bitişik grupta kenarın rengi grubun tek kenarının ve aradaki çizgilerin rengidir.

PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Onayla", onClick = {}, icon = PantrixIcons.Check, tagKey = "approve"),
        GroupButton(text = "Tümünü onayla", onClick = {}, tagKey = "approve_all")
    ),
    colors = PantrixTheme.colors.success.buttonColors(ButtonVariant.Outline),
    tagKey = "review"
)

Kendi renginde

İlk grubun rengi temanın hiçbir rolünde yok: ButtonColors dolguyu, içeriğin rengini ve kenarı doğrudan alır.

İkinci grupta yalnızca bir düğmenin kendi rengi var. GroupButton'ın colors'ı o düğmede grubun renklerinin ve kendi varyantının yerine geçer; düğme yine grubun kenarının içinde durur.

val own = ownColors()
PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Koleksiyona ekle", onClick = {}, icon = PantrixIcons.Star, tagKey = "collect"),
        GroupButton(text = "Paylaş", onClick = {}, tagKey = "share")
    ),
    colors = ButtonColors(container = own.container, content = own.onContainer, border = own.color),
    tagKey = "own_colors"
)
PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Düzenle", onClick = {}, tagKey = "edit"),
        GroupButton(
            text = "Öne çıkar",
            onClick = {},
            colors = ButtonColors(container = own.color, content = own.onColor),
            tagKey = "feature"
        )
    ),
    tagKey = "one_own_button"
)

Şekil ve stil

shape bitişik grupta grubun bütününün şeklidir: her düğme yalnızca kendi ucundaki köşeleri taşır. Ayrık grupta her düğmenin şeklidir. İlk grup temanın az yuvarlak şekliyle (shapes.sm) çizildi.

style grubun geometrisini değiştirir: ikinci grupta ButtonGroupStyle(gap = 16.dp) ayrık düğmelerin arasını açar. Düğmelerin boyutları grubun stilinden değil, düğmenin kendi stilinden gelir.

PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Yazdır", onClick = {}, tagKey = "print"),
        GroupButton(text = "Dışa aktar", onClick = {}, tagKey = "export"),
        GroupButton(text = "Paylaş", onClick = {}, tagKey = "share")
    ),
    shape = PantrixTheme.shapes.sm,
    tagKey = "less_round"
)
PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Geri", onClick = {}, tagKey = "back"),
        GroupButton(text = "İleri", onClick = {}, tagKey = "forward")
    ),
    attached = false,
    style = ButtonGroupStyle(gap = 16.dp),
    tagKey = "wide_gap"
)

Devre dışı grup

Grubun enabled = false değeri bütün düğmeleri devre dışı bırakır: hiçbiri basış almaz, etiketleri ve grubun kenarı soluk çizilir.

PantrixButtonGroup(
    buttons = listOf(
        GroupButton(text = "Geri al", onClick = {}, tagKey = "undo"),
        GroupButton(text = "Yinele", onClick = {}, tagKey = "redo")
    ),
    enabled = false,
    tagKey = "locked"
)

API

buttons

Bir düğme grubu: aynı önemde birkaç eylem, tek bir kontrol olarak çizilmiş ya da aralarında aynı boşlukla ayrı duran.

ButtonGroupStyle

PantrixButtonGroup'un geometrisi: grubun şekli, bitişik iki düğmenin arasındaki çizgi ve bitişik olmayan iki düğmenin arasındaki boşluk.

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

• Dokunma hedefi. Bitişik grup platformun dokunma hedefini bir kez, kendi çevresinde ayırır; düğmelerinin her biri grup boyunca en az o kadar uzundur.