Button
Düğmeler, kullanıcının tanımlanmış bir öğeyi tetiklemesini sağlayan temel bileşenlerdir eyleme dökülebilir. 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 gerekir.
Tür |
Görünüm |
Amaç |
---|---|---|
Doldurulmuş |
Kontrastlı 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. |
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. 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ö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" 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. |
Az vurgulu düğmeler; gezinme bağlantıları gibi daha az önemli işlemler veya "Daha Fazla Bilgi" gibi ikincil işlevler için idealdir veya "Ayrıntıları görüntüle"yi tıklayın. |
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 görüntülenmesine neden olur mevcut değil ve etkin değil.colors
: Şurada kullanılan renkleri belirleyen birButtonColors
örneği: düğmesini tıklayabilirsiniz.contentPadding
: Düğme içindeki 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") } }
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. Google
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. İçinde
varsayılan olarak yükseklik efektini temsil eden bir gölgedir. Lütfen
dış çizgili, dış çizgili bir düğmedir.
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. Basana 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: