Icon Button

Yalnızca bir ikon gösteren düğme: karedir, size boyutundaki bir düğme kadar yüksektir, varsayılan olarak yuvarlaktır ve çevresinde platformun en küçük dokunma hedefi kadar yer ayrılır. Renklerini variant seçer. Varsayılan olan ButtonVariant.Text'in, devre dışı olsun olmasın, dolgusu yoktur. contentDescription ekran okuyucu için işi adlandırır: "X" değil, "Kapat".

import com.pantrixui.components.elements.iconbutton.PantrixIconButton

Altı varyant. variant düğmenin renklerini seçer: PantrixButton'ın varyantlarıdır. Varsayılanı ButtonVariant.Text'tir: yüzeyi yoktur, bir araç çubuğundaki işler içindir.
Beş boyut. size düğmenin kenarını ve ikonunun boyutunu birlikte seçer: düğme 24dp'den 56dp'ye, ikonu 16dp'den 32dp'ye.
Şekil. Her platformda tam yuvarlaktır; shape temanın şekillerinden birini ya da herhangi bir Shape'i verir.
Açıklama. contentDescription ekran okuyucunun okuduğu addır ve işi söyler, ikonu değil: "Kapat", "çarpı" değil.
Açıklamasız düğme. Null yalnızca, ekran okuyucunun ve klavyenin zaten ulaştığı bir şeyin yaptığını yineleyen düğmeye verilir. Öyle bir düğme okuyucudan gizlenir ve klavyeyle üstünde durulmaz; fare ve parmak ona yine basar.
Kendi içeriği. İkon yerine içerik alan ikinci bir PantrixIconButton vardır: rozetli bir ikon, hareketli bir ikon. Okuyucu yalnızca açıklamayı duyar.
Renkler. colors varsayılan olarak varyantın primary rolündeki renkleridir, Destructive'te danger rolündeki; PantrixColor.buttonColors(variant) başka bir rolde, ButtonColors tamamen kendi renginde verir.
Devre dışı. enabled = false düğmeyi soluk çizer ve düğme basış almaz. Dolgusu olmayan varyant devre dışıyken de dolgusuz kalır.

Örnekler

En yalın hâli

En az yazılan hâli: bir ikon, ne yaptığını söyleyen bir açıklama ve basılınca olacak iş. Varyantı Text, boyutu Medium'dur: dolgusuz, 40dp'lik yuvarlak bir düğme.

Düğmeye bas: altındaki satır kaç kez basıldığını söyler. Dolgusu olmadığı için düğmenin yuvarlağı basılıyken ve klavye odağı üstündeyken görünür.

var refreshed by rememberSaveable { mutableIntStateOf(0) }
PantrixIconButton(
    imageVector = PantrixIcons.Refresh,
    contentDescription = "Yenile",
    onClick = { refreshed += 1 },
    tagKey = "refresh"
)
PantrixText(
    text = "$refreshed kez yenilendi",
    color = PantrixTheme.colors.textSecondary,
    tagKey = "refreshed"
)

Varyantlar

variant düğmenin renklerini seçer; altısı da PantrixButton'ın varyantlarıdır. Solid ekrandaki ana iştir, Outline, Soft ve Subtle ikincil işlerdir, Destructive geri alınamayan işi söyler.

Varsayılan Text'tir: yüzeyi yoktur, yalnızca ikonu çizilir. Bir araç çubuğundaki işler içindir.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    ButtonVariant.entries.forEach { variant ->
        PantrixIconButton(
            imageVector = PantrixIcons.Star,
            contentDescription = "${variant.name} varyantında düğme",
            onClick = {},
            variant = variant,
            tagKey = "variant_${variant.name}"
        )
    }
}

Boyutlar

size beş boyuttan birini seçer: düğme 24, 32, 40, 48 ve 56 dp'lik bir karedir, ikonu 16, 20, 24, 28 ve 32 dp. Varsayılan Medium'dur. Aynı boyuttaki bir PantrixButton ile yan yana durduğunda ikisi aynı yüksekliktedir.

Küçük düğmelerin çevresindeki boşluk dokunma hedefidir: düğme küçük çizilir ama platformun en küçük dokunma hedefi kadar yer tutar. Bu yer Android'de 48dp, iOS'ta 44dp, fareyle kullanılan masaüstünde ve web'de 32dp'dir.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    itemVerticalAlignment = Alignment.CenterVertically
) {
    ButtonSize.entries.forEach { size ->
        PantrixIconButton(
            imageVector = PantrixIcons.Plus,
            contentDescription = "${size.name} boyutunda düğme",
            onClick = {},
            variant = ButtonVariant.Soft,
            size = size,
            tagKey = "size_${size.name}"
        )
    }
}

Şekil ve stil

İkon düğmesi her platformda tam yuvarlaktır. shape onu değiştirir: ikinci düğme temanın orta yuvarlaklığında (shapes.md), üçüncüsü köşeli (shapes.none).

style düğmenin ölçülerini değiştirir: ikon düğmesi ButtonStyle'ın yalnızca boyutlarını okur. Son düğme yine Medium'dur, ama ikonu 24dp yerine 16dp çizildi. Yalnızca verilen alan değişir, gerisi temanın stilinden gelir.

Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixIconButton(
        imageVector = PantrixIcons.Folder,
        contentDescription = "Tam yuvarlak düğme",
        onClick = {},
        variant = ButtonVariant.Soft,
        tagKey = "pill"
    )
    PantrixIconButton(
        imageVector = PantrixIcons.Folder,
        contentDescription = "Az yuvarlak düğme",
        onClick = {},
        variant = ButtonVariant.Soft,
        shape = PantrixTheme.shapes.md,
        tagKey = "rounded"
    )
    PantrixIconButton(
        imageVector = PantrixIcons.Folder,
        contentDescription = "Köşeli düğme",
        onClick = {},
        variant = ButtonVariant.Soft,
        shape = PantrixTheme.shapes.none,
        tagKey = "square"
    )
    PantrixIconButton(
        imageVector = PantrixIcons.Folder,
        contentDescription = "Küçük ikonlu düğme",
        onClick = {},
        variant = ButtonVariant.Soft,
        style = ButtonStyle(medium = ButtonSizeStyle(iconSize = 16.dp)),
        tagKey = "small_icon"
    )
}

Devre dışı

enabled = false düğmeyi soluk çizer ve düğme basış almaz. Dolgusu olan varyant temanın devre dışı dolgusunu alır; dolgusu olmayan Text ve Outline devre dışıyken de dolgusuz kalır, gri bir şekle dönüşmez.

Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    listOf(ButtonVariant.Text, ButtonVariant.Outline, ButtonVariant.Soft, ButtonVariant.Solid).forEach { variant ->
        PantrixIconButton(
            imageVector = PantrixIcons.Calendar,
            contentDescription = "Takvime ekle",
            onClick = {},
            variant = variant,
            enabled = false,
            tagKey = "disabled_${variant.name}"
        )
    }
}

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: ilk iki düğme success ve danger rolünde.

Son düğmenin rengi temanın hiçbir rolünde yok: ButtonColors dolguyu ve ikonun rengini doğrudan alır. İkon rengi ayrıca verilmez: düğmenin içerik rengini kendiliğinden alır.

val colors = PantrixTheme.colors
val own = ownColors()
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixIconButton(
        imageVector = PantrixIcons.Check,
        contentDescription = "Onayla",
        onClick = {},
        colors = colors.success.buttonColors(ButtonVariant.Soft),
        tagKey = "approve"
    )
    PantrixIconButton(
        imageVector = PantrixIcons.Close,
        contentDescription = "Reddet",
        onClick = {},
        colors = colors.danger.buttonColors(ButtonVariant.Outline),
        tagKey = "reject"
    )
    PantrixIconButton(
        imageVector = PantrixIcons.Star,
        contentDescription = "Koleksiyona ekle",
        onClick = {},
        colors = ButtonColors(container = own.color, content = own.onColor),
        tagKey = "own_colors"
    )
}

Kendi içeriği: rozetli ikon

İkon yerine içerik alan PantrixIconButton: burada köşesinde rozet olan bir ikon. İçerik düğmenin içerik rengiyle çizilir.

Düğmenin içindekiler, açıklamanın söylediği şeyin resmidir: ekran okuyucu yalnızca açıklamayı duyar. Bu yüzden rozetin sayısı açıklamaya yazılır, "Gelen kutusu, 3 okunmamış"; rozetin kendisi okunmaz. "Yeni mesaj" sayıyı artırır, ikon düğmesine basmak sıfırlar.

var unread by rememberSaveable { mutableIntStateOf(3) }
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixIconButton(
        contentDescription = if (unread > 0) "Gelen kutusu, $unread okunmamış" else "Gelen kutusu",
        onClick = { unread = 0 },
        tagKey = "inbox"
    ) {
        PantrixBadgedBox(badge = { if (unread > 0) PantrixBadge(count = unread) }) {
            PantrixIcon(imageVector = PantrixIcons.Inbox, contentDescription = null)
        }
    }
    PantrixButton(
        text = "Yeni mesaj",
        onClick = { unread += 1 },
        variant = ButtonVariant.Outline,
        size = ButtonSize.Small,
        tagKey = "new_message"
    )
}

Açıklaması olmayan düğme

contentDescription = null yalnızca, başka bir şeyin zaten yaptığını yineleyen düğmeye verilir. Burada kartın tamamı basılır ve siparişi açar; sonundaki ok aynı işi yapar ve yalnızca gözle görene bir işarettir.

Böyle bir düğme ekran okuyucudan gizlenir ve klavyeyle üstünde durulmaz: okuyucunun hiç okumayacağı bir yerde odağın durması, hiç durmamasından kötüdür. Fare ve parmak ona yine basar. Bir işe giden tek yol olan düğmenin her zaman bir açıklaması olur.

var opened by rememberSaveable { mutableIntStateOf(0) }
PantrixCard(
    modifier = Modifier.widthIn(max = 360.dp),
    variant = CardVariant.Outlined,
    onClick = { opened += 1 },
    tagKey = "order"
) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Column(modifier = Modifier.weight(1f)) {
            PantrixText(text = "Sipariş 8F2A-19C4", style = PantrixTheme.typography.callout)
            PantrixText(text = "Yarın teslim edilecek", color = PantrixTheme.colors.textSecondary)
        }
        PantrixIconButton(
            imageVector = PantrixIcons.ChevronForward,
            contentDescription = null,
            onClick = { opened += 1 },
            tagKey = "open_order"
        )
    }
}
PantrixText(
    text = "Sipariş $opened kez açıldı",
    color = PantrixTheme.colors.textSecondary,
    tagKey = "order_opened"
)

API

imageVector

Parametre	Tür	Varsayılan	Ne olduğu
`imageVector`	`ImageVector`		düğmenin gösterdiği ikon.
`contentDescription`	`String?`
`onClick`	`() -> Unit`		bir basışın yaptığı.
`modifier`	`Modifier`	`Modifier`	düğmenin modifier'ı.
`variant`	`ButtonVariant`	`ButtonVariant.Text`
`size`	`ButtonSize`	`ButtonSize.Medium`
`enabled`	`Boolean`	`true`	düğmeye basılıp basılamayacağı: basılamayan düğme devre dışı renklerle çizilir ve hiçbir şey yapmaz.
`shape`	`Shape`	`PantrixTheme.shapes.full`	düğmenin köşeleri: başka bir şey söylenmedikçe tam yuvarlak.
`colors`	`ButtonColors`	`variant.colors()`	bu çağrının kendi renkleri, `variant`'ınkilerin yerine.
`tagKey`	`String?`	`null`	düğmenin otomasyon anahtarı: düğme `IconButton_<tagKey>`'dır, anahtar yoksa çağrıldığı yerden bir anahtar alır. Görünen metin hiçbir zaman anahtar olmaz.
`interactionSource`	`MutableInteractionSource?`	`null`	düğmenin etkileşimleri, dışarı taşınmış: odağı, üstündeki işaretçi ve basışları. Bu null olduğunda kendi kaynağını tutar.
`style`	`ButtonStyle?`	`null`	bu çağrının kendi stili: kapsayan her stilin üstünde, yoğunluğun altında. Yalnızca verdiği alanlar değişir.

contentDescription

Bir ImageVector yerine herhangi bir content alan PantrixIconButton: hareketli bir ikon ya da rozetli bir ikon.

Parametre	Tür	Varsayılan	Ne olduğu
`contentDescription`	`String?`
`onClick`	`() -> Unit`		bir basışın yaptığı.
`modifier`	`Modifier`	`Modifier`	düğmenin modifier'ı.
`variant`	`ButtonVariant`	`ButtonVariant.Text`	düğmenin renkleri: başka bir şey söylenmedikçe kabı olmayan `ButtonVariant.Text`.
`size`	`ButtonSize`	`ButtonSize.Medium`	düğmenin boyutu: `size` boyundaki bir düğme ne kadar uzunsa o kadar uzun ve o kadar geniş.
`enabled`	`Boolean`	`true`	düğmeye basılıp basılamayacağı: basılamayan düğme devre dışı renklerle çizilir ve hiçbir şey yapmaz.
`shape`	`Shape`	`PantrixTheme.shapes.full`	düğmenin köşeleri: başka bir şey söylenmedikçe tam yuvarlak.
`colors`	`ButtonColors`	`variant.colors()`	bu çağrının kendi renkleri, `variant`'ınkilerin yerine.
`tagKey`	`String?`	`null`	düğmenin otomasyon anahtarı: düğme `IconButton_<tagKey>`'dır, anahtar yoksa çağrıldığı yerden bir anahtar alır. Görünen metin hiçbir zaman anahtar olmaz.
`interactionSource`	`MutableInteractionSource?`	`null`	düğmenin etkileşimleri, dışarı taşınmış: odağı, üstündeki işaretçi ve basışları. Bu null olduğunda kendi kaynağını tutar.
`style`	`ButtonStyle?`	`null`	bu çağrının kendi stili: kapsayan her stilin üstünde, yoğunluğun altında. Yalnızca verdiği alanlar değişir.
`content`	`@Composable () -> Unit`

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.

Parametre	Tür	Varsayılan	Ne olduğu
`shape`	`ShapeSpec`	`ShapeSpec.Unspecified`	Düğmenin şekli: Android'de, masaüstünde ve web'de `ShapeRole.Full`, iOS'ta `ShapeRole.Medium`.
`pressedScale`	`Float`	`Float.NaN`	Basılıyken ölçek. `1f` ölçekleme yok demektir: geri bildirimi durum katmanı taşır.
`extraSmall`	`ButtonSizeStyle`	`ButtonSizeStyle()`	`ButtonSize.ExtraSmall`'ın geometrisi.
`small`	`ButtonSizeStyle`	`ButtonSizeStyle()`	`ButtonSize.Small`'ın geometrisi.
`medium`	`ButtonSizeStyle`	`ButtonSizeStyle()`	`ButtonSize.Medium`'un geometrisi.
`large`	`ButtonSizeStyle`	`ButtonSizeStyle()`	`ButtonSize.Large`'ın geometrisi.
`extraLarge`	`ButtonSizeStyle`	`ButtonSizeStyle()`	`ButtonSize.ExtraLarge`'ın geometrisi.

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.

Parametre	Tür	Varsayılan	Ne olduğu
`container`	`Color`		Dolgu. Çerçeveli düğmede ve metin düğmesinde saydamdır.
`content`	`Color`		Etiketin ve ikonun rengi.
`border`	`Color`	`Color.Unspecified`	Kenarın rengi. Kenarı olmayan düğme için `Color.Unspecified`.

Erişilebilirlik

Dokunma hedefi. Düğmenin çevresinde platformun en küçük dokunma hedefi kadar yer ayrılır: küçük çizilen düğmeye de parmakla basılır.