ASPNET MVC Projeleriniz için Material Checkbox

Projelerimiz de her ne kadar Bootstrap kullanıyor ve kendimi tatmin edecek seviye de hoş tasarımlar yaparak istediğim görsellere ulaşsam da checkbox’ların çok sıradan bir görsellikte olması gözüme bir düzensizlik olduğunu hissettiriyor ve bununla ilgili başka yazılarımda da, farklı çözümler sunmaya çalıştım.

Projelerinizde daha şık material tasarımlı checkbox kullanmak isterseniz aşağıdaki kodlardan faydalanabilirsiniz. Aşağıdaki görselde göreceğiniz şekilde bir görsellik oluşacaktır. Ayrıca biraz daha kod yazarak, klavye desteği ve farklı kontrol’e bağımlı kılarak diğer kontrolün aktifleştirilmesi/pasifleştirilmesi(disabled) sağlanabiliyor.

material-checkbox-in-mvc

kmb-udemy-reklam

“ASPNET MVC Projeleriniz için Material Checkbox” yazısını okumaya devam et

Reklamlar

ASP.NET MVC ile Bootstrap Checkbox ve Radio Kullanımı

Evet.. Uzun bir aradan sonra tekrar makale yazmaya başlamalıyım diye düşünüyordum. Sonunda yavaştan yavaştan başlamak gerektiği için hadi bakalım dedim ve kolları sıvadım. Aslında bunun sebeplerinden biri artık çoğu kişinin video içeriklere yönelmesi ve video ile bazı şeyleri göstererek daha hızlı ve 1 dakikalık bir zaman dilimine daha çok şey sığdırabildiğimizden dolayıdır sanırım. Fakat açıkçası ben hala makalelerden ve kitaplardan yanayım. Video içerikler daha kolay uçuyor akıllardan ve özümsemesi zor. Anlatılan bir noktayı bulması da daha zor. Henüz video içi arama pek gelişmedi. Sanırım bu gelince bende ona daha fazla yönelebilirim. Tabii ki izlemek, anlatılanı yapılırken görmek ayrı, olmazsa olmaz. Ama nedense benim gözlerim metin arıyor, ne diyebilirim.

Peki konumuza dönelim. Bu yazımızda sizlere asp.net mvc içinde radio ve checkbox kullanımı ile ilgili bir yöntem göstereceğim. Bende herkes gibi projelerimde veya örneklerimde bootstrap kullanıyorum. Dolayısı ile en çok sıkıntı duyduğum nokta checkbox ve radio kontrollerinin tasarımının bootstrap’te eksik olması! Aslında eksik değil ama bizim alıştığımızdan farklı olması. Bizim bildiğimiz bu şekilde..

 

image
Bootstrap kullanılsa bile ortaya çıkan radio ve checkbox görünümü.

 

Fakat bootstrap ‘in yaklaşımı ile olması gereken budur.

 

image
Bootstrap in checkbox ve radio yaklaşımı bu şekilde

 

Kullanımı kolay ve özellikle mobil cihazlar için bu tasarım aslında harika oluyor.. Fakat bunu elde etmek için gereken HTML kodu şu şekilde(Bu arada ikonlar tamamen benim uydurmamdır ki onu da nasıl yaptığımı göstereceğim). Örneğin HTML, CSS ve JS kodlarına buradan ulaşabilirsiniz.

 

kmb-udemy-reklam

“ASP.NET MVC ile Bootstrap Checkbox ve Radio Kullanımı” yazısını okumaya devam et