Material-UI

Giriş

Material UI (MUI), Google'ın Material Design prensiplerine dayanan, popüler bir React bileşen kütüphanesidir. Geliştiricilere, modern ve kullanıcı dostu web arayüzleri oluşturmak için kapsamlı ve esnek araçlar sunar. Material UI, kullanıcı deneyimini iyileştirirken geliştirme sürecini hızlandırır ve kolaylaştırır.

---

Material Design Nedir?

Material Design, 2014 yılında Google tarafından tanıtılan bir tasarım dilidir. Dijital dünyada daha sezgisel ve tutarlı kullanıcı deneyimleri yaratmak amacıyla geliştirilmiştir. Material Design, gerçek dünyadaki fiziksel özellikleri ve hareketleri dijital ortamda yansıtarak kullanıcıların doğal etkileşimlerde bulunmalarını sağlar.

Material Design Temel Prensipleri

• Materyal Metaforu: Dijital elemanların fiziksel dünyadaki nesnelere benzer şekilde davranmasıdır.

• Cesur, Grafik, Amaçlı: Renkler, kenarlıklar ve tipografi ile güçlü ve anlamlı bir görsel dil oluşturmadır.

• Hareket ve Anlam: Kullanıcıların eylemlerine yanıt veren doğal animasyonlar ve geçişlerdir.

---

Material UI’nin Temel Özellikleri

Geniş Bileşen Kütüphanesi

• Butonlar, Kartlar, Diyalog Kutuları: MUI, uygulamalarınızda hemen kullanabileceğiniz çok çeşitli bileşenler sunar. Her bileşen, Material Design spesifikasyonlarına uygun olarak tasarlanmıştır.

• İkonlar ve İmajlar: Material UI, Google Material Icons ile entegrasyona sahiptir, bu da projelerinizde yüksek kaliteli ikonlar kullanmanıza olanak tanır.

Esneklik ve Özelleştirme

• Temalar: Material UI, temalar oluşturmanıza ve bileşenlerinizi bu temalara göre özelleştirmenize olanak tanır. Renk paletleri, tipografi ve diğer stil öğeleri üzerinde tam kontrol sağlar.

• Stil Özelleştirme: Her bileşen, CSS'in JavaScript yaklaşımıyla değiştirilebilir. Bu, bileşenlerin stilini doğrudan JavaScript kodu içinde tanımlamanıza olanak tanır.

Duyarlı Tasarım ( Responsive Design )

• Grid Sistemi: MUI, duyarlı tasarımı kolaylaştıran esnek bir grid sistemine sahiptir. Farklı cihaz ve ekran boyutları için optimize edilmiştir.

• Breakpoints: Breakpoint API'si ile ekran boyutlarına göre düzenlemeler yapabilir ve farklı cihazlarda tutarlı bir kullanıcı deneyimi sağlayabilirsiniz.

Erişilebilirlik ( Accessibility )

• ARIA Etiketleri: Material UI, erişilebilirlik standartlarına uyum sağlamak için ARIA etiketlerini destekler. Bu, engelli kullanıcılar için daha erişilebilir uygulamalar oluşturmanıza yardımcı olur.

• Klavye Navigasyonu: Tüm bileşenler klavye ile gezinmeyi destekler, bu da erişilebilirlik açısından önemli bir avantajdır.

Performans

• Kod Bölme (Code Splitting): Material UI, uygulamanızın performansını artırmak için kod bölme tekniklerini destekler. Bu, yalnızca gerekli bileşenlerin yüklenmesini sağlar.

• Dinamik Yükleme: Gerektiğinde bileşenlerin dinamik olarak yüklenmesini sağlar, bu da başlangıç yükleme sürelerini azaltır.

---

Material UI ile Çalışmanın Avantajları

• Hızlı Prototipleme: Hazır bileşenler ve temalar sayesinde fikirlerinizi hızlıca hayata geçirebilir, prototipler oluşturabilirsiniz.

• Tutarlılık: Material Design prensiplerine dayandığı için, uygulamanızda tutarlı ve profesyonel bir görünüm sağlar. Kullanıcılar, tanıdık bir arayüzde daha rahat hissederler.

• Topluluk ve Destek: Material UI, geniş ve aktif bir topluluğa sahiptir. Bu topluluk, sürekli olarak kütüphaneye katkıda bulunur, sorunları çözer ve yeni özellikler ekler.

• Kapsamlı Dokümantasyon: Material UI, kapsamlı ve anlaşılır bir dokümantasyon sunar. Bu, yeni başlayanlar için öğrenmeyi kolaylaştırırken deneyimli geliştiriciler için de referans sağlar.

---

Material UI ile Proje Oluşturma

Material UI ile çalışmaya başlamak oldukça basittir. Aşağıda bu aşamaları adım adım incelebilirsiniz.

React Projesi Oluşturma:

Aşağıdaki kodu terminalinizde çalıştırarak bir react projesi oluşturabilirsiniz.

npx create-react-app my-material-ui-app
cd my-material-ui-app

Material UI Kurulumu

Aşağıdaki kodu terminalinizde çalıştırarak Material UI'ı projenize ekleyebilirsiniz.

npm install @mui/material @emotion/react @emotion/styled

Material UI Bileşeni Kullanımı

import React from "react";
import Button from "@mui/material/Button";
import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
    secondary: {
      main: "#dc004e",
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Button variant="contained" color="primary">
          Merhaba Dünya
        </Button>
      </div>
    </ThemeProvider>
  );
}

export default App;

Yukarıdaki örnekte bir Material UI bileşenini projemizde nasıl kullanılabileceğini görebilmekteyiz. Bu örneği biraz incelersek öncelikle buton bileşenini kullanabilmemiz için

import Button from "@mui/material/Button";

ile butonu import etmemiz gerekmektedir. İçerisinde Merhaba Dünya yazan basit bir buton bileşenini ve o bileşenin tema özelleştirmesinin yapıldığını görebiliriz. Bu sayede projenize özgü istediğiniz renk kombinasyonunu ve stilleri oluşturabilirsiniz. Hadi şimdi de biraz daha ileri seviye örneklere göz atalım. ;)

---

Material UI ile İleri Seviye Kullanım

Material UI'nin sunduğu gelişmiş özellikler ve araçlarla daha karmaşık ve profesyonel projeler, uygulamalar veya stiller geliştirebilirsiniz.

Dinamik Temalar

import React, { useState } from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Button from "@mui/material/Button";

function App() {
  const [darkMode, setDarkMode] = useState(false);

  const theme = createTheme({
    palette: {
      mode: darkMode ? "dark" : "light",
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <div>
        <Button variant="contained" onClick={() => setDarkMode(!darkMode)}>
          {darkMode ? "Açık Mod" : "Koyu Mod"}
        </Button>
      </div>
    </ThemeProvider>
  );
}

export default App;

Mesela yukarıdaki örnekte dinamik bir tasarım görmekteyiz. Peki bu örnekte ne var??? Burada görmüş olduğumuz örnekte yine bir adet buton yer almakta fakat bu buton ilk örnekteki butondan farklı bu fark nedir dediğinizi duyar gibiyim. Burada useState kancasını kullanarak butonun içerisindeki yazıyı dinamik olarak değiştirebiliyoruz.

useState kancası hakkında bilgi sahibi değilseniz. Emre ARIKAN hocamızın yazmış olduğu ReactJS Kancalar (Hooks) yazısını okumanızı şiddetle tavsiye ederim.

Örneğimize dönecek olursak kodumuz ilk çalıştığında darkMode özelliği false olarak geliyor ve butonun içerisinde Koyu Mod yazıyor. Butona tıkandığında onClick fonksiyonu ile darkMode özelliği aktifleşiyor ve darkMode aktif iken butonumuzun içerisindeki yazı Açık Mod yazısına dönüyor. Butona her tıklamamızda koyu mod ile açık mod arasında geçiş oluyor.

---

Duyarlı Tasarım ( Responsive Design )

import React from "react";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";

function ResponsiveLayout() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>1</Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>2</Paper>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <Paper>3</Paper>
      </Grid>
    </Grid>
  );
}

export default ResponsiveLayout;

Dizüstü Bilgisayar Ekranı

Biraz Daraltılmış Ekran

Yatay Tablet Ekranı

Dikey Tablet Ekranı

Telefon Ekranı

Bu örneğimizde Grid yapısını çok detayına girmeden inceleyeceğiz.

Grid container spacing={2}:

• container: Grid bileşeninin bir konteyner olduğunu belirtir. Bu, içerisindeki Grid item'larını düzenlemek için kullanılır.

• spacing={2}: Grid öğeleri arasında 2 birimlik boşluk oluşturur. Bu değer, Material-UI'nin tema ölçütlerine göre belirlenir.

Grid item xs={12} sm={6} md={4}:

• item: Bu, grid sisteminde bir öğe olduğunu belirtir.

• xs={12}: Bu öğenin, ekstra küçük ekranlarda (telefon gibi) 12 kolon (tam genişlik) kaplayacağını belirtir.

• sm={6}: Bu öğenin, küçük ekranlarda (tablet gibi) 6 kolon (yarım genişlik) kaplayacağını belirtir.

• md={4}: Bu öğenin, orta büyüklükte ekranlarda (dizüstü bilgisayar gibi) 4 kolon (üçte bir genişlik) kaplayacağını belirtir.

Bu mantık, öğelerin ekran boyutuna göre nasıl davranacağını belirler ve duyarlı bir düzen oluşturur. Ekran boyutu değiştikçe, bu öğelerin genişlikleri değişir. Ekstra küçük ekranlarda her bir öğe tam genişlik kaplarken, küçük ekranlarda yarım genişlik ve orta ekranlarda üçte bir genişlik kaplar. Bu yapı, farklı ekran boyutlarına uyum sağlayarak duyarlı bir kullanıcı arayüzü oluşturur.

---

Özel Bileşenler

import React from "react";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";

const MyButton = styled(Button)({
  background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
  border: 0,
  borderRadius: 3,
  boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
  color: "white",
  height: 48,
  padding: "0 30px",
});

function CustomButton() {
  return <MyButton>Özel Buton</MyButton>;
}

export default CustomButton;

Bu kod yukarıda demin bahsettiğim özel renk kombinasyonları veya stilleri oluşturabilirsiniz söylemime bir örnektir. Özel bir stil tasarlayabilmemiz için Material UI'dan

import { styled } from "@mui/material/styles";

ile styled eklememiz faydalı olacaktır.

• styled(Button): Material-UI'nın Button bileşenini alır ve ona özel stil uygular.

• background: 45 derece eğimli bir renk geçişi uygulanır, renkler #FE6B8B ve #FF8E53 arasında geçiş yapar.

• border: 0 ile kenarlık var ise kaldırılır.

• borderRadius: Köşeleri yarıçapı 3 piksel olacak şekilde yuvarlatılmıştır.

• boxShadow: Düğmenin altında bir gölge efekti uygulanır, gölgenin rengi ve opaklığı belirtilmiştir.

• color: Yazı rengi beyaz seçilmiştir.

• height: Düğmenin yüksekliği 48 pikseldir.

• padding: Düğmenin yatay iç boşlukları 30 piksel olarak ayarlanmıştır.

function CustomButton() {
  return <MyButton>Özel Buton</MyButton>;
}

ile

• CustomButton fonksiyonu, özelleştirilmiş MyButton bileşenini döndürür.

• MyButton bileşeni içinde Özel Buton yazısı bulunur.

Sonuç olarak bu örnekte Material-UI'nın standart düğme bileşenine özel bir stil vererek, amaç daha dikkat çekici ve kullanıcı dostu bir düğme oluşturmaktır.

---

Sonuç

Material UI, web geliştirme dünyasında önde gelen bir araçtır. Geniş bileşen kütüphanesi, esnek özelleştirme seçenekleri ve kullanıcı dostu arayüzleriyle projelerinizi hızla ve etkili bir şekilde geliştirebilirsiniz. Material UI'nin sunduğu modern tasarım trendleri ve erişilebilirlik özellikleri, uygulamalarınızın kullanıcı deneyimini önemli ölçüde artırır. Dolayısıyla, Material UI kullanarak geliştirdiğiniz uygulamalar, rakiplerinizden sıyrılmanıza ve kullanıcılarınızı etkilemenize yardımcı olabilir.

---

mhmtbyzgl - OverviewGitHub

Bu yazı Mahmut BEYAZGÜL tarafından hazırlanmıştır.