Button

Düğmeler, kullanıcının tanımlanmış bir öğeyi tetiklemesini sağlayan temel bileşenlerdir eyleme dökülebilir. Beş tür düğme vardır. Aşağıdaki tabloda ve beş düğme türünün görünümünü ve nerede kullanmanız gerektiğini oluşturabilirsiniz.

Tür	Görünüm	Amaç
Doldurulmuş	Kontrastlı metin içeren düz arka plan.	Yüksek vurgulu düğmeler. Bunlar, başvurudaki "gönder" gibi birincil işlemler içindir ve "kaydedin". 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. Dolgulu düğmeler, daha fazla görsel ağırlık ve "sepete ekle" gibi işlevler sağlar ve "Oturum aç"ı tıklayın.
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" gibi alternatif, ikincil işlemleri belirtmek için diğer düğmelerle iyi bir şekilde eşleşirler veya "Geri"yi seçin.
Metin	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" gibi ikincil işlevler için idealdir veya "Ayrıntıları görüntüle"yi tıklayın.

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 görüntülenmesine neden olur mevcut değil ve etkin değil.
• colors: Şurada kullanılan renkleri belirleyen bir ButtonColors örneği: düğmesini tıklayabilirsiniz.
• contentPadding: Düğme içindeki dolgu.

Doldurulmuş düğme

Doldurulmuş düğme bileşeni, temel Button composable'ı kullanır. Evet varsayılan olarak düz bir renkle doldurulur. Aşağıdaki snippet, bileşeni uygulayın:

@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. Google 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. İçinde varsayılan olarak yükseklik efektini temsil eden bir gölgedir. Lütfen dış çizgili, dış çizgili bir düğmedir.

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. Basana 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