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ş

Kontrastlı metin içeren düz arka plan.

Yüksek vurgulu düğmeler. Bunlar, uygulamadaki "gönder" ve "kaydet" gibi birincil işlemler içindir. Gölge efekti, düğmenin önemini vurgular.

Dolu tonal

Arka plan rengi, yüzeyle eşleşecek şekilde değişir.

Birincil veya önemli işlemler için de geçerlidir. Dolu düğmeler daha fazla görsel ağırlık sağlar ve "alışveriş sepetine ekle" ile "oturum açma" gibi işlevlere uygundur.

Normalden yüksek

Gölgesi sayesinde öne çıkar.

Ton düğmelerine benzer bir rolü vardır. Düğmenin daha da belirgin görünmesi için yüksekliği artırın.

Dış çizgili

Dolu 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 eşleşirler.

Metin

Arka planı veya kenarlığı olmayan metinleri gösterir.

Gezinme bağlantıları gibi daha az kritik işlemler veya "Daha fazla bilgi" ya da "Ayrıntıları görüntüle" gibi ikincil işlevler 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 birine ait, kendine özgü özelliklerinin vurgulandığı bir örnek.
1. şekil. Beş düğme bileşeni.

API yüzeyi

  • onClick: Kullanıcı düğmeye bastığında çağrılan işlev.
  • enabled: Bu parametre false olduğunda düğme kullanılamaz ve etkin değil olarak görünür.
  • colors: Düğmede kullanılan renkleri belirleyen bir ButtonColors örneği.
  • contentPadding: Düğme içindeki dolgu.

Doldurulmuş düğme

Dolu düğme bileşeni, temel Button composable'ını kullanır. Varsayılan olarak düz bir 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:

Arka planı mor olan ve "dolu" yazan doldurulmuş bir düğme.
Şekil 2. Dolu düğme.

Dolu tonal düğme

Dolu tonlu düğme bileşeni, FilledTonalButton composable'ını kullanır. Varsayılan olarak tonal 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:

"Dolu" yazan, açık mor arka planlı bir ton düğmesi.
3. şekil. Tonlu düğme.

Dış çizgili düğme

Anahatlı düğme bileşeni, OutlinedButton composable'ını kullanır. Varsayılan olarak ana hatlı 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:

"Dış çizgili" yazan, koyu kenarlıklı, şeffaf bir düğme.
4. şekil. Dış çizgili düğme.

Yükseltilmiş düğme

Yükseltilmiş düğme bileşeni, ElevatedButton composable'ını kullanır. Varsayılan olarak, yüksekliği temsil eden bir gölgeye sahiptir. Bunun temelde gölgeli bir ana hat 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:

"Yükseltilmiş" yazan gri arka planlı bir yükseltilmiş düğme.
5. şekil. Yükseltilmiş düğme.

Metin düğmesi

Metin düğmesi bileşeni, TextButton composable'ını kullanır. Basılana kadar yalnızca metin olarak görünür. Varsayılan olarak düz dolgusu veya ana hattı 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:

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

Ek kaynaklar