Düğme

Düğmeler, kullanıcının tanımlanmış bir işlemi tetiklemesine olanak tanıyan temel bileşenlerdir. Beş tür düğme vardır. Aşağıdaki tabloda, beş düğme türünün her birinin görünümü ve bunları nerede kullanmanız gerektiği açıklanmaktadır.

Tür	Görünüm	Amaç
Doldurulmuş	Kontrast oluşturan düz arka plan.	Vurgulu düğmeler. Bunlar, bir uygulamadaki "gönder" ve "kaydet" gibi birincil işlemler içindir. Gölge efekti düğmenin önemini vurgular.
Dolu ton	Arka plan rengi, yüzeye göre değişir.	Ayrıca birincil veya önemli işlemler için. Dolgulu düğmeler, "sepete ekle" ve "Oturum aç" gibi daha fazla görsel ağırlık ve takım elbise işlevleri sağlar.
Normalden yüksek	Gölgesiyle dikkat çeker.	Tonlu düğmelere benzer bir role uyar. Düğmenin daha belirgin bir şekilde görünmesi için yüksekliği artırın.
Dış çizgili	Dolgusuz bir kenarlık içerir.	Önemli ancak birincil olmayan işlemleri içeren orta düzeyde vurgulu düğmeler. "İptal" veya "Geri" gibi alternatif, ikincil işlemleri belirtmek için diğer düğmelerle iyi bir şekilde eşleşir.
Text	Metin, arka plan veya kenarlık olmadan görüntülenir.	Gezinme bağlantıları gibi daha önemsiz işlemler veya "Daha Fazla Bilgi" ya da "Ayrıntıları göster" gibi ikincil işlevler için ideal olan, düşük vurgulu düğmeler.

Aşağıdaki resimde, Materyal Tasarım'daki beş düğme türü gösterilmektedir.

Şekil 1. Beş düğme bileşeni.

API yüzeyi

• onClick: Kullanıcı düğmeye bastığında çağrılan işlev.
• enabled: Yanlış olduğunda bu parametre, düğmenin kullanılamıyor ve devre dışı olarak görünmesine neden olur.
• colors: Düğmede kullanılan renkleri belirleyen bir ButtonColors örneği.
• contentPadding: Düğmenin içindeki dolgu.

Doldurulmuş düğme

Dolgulu düğme bileşeni, temel Button composable'ı kullanır. Varsayılan olarak düz bir renkle doldurulur. Aşağıdaki snippet, bileşenin nasıl uygulanacağını göstermektedir:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Not: Özel bir düğme oluşturmak istiyorsanız Button composable'ı kullanın.

Bu uygulama aşağıdaki gibi görünür:

Şekil 2. İçi dolu bir düğme.

Doldurulmuş ton düğmesi

Doldurulan ton düğmesi bileşeni, FilledTonalButton composable'ı kullanır. Varsayılan olarak bir ton rengiyle doldurulur.

Aşağıdaki snippet, bileşenin nasıl uygulanacağını gösterir:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Bu uygulama aşağıdaki gibi görünür:

Şekil 3. Tonlu bir düğme.

Dış çizgili düğme

Dış çizgili düğme bileşeni, OutlinedButton composable'ı kullanır. Varsayılan olarak bir dış çizgiyle görünür.

Aşağıdaki snippet, bileşenin nasıl uygulanacağını gösterir:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Bu uygulama aşağıdaki gibi görünür:

Şekil 4. Dış çizgili bir düğme.

Yükseltilmiş düğme

Yükseltilmiş düğme bileşeni ElevatedButton composable'ı kullanır. Varsayılan olarak yükseklik efektini temsil eden bir gölgeye sahiptir. Bunun aslında gölgesi olan, dış çizgili bir düğme olduğunu unutmayın.

Aşağıdaki snippet, bileşenin nasıl uygulanacağını gösterir:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Bu uygulama aşağıdaki gibi görünür:

Şekil 5. Yükseltilmiş bir düğme.

Metin düğmesi

Metin düğmesi bileşeni, TextButton composable'ı kullanır. Basılana kadar yalnızca metin olarak görünür. Varsayılan olarak düz bir dolgu veya dış çizgiye sahip olmaz.

Aşağıdaki snippet, bileşenin nasıl uygulanacağını gösterir:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Bu uygulama aşağıdaki gibi görünür:

Şekil 6. Bir metin düğmesi.

Ek kaynaklar

• Kayan işlem düğmesi
• Materyal kullanıcı arayüzü belgeleri