Yavuzlar
Ana sayfaTelegram
  • Yavuzlar
  • VulnLab
  • CodinLab
  • 📚EĞİTİM
    • PHP
      • XAMPP kurulumu
      • VS Code Kurulum
      • 1.0 PHP Nedir
      • 1.1 Dosya Oluşturma
      • 1.2 Syntax (Yazım Kuralları)
      • 1.3 PHP'de Echo ve Print
      • 1.4 PHP'deki yorumlar
      • 1.5 PHP Değişkenleri
      • 1.6 Operatörler (Operators)
      • 1.7 Veri Türünü Alma
      • 1.8 PHP'de String
      • 1.9 PHP'de Sabitler
      • 2.0 PHP'de If Else Elseif
      • 2.1 Switch Case
      • 2.2 PHP'de Döngüler
      • 2.3 PHP'de Diziler (Arrays)
      • 2.4 PHP'de Süper Global Değişkenleri
      • 2.5 PHP'de Cookie (Çerez) Ve Session (Oturum) Yöntemleri
      • 2.6 Form işlemleri
    • C++
      • 1.0 Temeller
        • 1.1 Dosya Oluşturma
        • 1.2 Syntax (Yazım Kuralları)
        • 1.3 Yorum Satırları
        • 1.4 C++ Değişkenleri
          • 1.4.1 Değişken Türleri
        • 1.5 Operatörler (Operators)
        • 1.6 Namespace
        • 1.7 Kullanıcı Girdisi (User Input)
        • 1.8 C++ Stringleri (C++ Strings)
        • 1.9 Matematik (Math) Fonksiyonları
        • 1.10 Booleans
        • 1.11 If Else
        • 1.12 Switch
        • 1.13 While Döngüsü
          • 1.13.1 Do While Döngüsü
        • 1.14 For Döngüsü
        • 1.15 Break/Continue
        • 1.16 Diziler
        • 1.17 Structures
        • 1.18 Enums
        • 1.19 References
        • 1.20 Pointers
      • 2.0 Fonksiyonlar
      • 3.0 Sınıflar
        • 3.1 OOP
        • 3.2 Sınıflar ve Objeler
        • 3.3 Sınıf Methodları
        • 3.4 Yapıcılar (Constructors)
        • 3.5 Erişim Belirleyicileri (Access Specifiers)
        • 3.6 Kapsülleme (Encapsulation)
        • 3.7 Inheritance
        • 3.8 Polimorfizm (Polymorphism)
        • 3.9 Dosyalar (Files)
        • 3.10 İstisnalar (Exceptions)
        • 3.11 Tarih ve Zaman (Date and Time)
      • 4.0 Veri Yapıları (Data Structures)
        • 4.1 Veri Yapıları ve STL
        • 4.2 Vektörler (Vectors)
        • 4.3 Listeler (Lists)
        • 4.4 Yığınlar (Stacks)
        • 4.5 Kuyruklar (Queues)
        • 4.6 Deque (Çift Uçlu Kuyruk)
        • 4.7 Küme (Set)
        • 4.8 Maps
        • 4.9 Iterator
        • 4.10 Algoritmalar
  • 🛠️ARAÇLAR
    • Aircrack-ng
    • Airgeddon
    • Arjun
    • BeEF
    • Bettercap
    • Docker
    • Gelişmiş Wireshark Kullanımı (Advanced Wireshark Usage)
    • Google Dorks
    • Hping3
    • John the Ripper
    • Metasploit Framework
    • Netcat
    • Nmap
    • OSINT Framework
    • PEASS-ng
    • Sublist3r
    • XSS Scanner
    • Wireshark
    • ZAP
    • HYDRA
  • 🖥️İŞLETİM SİSTEMLERİ
    • Linux101
    • MBR
  • 🔑KRİPTOLOJİ
    • Dijital Sertifika ve İmzalar
    • Sezar Şifrelemesi
    • Steganografi
    • Veri Şifreleme (Data Encryption)
  • 🔏Network
    • Domain Name Server (DNS)
    • Firewall Nedir? Nasıl Çalışır ?
    • Ortadaki Adam Saldırısı (Man In The Middle Attack)
    • OSI Modeli
    • Sanal Özel Ağlar (VPN)
    • World Wide Web (WWW)
  • 🔐PRIVILEGED
    • Docker Escape
  • 📨Protokoller
    • ARP
    • DHCP
    • FTP
    • HTTP/HTTPS
    • SSH
    • TCP/IP
    • UDP
    • Wİ-Fİ Güvenlik Protokolleri (WEP/WPA/WPA2/WPA3)
  • 💻SİBER TEHDİT İSTİHBARATI
    • Gelişmiş Siber Tehdit İstihbaratı Nedir?
  • 🔒WEB GÜVENLİĞİ
    • 403 ByPass
    • API Güvenliği (API Security)
    • Broken Access Control
    • Bulut Güvenliği (Cloud Security)
    • Command Injection
    • Cross Origin Resource Sharing
    • Cross Site Request Forgery (CSRF)
    • Cyber Kill Chain
    • DDoS Saldırıları
    • File Upload Zafiyeti Nedir?
    • HTTP Request Smuggling
    • Insecure Direct Object Reference (IDOR)
    • Incident Response
    • Local File Inclusion (LFI)
    • NoSQL Injection
    • Pentest 101
    • Race Condition
    • Server Side Request Forgery (SSRF)
    • Server Side Template Injection (SSTI)
    • Spring4Shell
    • Two Factor Authentication Bypass
    • XML External Entity Attack (XEE)
  • 🤖YAPAY ZEKA
    • ChatGPT for Hacking
    • Siber Güvenlik ve Yapay Zeka
    • Yapay Zeka ile Sahte Fotoğraf Tespiti
  • 🌐YAZILIM
    • Düzenli İfadeler (Regular Expressions)
    • Elasticsearch Nedir?
    • Front-end Teknolojileri
    • Golang'da Arayüzler (Interfaces)
    • Go'da Concurrency ve Uygulamaları
    • Güvenli Kodlama (Secure Coding)
    • Java Overloading vs Overriding
    • JSON Web Token (JWT)
    • Material-UI
    • NextJS Nedir?
    • ReactJS Kancalar (Hooks)
    • ReactJS Nedir?
    • Redux Toolkit
    • SOLID Yazılım Geliştirme Prensipleri
    • SQL 101
    • UI / UX Nedir?
    • Veri Taşıma Nedir? (Database Migration)
    • Versiyon Kontrol Sistemleri ve GIT
  • 🔷DİĞER
    • Bug Bounty (Hata Ödülü) Nedir?
    • Popüler Yazılımların Kurulumları
      • Ubuntu Server 24.04 LTS Kurulumu
      • Ubuntu için Güncel Docker Engine Kurlumu
    • Güvenlik Operasyonları Merkezi Nedir?
    • Honeypot (Bal Küpü)
    • IoT Güvenliği Nedir?
    • ShellShock Exploit
    • Yük Dengeleyici (Load Balancer) Nedir?
Powered by GitBook
On this page
  • Giriş
  • Material Design Nedir?
  • Material Design Temel Prensipleri
  • Material UI’nin Temel Özellikleri
  • Geniş Bileşen Kütüphanesi
  • Esneklik ve Özelleştirme
  • Duyarlı Tasarım ( Responsive Design )
  • Erişilebilirlik ( Accessibility )
  • Performans
  • Material UI ile Çalışmanın Avantajları
  • Material UI ile Proje Oluşturma
  • React Projesi Oluşturma:
  • Material UI Kurulumu
  • Material UI Bileşeni Kullanımı
  • Material UI ile İleri Seviye Kullanım
  • Dinamik Temalar
  • Duyarlı Tasarım ( Responsive Design )
  • Özel Bileşenler
  • Sonuç

Was this helpful?

  1. YAZILIM

Material-UI

PreviousJSON Web Token (JWT)NextNextJS Nedir?

Last updated 5 months ago

Was this helpful?

Giriş

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

Ö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;

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.


useState kancası hakkında bilgi sahibi değilseniz. hocamızın yazmış olduğu yazısını okumanızı şiddetle tavsiye ederim.

🌐
Emre ARIKAN
ReactJS Kancalar (Hooks)
Material UI (MUI)
mhmtbyzgl - OverviewGitHub
Bu yazı Mahmut BEYAZGÜL tarafından hazırlanmıştır.
Logo
Dizüstü Bilgisayar Ekranı
Biraz Daraltılmış Ekran
Yatay Tablet Ekranı
Dikey Tablet Ekranı
Telefon Ekranı