Düğme

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

Tür	Görünüm	Amaç
Doldurulmuş	Kontrastlı metin içeren düz arka plan.	Yüksek vurgulu düğmeler. Bunlar, bir başvurudaki "gönder" ve "kaydet" gibi birincil işlemler içindir. Gölge efekti, düğmenin önemini vurgular.
Dolu ton	Arka plan rengi yüzeyle eşleşecek şekilde değişiklik gösteriyor.	Ayrıca birincil veya önemli işlemler için. Doldurulmuş düğmeler, "sepete ekle" ve "Oturum aç" gibi daha fazla görsel ağırlık ve özellik işlevi sağlar.
Normalden yüksek	Gölge oluşturarak öne çıkar.	Ton düğmelerine benzer bir role uyar. Düğmenin daha da 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şlemler içeren orta vurgulu düğmeler. "İptal" veya "Geri" gibi alternatif, ikincil işlemleri belirtmek için diğer düğmelerle iyi bir şekilde eşleşirler.
Text	Metni arka plan veya kenarlık olmadan gösterir.	Az vurgulu düğmeler, gezinme bağlantıları gibi daha az önemli işlemler veya "Daha Fazla Bilgi" ya da "Ayrıntıları göster" gibi ikincil işlevler için idealdir.

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ış değerine ayarlandığında 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üğme içindeki dolgu.

Doldurulmuş düğme

Doldurulmuş 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österir:

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

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

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

Şekil 2. Doldurulmuş bir düğme.

Doldurulmuş ton düğmesi

Doldurulmuş ton düğmesi bileşeni, FilledTonalButton composable'ı kullanır. Varsayılan olarak 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. Ton düğmesi.

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 düğme.

Yükseltilmiş düğme

Yükseltilmiş düğme bileşeni, ElevatedButton composable'ı kullanır. Varsayılan olarak yükseklik etkisini temsil eden bir gölge içerir. Bunun aslında gölge içeren, 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 dolgu veya dış çizgi bulunmaz.

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. Metin düğmesi.

Ek kaynaklar

• Kayan işlem düğmesi
• Materyal Kullanıcı Arayüzü belgeleri