Button

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 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ş	Kontrast oluşturan 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.
Tonlu dolgu	Arka plan rengi, yüzeye uyacak şekilde değişir.	Birincil veya önemli işlemler için de geçerlidir. 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ölgesi olması nedeniyle öne çıkar.	Ton düğmelerine benzer bir role uyar. Düğmenin daha belirgin 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.	Gezinme bağlantıları veya "Daha fazla bilgi" ya da "Ayrıntıları göster" gibi ikincil işlevler gibi daha az kritik işlemler 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ılamadığını ve etkin olmadığını gösterir.
• colors: Şurada kullanılan renkleri belirleyen bir ButtonColors örneği: düğmesini tıklayabilirsiniz.
• contentPadding: Düğmedeki 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 istiyorsanız Button bileşenini 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 tonlu bir renkle 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 düğme.

Dış çizgili düğme

Ana hatlarıyla belirtilen düğme bileşeni, OutlinedButton bileşenini kullanır. Varsayılan olarak bir dış çizgiyle gösterilir.

Aşağıdaki snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:

@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 bileşenini kullanır. İçinde varsayılan olarak yükseklik efektini temsil eden bir gölgedir. Bu düğmenin temelde gölgeli bir kenarlık düğmesi 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 bileşenini kullanır. Basılana kadar yalnızca metin olarak görünür. Varsayılan olarak katı bir dolgu veya dış çizgisi yoktur.

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