Angular projeleriniz için UI Kit - Kullanıcı Arabirimi Kitleri

UI Kit (User Interface Kit) yani Kullanıcı Arabirimi Kiti, web sayfası veya mobil uygulama tasarımlarında vb. kullanılan form elemanları, buton, ikon, açılır menü, tablo gibi bir çok bileşenin bir arada bulunduğu paketlerdir.


Bu yazıda Frontend Developer'ların işlerini oldukça kolaylaştıran, hızlandıran ve Angular'da kullanabileceğimiz paketlerden bazılarını listeleyeceğim.



1- Angular Material

"Material Design, iyi tasarımın klasik prensiplerini teknoloji ve bilimin yeniliği ile sentezleyen görsel bir dildir." şeklinde tanımlıyorlar kendilerini. Angular Material'de adı üstünde Material Design'ın Angular versiyonu oluyor.

Kullanımı oldukça basit ve bileşenleriyle gayet kullanışlı ve yeterli bir pakettir.


Bazı projelerde editör veya rating gibi ihtiyaçlarım olduğunda beni başka paketler kurmaya mecbur bıraktı ancak yinede yeterli.


Web sitesi: https://material.angular.io/



2- PrimeNG

PrimeTek tarafından geliştirilen PrimeNG 80'den fazla bileşene sahiptir. İhtiyacınız olan hemen hemen her bileşeni sunuyor. PrimeNG'i bir projede kullandım ve bir eksik hissetmedim. Tek başına yeterli ve gayet performanslı bir paket.


Ayrıca PrimeNG premium admin temalarına da sahip. Bunlarda satın alınıp kullanılabilir.


Web sitesi: https://primefaces.org/primeng/



3- NG-ZORRO

Ant Design'ın Angular versiyonudur. İçerisindeki bileşenler kaliteli ve kolayca özelleştirilebilir. NG-ZORRO'yu bir projede kullanmaktayım ve başka paket ihtiyacı duymayacağım gibi görünüyor. Ayrıca severek kullanıyorum diyebilirim. Öneririm.


Web sitesi: https://ng.ant.design



4- NG Bootstrap

Adı üstünde Bootstrap bileşenlerinin olduğu Angular kütüphanesidir. Ben bu paketi henüz kullanmadım. Grid yapısına alışık olduğum için projelerde Bootstrap'i kullanıyorum ancak bu paketi ekstra kurup kullanmadım. Yinede sizin ilginizi çekebilir diye listeye eklemek istedim.


Web sitesi: https://ng-bootstrap.github.io




Benim önerebileceğim paketler bunlar. Farklı paketler keşfedip biraz bilgi sahibi olursam listeye eklerim. Sizinde önerileriniz varsa yorum olarak belirtirseniz inceleyip bu listeye ekleyebilirim.


Umarım faydalı olur.

Mehmet Sert

HTML, CSS, Javascript ve Angular konularında tecrübe edinmiş ve Bursa'da Frontend Developer olarak bir firmada görev almaktayım. Yeni teknolojilere meraklıyım, öğrendiklerimi uygulayarak ve anlatarak pekiştirmeyi seviyorum....

"Angular projeleriniz için UI Kit - Kullanıcı Arabirimi Kitleri" için 4 yorum yapıldı.
H.Ö
Hakkı Özbakır 27 Mayıs 2020

Mehmet Hocam Merhaba Benim sormak istediğim birşey var elimizde bir html template var ve bunu angular olarak hazırlamak istiyoruz ancak template içerisinde kullanılan css ve templateleri ekleyin sürekli hatalar alıyoruz angular bir html template giydirme nasıl yapılıyor bilginiz var mı acaba.

Mehmet Sert (Yazı sahibi)27 Mayıs 2020

Merhaba Hakkı Özbakır, Muhtemelen Html template içinde kullanılan üçüncü parti paketlerden dolayı hatalar alıyorsunuz. İki yöntem ile çözebilirsiniz; Birincisi: kullanılan paketlere ait js dosyalarını angular.json içinde projeye dahil etmeniz gerekir. Ve paketi kullanacağınız component içinde de import edip gerekli ayarlamaları yapmanız gerekir. Bunun için şu yazı belki faydalı olabilir: https://kodumunblogu.net/detail/angular-uygulamasinda-jquery-nasil-kullanilir İkincisi: kullanılan paketlerin Angular versiyonlarını kullanmak. Html tag'lerinde ufak değişiklikler yapmanız gerekebilir ama ikinci yöntemle işiniz daha kolay olur diye düşünüyorum. Fikir olması açısından birde şu yazıya göz atabilirsiniz: https://kodumunblogu.net/detail/angularda-highlightjs-nasil-kullanilir Burada da highlightjs paketini hem angular için yapılmış bir versiyonunu hemde direkt kendisini dahil ederek kullanmayı gösterdim.

H.Ö
Hakkı Özbakır 31 Mayıs 2020

Geri dönüş için teşekkür ederim Mehmet bey Bu ikinci yöntemde theme içerisindeki tüm partileri npm ile node_module içerisine yükletsem ve angular.json dosyasına oradan göstersem bu şekilde yine aynı theme kullanabilirmiyim. İkinci yöntem olarak bunu mu demek istediniz.

Mehmet Sert (Yazı sahibi)01 Haziran 2020

Hakkı Özbakır, Evet ancak sadece o paketleri kurmak ve angular.json içinde dahil etmek yetmeyecek. Çünkü kullanım farklılıkları olacak. Bu farklılıklar hem html tarafında değişiklikler yapmanızı gerektirecek hemde ts tarafında eklemeler yapmanızı gerektirecek.

Yorum yap * E-posta adresiniz yayınlanmayacak.