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 düz arka plan. |
Vurgulu düğmeler. Bunlar, bir uygulamadaki "gönder" ve "kaydet" gibi birincil işlemler içindir. Gölge efekti düğmenin önemini vurgular. |
Dolu ton |
Arka plan rengi, yüzeye göre değişir. |
Ayrıca birincil veya önemli işlemler için. Dolgulu düğmeler, "sepete ekle" ve "Oturum aç" gibi daha fazla görsel ağırlık ve takım elbise işlevleri sağlar. |
Normalden yüksek |
Gölgesiyle dikkat çeker. |
Tonlu düğmelere benzer bir role uyar. Düğmenin daha belirgin bir şekilde görünmesi için yüksekliği artırın. |
Dış çizgili |
Dolgusuz bir kenarlık içerir. |
Önemli ancak birincil olmayan işlemleri içeren orta düzeyde vurgulu düğmeler. "İptal" veya "Geri" gibi alternatif, ikincil işlemleri belirtmek için diğer düğmelerle iyi bir şekilde eşleşir. |
Text |
Metin, arka plan veya kenarlık olmadan görüntülenir. |
Gezinme bağlantıları gibi daha önemsiz işlemler veya "Daha Fazla Bilgi" ya da "Ayrıntıları göster" gibi ikincil işlevler için ideal olan, düşük vurgulu düğmeler. |
Aşağıdaki resimde, Materyal Tasarım'daki beş düğme türü gösterilmektedir.
API yüzeyi
onClick
: Kullanıcı düğmeye bastığında çağrılan işlev.enabled
: Yanlış olduğunda bu parametre, düğmenin kullanılamıyor ve devre dışı olarak görünmesine neden olur.colors
: Düğmede kullanılan renkleri belirleyen birButtonColors
örneği.contentPadding
: Düğmenin içindeki dolgu.
Doldurulmuş düğme
Dolgulu düğme bileşeni, temel Button
composable'ı kullanır. Varsayılan olarak düz bir renkle doldurulur. Aşağıdaki snippet, bileşenin nasıl uygulanacağını göstermektedir:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Bu uygulama aşağıdaki gibi görünür:
Doldurulmuş ton düğmesi
Doldurulan ton düğmesi bileşeni, FilledTonalButton
composable'ı kullanır.
Varsayılan olarak bir ton rengiyle doldurulur.
Aşağıdaki snippet, bileşenin nasıl uygulanacağını gösterir:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Bu uygulama aşağıdaki gibi görünür:
Dış çizgili düğme
Dış çizgili düğme bileşeni, OutlinedButton
composable'ı kullanır. Varsayılan olarak bir dış çizgiyle 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") } }
Bu uygulama aşağıdaki gibi görünür:
Yükseltilmiş düğme
Yükseltilmiş düğme bileşeni ElevatedButton
composable'ı kullanır. Varsayılan olarak yükseklik efektini temsil eden bir gölgeye sahiptir. Bunun aslında gölgesi olan, dış çizgili bir düğme 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") } }
Bu uygulama aşağıdaki gibi görünür:
Metin düğmesi
Metin düğmesi bileşeni, TextButton
composable'ı kullanır. Basılana kadar
yalnızca metin olarak görünür. Varsayılan olarak düz bir dolgu veya dış çizgiye sahip olmaz.
Aşağıdaki snippet, bileşenin nasıl uygulanacağını gösterir:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Bu uygulama aşağıdaki gibi görünür: