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.

https://mui.com/

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/Button

Tabi 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.

https://mui.com/system/the-sx-prop/

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ı.

Material UI Theme -> Custom Theme

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

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store