FRONTEND KAPSAM
Material UI 5 ile Gelen Yenilikler
React Bileşen Kütüphanesi olarak kullanılan haftalık 2.1Milyon indirilme alan bu kütüphanede uzun bir süre sonra yeni versiyon ve arayüzle geldi. Bu yazıda genel yeniliklere değineceğiz.
Digital Garden olarak oluşturduğum sitede (onurdayibasi.dev) sitesinde, bileşen kütüphanesi olarak Material UI kullanıyorum. Geçen gün web sayfalarına gittiğimde sayfalarının ve domain isminin değiştiğini farkettim.
Tabi kütüphane import adresleride değişmiş. Dijital bahçemde çok fazla bileşen olmadığı için bu geçiş çok zor olmadı. Kütüphane 📚 adreslerini güncellemem yeterli oldu. Örneğin aşağıdaki gibi.
@material-ui/core/Button --> @mui/material/ButtonTabi değişiklikler sadece adresler ile ilgili gerçekleşmedi. Tüm değişikliklerin liste Release Notlarından erişebilirsiniz.
`sx` prop
Her bileşenin içerisinde `sx` prop kendinize özel stiller oluşturmak için temayı kolay erişim ve güncelleme imkanı sunuyor.
Örneğin aşağıdaki UI görüntüsü, tamamiyle sx prop değişkenler güncellenerek oluşturulmuş. Tabi buradaki değişkenler her zaman birebir CSS ile örtüşmüyor, Material UI Theme map ediyor.
Renk Palet Temasına Dinamik Eklemeler
Renk Palet içerisine kendi dinamik renk ve değişken tanımlamalarınızı yapıp bileşenleri kendi istediğiniz bir theme üzerinden ilişkilendirebiliyorsunuz.
Kendi tasarımcınıza ait olan temalı bileşenler oluşturmak oldukça kolaylaştı.
Production Kullanılmaya Hazır Bir Çok Bileşen Bulunuyor..
- MUICore: Herkese ücretsiz sunulan temel birçok UI bileşeni bulunuyor.
- MUI X ise ileri düzey bileşen kütüphaneleri bulunuyor. ( DateTime Bileşenleri, DataGrid, Masonry, Timeline, TreeView) → Ücretli
- Templates kısmında hazır bileşenlerin layout yerleştirildiği template bulunuyor. → Ücretli..
- Design Kits kısmında ise bileşenleri tasarımlarını güncelleyebilmenizi sağlayacak bir araç bulunuyor → Ücretli.
Özetle en büyük yenilik TailwindCSS ve ChakraUI gibi tema taradında güçlü UI yapılarını yakalayacak kısımda yapılmış duruyor. Tabi altyapıda yapılan bir çok geliştirmeyi de unutmamak gerekiyor. React’ın en çok indirilen bileşen kütüphanesi olmayı hak ediyor.😀
Referanslar
- https://github.com/mui-org/material-ui/releases/tag/v5.0.0
- https://javascript.plainenglish.io/whats-new-in-material-ui-version-5-5ebfaea0eba6
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
