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.

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

Not: Özel bir düğme oluşturmak istiyorsanız Button composable'ını kullanın.

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

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

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:

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:

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:

6. şekil. Metin düğmesi.

Ek kaynaklar

• Kayan işlem düğmesi
• Material UI belgeleri