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, 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 metin içeren düz arka plan.	Yüksek vurgulu düğmeler. Bunlar, bir uygulamadaki birincil işlemler (ör. "gönder" ve "kaydet") içindir. Gölge efekti, düğmenin önemini vurgular.
Tonlu dolgu	Arka plan rengi, yüzeye uyacak şekilde değişir.	Ayrıca birincil veya önemli işlemler için de kullanılır. Doldurulmamış düğmeler daha fazla görsel ağırlık sağlar ve "alışveriş sepetine ekle" ve "Giriş yap" gibi işlevlere uygundur.
Normalden yüksek	Gölgesi olması nedeniyle öne çıkar.	Tonlu düğmelere benzer bir role sahiptir. Düğmenin daha belirgin görünmesi için yüksekliği artırın.
Dış çizgili	Doldurması olmayan bir kenarlığa sahiptir.	Önemli ancak birincil olmayan işlemleri 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şlenirler.
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, Material Design'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: Düğmede kullanılan renkleri belirleyen bir ButtonColors örneği.
• contentPadding: Düğmedeki dolgu.

Doldurulmuş düğme

Doldurulmuş düğme bileşeni, temel Button bileşenini kullanır. Varsayılan olarak düz renkle doldurulur. Aşağıdaki snippet'te bileşenin nasıl uygulanacağı gösterilmektedir:

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

Tonlu doldurulmuş düğme

Doldurulmuş tonlu düğme bileşeni, FilledTonalButton kompozisyonunu kullanır. Varsayılan olarak tonlu bir renkle doldurulur.

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

@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 gösterilen 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. Varsayılan olarak yükseklik efektini temsil eden bir gölgeye sahiptir. Bu düğmenin temelde gölgeli bir kenarlık düğmesi olduğunu unutmayın.

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

@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'te bileşenin nasıl uygulanacağı gösterilmektedir:

@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
• Material UI belgeleri