# Material-UI

<figure><img src="/files/XBtad9Iab1bboz51ljpq" alt=""><figcaption></figcaption></figure>

## Giriş

[**Material UI (MUI)**](https://mui.com/material-ui/), 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.

```bash
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ı

```jsx
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;
```

<figure><img src="/files/SVCb3cYDwxlZ068WhCny" alt=""><figcaption></figcaption></figure>

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

```jsx
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

```jsx
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;
```

<div align="center"><figure><img src="/files/UnLo1hHaAvgjnz7w1tdh" alt=""><figcaption></figcaption></figure></div>

<div align="center" data-full-width="false"><figure><img src="/files/dnaotBvn48drgfuyM82a" alt=""><figcaption></figcaption></figure></div>

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**](https://github.com/emrearikann) hocamızın yazmış olduğu [ReactJS Kancalar (Hooks)](https://docs.yavuzlar.org/yazilim/reactjs-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 )

```jsx
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;
```

<figure><img src="/files/SDvZ6dwrolVjYQi69BYF" alt=""><figcaption><p><strong>Dizüstü Bilgisayar Ekranı</strong></p></figcaption></figure>

<figure><img src="/files/02099kiSVAIFy8bKfYRH" alt=""><figcaption><p><strong>Biraz Daraltılmış Ekran</strong></p></figcaption></figure>

<figure><img src="/files/Ggjfu4Y5rWjS3NjrvUWB" alt=""><figcaption><p><strong>Yatay Tablet Ekranı</strong></p></figcaption></figure>

<figure><img src="/files/TptsCytdiUuxD7eeb8Jr" alt=""><figcaption><p><strong>Dikey Tablet Ekranı</strong></p></figcaption></figure>

<figure><img src="/files/GbLCG3TmUxWMhOoHWCEr" alt=""><figcaption><p><strong>Telefon Ekranı</strong></p></figcaption></figure>

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

```jsx
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;
```

<figure><img src="/files/cs7or904czKWHeODTOl1" alt=""><figcaption></figcaption></figure>

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

```jsx
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.

```jsx
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.

***

{% embed url="<https://github.com/mhmtbyzgl>" %}
Bu yazı Mahmut BEYAZGÜL tarafından hazırlanmıştır.
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.yavuzlar.org/yazilim/material-ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.