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.

Beş düğme bileşeninin her birinin benzersiz özelliklerinin vurgulandığı bir örnek.
Ş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

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

Mor arka planlı ve "filled" yazan dolu bir düğme.
Ş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:

Açık mor arka planlı ve "dolu" yazan tonlu bir düğme.
Ş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:

"Dış çizgili" yazan koyu renkli bir kenarlığı olan şeffaf dış çizgili düğme.
Ş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:

Gri arka plana sahip ve "Yükseltilmiş" yazan bir düğme.
Ş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:

"Metin Düğmesi" yazan bir metin düğmesi
Şekil 6. Metin düğmesi.

Ek kaynaklar