Ant Design: Şimdiye kadar kullandığım en iyi Reaction kullanıcı arayüzü

Karınca Tasarımına kısa bir giriş

Antd olarak da bilinen Ant Design, ReactJS için bir bileşen kütüphanesidir. Çinli bir şirket olan “Ant Design” (Alibaba Group'a ait olan) tarafından açık kaynaktır. Geçtiğimiz yıllarda, Ant Design GitHub'taki 35 bin yıldızdan fazlasıyla açık kaynak topluluğundan büyük ilgi gördü. Çin'den gelmekle birlikte, topluluk sayesinde, İngilizce dilinde iyi belgelenmiştir.

Ant Design'ın üstün özellikleri:
 . Hemen hemen tüm modern tarayıcıları destekleyin (IE 9+ dahil)
 . Web uygulamaları için kurumsal sınıf tasarım dili
 . Bir dizi kalite
 . Typescript ile tamamlanmış tip sistemiyle iyi yazılmış

Karınca Tasarım Izgara + Düzen sistemi

Bootstrap ile daha önce çalışıyorsanız, “Antd” ızgara sistemi ile kendinizi evinizde hissedeceksiniz. “Antd” grid sistemi, diğer tüm UI kütüphaneleri gibi, Rows ve Cols'a dayanır. Ancak “Antd” ızgara sistemi, 12 satır yerine ekran alanınızı 24 satıra bölerek görünür alanınızı daha da özelleştirilebilir hale getirir.

Sütunlar arasındaki oluk belirtmek kadar kolaydır:

Sadece bu değil, “Antd” şebeke sistemi de 6 farklı kesme noktasını desteklemektedir, böylece sitenizi duyarlı hale getirebilir ve herhangi bir cihazda iyi görünmesini sağlayabilirsiniz:

Izgara sisteminin bir sayfa hazırlamak için biraz ek yük olduğunu düşünüyorsanız, “Antd” bir sayfanın genel düzenini kolayca yönetmenize yardımcı olabilecek bir Düzen sistemi ile birlikte gelir. “Antd” Layout, içeriğiniz için sadece sarma bileşenleri olan Header, Sider, Content, Footer'ı sağlar; böylece sayfanızı hayal edebileceğiniz şekilde düzenleyebilirsiniz.

Ve yukarıdaki görüntünün kodu:

Yüksek kaliteli simgeler kümesi

Kutudan çıkan “Antd”, uygulama gereksinimlerinizi yerine getirebilecek çok sayıda simgeyle birlikte gelir. “Antd” simgeleri seti 2 ana seçeneğe sahiptir: Anahattı hazırlanmış simgeler ve Dolgulu simgeler. Hatta bu yazının yazıldığı sırada Özel simgeler üzerinde çalışıyorlardı:

Bu simgeleri kullanmak, dize olarak hangi simgeyi kullanmak istediğinizi belirtmek kadar kolaydır:

Form bileşeni için güçlü destek

Eğer web ile çalışıyorsanız, kesinlikle form ile çalışıyordunuz. Hepimiz bu formun web'in vazgeçilmez bir parçası olduğunu biliyoruz.

“Antd”, FormItems'iniz için bir sarmalayıcı olan bir Form bileşeni sağlar. Her FormItem için Input, TextArea, Checkbox, Radio veya hatta Date / TimePicker kullanabilirsiniz.

“Antd” ile artık Kontrollü-Bileşene ihtiyacımız yok çünkü api bizim için bunu yapabilir. Ancak “Antd” Formunun en güçlü silahı onun geçerlilik sistemidir. Tek yapmanız gereken FormItem'iniz için kurallar belirlemektir. Örn: değer türü bir dize veya sayı olmalı, bir girdi numarasının minimum veya maksimum değeri olmalı veya bu alanın doldurulması zorunludur veya olmamalıdır ve hatta bir Regex veya aklınıza gelebilecek özel bir onaylama kuralını yerine getirmelisiniz (sunucu tarafı ile asenkron doğrulama). FormItem, doğrulama kurallarınızın hiçbirini yerine getirmediyse, hızlı mesaj ve doğrulama durumu olacaktır.

Global Geribildirim Bileşeni

Uygulamanız birileri sizi durumdayken etiketlediğinde Facebook'taki gibi kullanıcı eylemlerine anında bildirim sağlayabildiğini hayal edin? Bunu Antd Notification, Message ve diğer pek çok Geribildirim bileşeni ile kolayca yapabilirsiniz. İşte göründüğü gibi:

Ant Tasarım, benim görüşüme göre, React için Google Materyal UI kitaplığıyla karşılaştırılabilecek en iyi React UI kitaplıklarından biri. Git ve bu konuda daha ilginç şeyler öğrenmek için dokümanlar oku ve MUTLU KODLAMA !!!!