Düğme

Düğmeler, kullanıcının tanımlı bir işlemi tetiklemesine olanak tanıyan temel bileşenlerdir. Beş tür düğme vardır. Bu 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 metin içeren düz arka plan. Yüksek vurgulu düğmeler. Bunlar, bir uygulamadaki "gönder" ve "kaydet" gibi birincil işlemler için kullanılır. Gölge efekti, düğmenin önemini vurgular.
Dolgulu tonal Arka plan rengi, yüzeye uyacak şekilde değişir. Birincil veya önemli işlemler için de kullanılır. Dolgulu tonlu düğmeler daha fazla görsel ağırlık sağlar ve "Alışveriş sepetine ekle" ve "Oturum aç" gibi işlevlere uygundur.
Normalden yüksek Gölgesiyle öne çıkar. Tonlu düğmelere benzer bir amaca hizmet eder. Düğmenin daha belirgin görünmesi için yüksekliği artırın.
Dış çizgili Dolgu içermeyen bir kenarlık bulunur. Önemli ancak birincil olmayan işlemler içeren orta vurgulu düğmeler. "İptal" veya "Geri" gibi alternatif, ikincil işlemleri belirtmek için diğer düğmelerle birlikte kullanılabilir.
Metin Arka planı veya kenarlığı olmayan metinleri gösterir. Düşük vurgulu düğmeler, 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 idealdir.

Bu 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 sistemin çağırdığı işlev.
enabled
false olduğunda bu parametre, düğmenin kullanılamaz ve devre dışı görünmesine neden olur.
colors
Düğmede kullanılan renkleri belirleyen bir ButtonColors örneği.
contentPadding
Düğmenin içindeki dolgu.

Dolu düğme

Dolgulu düğme bileşeni, temel Button composable'ı kullanır. Varsayılan olarak düz renkle doldurulur. Snippet, bileşenin nasıl uygulanacağını ve etkileşimli olarak nasıl önizleneceğini gösterir:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}

bileşenini kullanın.

Dolgulu tonlu düğme

Dolgulu tonlu düğme bileşeni, FilledTonalButton composable'ını kullanır. Varsayılan olarak ton rengiyle doldurulur.

Snippet, bileşenin nasıl uygulanacağını ve etkileşimli olarak nasıl önizleneceğini gösterir:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}

Anahatlı düğme

Kenar çizgili düğme bileşeni, OutlinedButton composable'ını kullanır. Varsayılan olarak ana hatlarıyla gösterilir.

Snippet, bileşenin nasıl uygulanacağını ve etkileşimli olarak nasıl önizleneceğini gösterir:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}

Yükseltilmiş düğme

Yükseltilmiş düğme bileşeni, ElevatedButton composable'ını kullanır. Varsayılan olarak yükseklik efektini temsil eden bir gölgesi vardır. Gölge içeren, dolgulu bir düğmedir.

Snippet, bileşenin nasıl uygulanacağını ve etkileşimli olarak nasıl önizleneceğini gösterir:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}

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.

Snippet, bileşenin nasıl uygulanacağını ve etkileşimli olarak nasıl önizleneceğini gösterir:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}

Ek kaynaklar