Düğmeler, kullanıcının tanımlı bir işlemi tetiklemesini sağlayan temel bileşenlerdir. Beş tür düğme vardır. Aşağıdaki tabloda, beş düğme türünün 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, bir başvurudaki "gönder" ve "kaydet" gibi birincil işlemler içindir. Gölge efekti, düğmenin önemini vurgular. |
Dolu ton |
Arka plan rengi yüzeyle eşleşecek şekilde değişiklik gösteriyor. |
Ayrıca birincil veya önemli işlemler için. Doldurulmuş düğmeler, "sepete ekle" ve "Oturum aç" gibi daha fazla görsel ağırlık ve özellik işlevi sağlar. |
Normalden yüksek |
Gölge oluşturarak öne çıkar. |
Ton düğmelerine benzer bir role uyar. Düğmenin daha da 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şlemler içeren orta vurgulu düğmeler. "İptal" veya "Geri" gibi alternatif, ikincil işlemleri belirtmek için diğer düğmelerle iyi bir şekilde eşleşirler. |
Text |
Metni arka plan veya kenarlık olmadan gösterir. |
Az vurgulu düğmeler, gezinme bağlantıları gibi daha az önemli işlemler veya "Daha Fazla Bilgi" ya da "Ayrıntıları göster" gibi ikincil işlevler için idealdir. |
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ış değerine ayarlandığında 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üğme içindeki dolgu.
Doldurulmuş düğme
Doldurulmuş 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österir:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Bu uygulama aşağıdaki gibi görünür:
Doldurulmuş ton düğmesi
Doldurulmuş ton düğmesi bileşeni, FilledTonalButton
composable'ı kullanır.
Varsayılan olarak 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 etkisini temsil eden bir gölge içerir. Bunun aslında gölge içeren,
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 dolgu veya dış çizgi bulunmaz.
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: