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.

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: Ş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

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.

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:

"Doldurulmuş" yazan açık mor arka planlı bir ton düğmesi.
Ş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:

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

Gri arka plana sahip ve "Yükseltilmiş" yazan bir yükseltilmiş 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, 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
Şekil 6. Metin düğmesi.

Ek kaynaklar