Angular Material

Genel Bakış

Angular Material, Google'ın Material Design'ını Angular uygulamalarına getiren resmi bileşen kütüphanesidir. GitHub'da barındırılan açık kaynaklı bir proje olarak, 12 aktif dalda 2.200'den fazla commit, 21 kararlı sürüm ve dünya çapında 180'den fazla geliştiricinin katkısı birikmiştir. Kütüphane, erişilebilirlik, duyarlılık ve performans göz önünde bulundurularak oluşturulmuş zengin bir UI öğeleri seti—düğmeler, iletişim kutuları, veri tabloları, araç ipuçları ve daha fazlası—sunur. Material Design yönergelerine bağlı kalarak, Angular Material geliştiricilerin tutarlı bir görsel dil sunmasını sağlar ve özel stil ve düzen çalışmalarına harcanan zamanı azaltır. Proje tamamen ücretsiz olarak indirilebilir ve topluluk odaklı yol haritası düzenli güncellemeler, hata düzeltmeleri ve yeni bileşenler garantiler. İster basit bir gösterge paneli ister karmaşık bir kurumsal portal inşa ediyor olun, Angular Material, Angular'ın reaktif formları, yönlendirme ve değişim algılama mekanizmalarıyla sorunsuz entegrasyon sağlayan güvenilir, güvenli ve iyi belgelenmiş bir araç seti sunar.

Ana Özellikler ve Temel Yetkinlikler

• Material uyumlu bileşenler: En son Material Design spesifikasyonlarını takip eden 40'tan fazla önceden stil verilmiş UI öğesi.
• Duyarlı düzen sistemi: Mobilden masaüstüne her ekran boyutuna uyum sağlayan flex‑layout yardımcıları ve kırılma noktasına duyarlı bileşenler.
• Erişilebilirlik (A11y) yerleşik: Klavye navigasyonu, ARIA öznitelikleri ve ekran okuyucu desteği her bileşene entegre edilmiştir.
• Temalandırma motoru: Özel paletler, karanlık mod ve CSS değişkenleriyle dinamik temalandırma, marka entegrasyonunu kolaylaştırır.
• Angular CDK ile entegrasyon: Sürükle‑bırak, örtü ve kaydırma gibi düşük seviyeli yardımcılar, birçok Material bileşenini güçlendirir.
• Uluslararasılaştırma (i18n): Yerel tarih, sayı ve metin biçimlendirmesi için yerleşik destek.
• Kapsamlı dokümantasyon: Öğrenmeyi hızlandıran etkileşimli rehberler, API referansı ve StackBlitz örnekleri.
• Performansa odaklı mimari: Paket boyutunu minimumda tutmak için tembel yükleme, ağaç‑sarsılabilir modüller ve on‑push değişim algılama.

Kurulum, Yapılandırma ve Günlük Kullanım

Adım Adım Kurulum

Angular Material ile başlamak basittir. Terminalinizi açın ve Angular CLI komutunu çalıştırın:

ng add @angular/material

CLI, önceden hazırlanmış bir tema seçmenizi, global tipografi stillerini ayarlamanızı ve jest desteği için HammerJS'yi etkinleştirmenizi isteyecektir. Bu işlem, angular.json dosyanızı otomatik olarak günceller, gerekli BrowserAnimationsModule öğesini ekler ve gereken npm paketlerini kurar.

Temel Yapılandırma

Kurulumdan sonra, istediğiniz bileşen modüllerini özellik modülünüze içe aktarın. Örneğin, bir düğme ve bir araç çubuğu kullanmak için:

import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  imports: [MatButtonModule, MatToolbarModule]
})
export class SharedModule { }

Özel bir tema seçtiyseniz, Material tema CSS'ini styles.scss dosyanıza eklemeyi unutmayın:

@import '~@angular/material/theming';
@include mat-core();

$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

Tipik Geliştirme İş Akışı

Kütüphane kurulduğunda, Angular'ın deklaratif şablonlarını kullanarak UI bileşenleri oluşturmaya başlayabilirsiniz. Yaygın bir desen, mat-form-field öğesini reaktif formlarla birleştirerek doğrulama mesajlarının tutarlı bir şekilde gösterilmesini sağlamaktır. Angular Material dokümantasyonu, her bileşen için tarayıcınızdan çıkmadan color, appearance ve disabled gibi özelliklerle deneme yapmanıza olanak tanıyan canlı bir StackBlitz editörü sunar. Stil özelleştirmeniz gerektiğinde, temalandırma sistemi SCSS değişkenlerini geçersiz kılmanıza veya temel bileşen mantığını bozmadan özel CSS sınıfları uygulamanıza izin verir.

Uyumluluk, Artıları ve Eksileri

Angular Material, saf bir JavaScript/TypeScript kütüphanesidir ve Angular çalıştırabilen herhangi bir platformda—Windows, macOS, Linux, Android ve iOS—modern bir web tarayıcısı (Chrome, Edge, Firefox, Safari) ve ES2015+ özelliklerini desteklediği sürece çalışır.

Artılar

• Ücretsiz, açık kaynaklı ve büyük bir topluluk tarafından düzenli olarak güncellenir.
• Material Design ile tam uyum, modern bir görünüm ve his sağlar.
• Kullanıma hazır mükemmel erişilebilirlik desteği.
• Marka tutarlılığı için yüksek derecede özelleştirilebilir temalandırma sistemi.
• Angular CLI, CDK ve reaktif formlarla sorunsuz entegrasyon.
• Kapsamlı dokümantasyon ve aktif StackOverflow topluluğu.

Eksiler

• Material Design kavramlarına yeni gelen geliştiriciler için öğrenme eğrisi.
• Ağaç‑sarsım olmadan çok sayıda bileşen içe aktarılırsa paket boyutu artabilir.
• Angular sürüm uyumluluğuna yüksek bağımlılık; büyük Angular yükseltmeleri kütüphane güncellemeleri gerektirebilir.
• Özel stil bazen derin CSS geçersiz kılmalarını gerektirir ve bu da ayrıntılı olabilir.

Sıkça Sorulan Sorular

Angular Material, ticari projelerde kullanmak için ücretsiz mi?

Evet. Angular Material, MIT lisansı altında yayınlanmıştır; bu lisans, ticari uygulamalar dahil olmak üzere sınırsız kullanım, değiştirme ve dağıtım izni verir ve herhangi bir lisans ücreti talep etmez.

En son Angular Material sürümü hangi Angular sürümlerini destekliyor?

Angular Material'ın mevcut kararlı sürümü, Angular 16 ve üzerini destekler. Her büyük sürüm, ilgili Angular çekirdek sürümüyle eşleşir ve geriye dönük uyumluluk en az bir büyük Angular sürümü boyunca korunur.

Varsayılan Material temasını özelleştirebilir miyim?

Kesinlikle. Angular Material, birincil, vurgu ve uyarı paletlerini tanımlamanıza, ışık ve karanlık modlar arasında geçiş yapmanıza ve hatta çalışma zamanında değiştirilebilen birden fazla tema oluşturmanıza olanak tanıyan SCSS tabanlı bir temalandırma API'si sunar.

Angular Material erişilebilirliği nasıl yönetir?

Tüm bileşenler ARIA öznitelikleri, klavye navigasyonu ve ekran okuyucu desteğiyle inşa edilmiştir. Kütüphane, WAI‑ARIA Yazar Pratiklerini takip eder ve dokümantasyon, bileşenleri genişletirken erişilebilirliği korumak için geliştiricilere yönergeler sunar.

Angular Material'ı güncel tutmanın en iyi yolu nedir?

Angular CLI komutunu kullanın ng update @angular/material. Bu komut, en son uyumlu sürümü kontrol eder, gerekli geçişleri uygular ve package.json dosyasını otomatik olarak günceller. GitHub'daki CHANGELOG'u düzenli olarak incelemek, kırılma değişikliklerini önceden görmenize yardımcı olur.

Sonuç ve Eylem Çağrısı

Angular Material, çarkı yeniden icat etmeden şık bir Material‑design görünümü isteyen Angular geliştiricileri için en olgun ve iyi desteklenen UI kütüphanesi olarak öne çıkar. Geniş bileşen paketi, güçlü erişilebilirlik odaklı yapısı ve esnek temalandırması, küçük prototiplerden büyük ölçekli kurumsal uygulamalara kadar her şey için ideal bir seçim yapar. Kütüphaneyi ücretsiz indirerek, canlı bir topluluğa, sürekli güvenlik güncellemelerine ve en yeni tasarım trendlerini yansıtan bir yol haritasına erişim sağlarsınız. UI geliştirme sürecinizi hızlandırmaya hazırsanız, Angular Material'ı bugün entegre edin, önceden hazırlanmış temalarla denemeler yapın ve modern, duyarlı ve kutudan çıktığı gibi erişilebilir uygulamalar inşa etmeye başlayın.

Şimdi Angular Material'ı İndir ve bu aracı güvenli, yüksek performanslı ve güncel tutan 180'den fazla katkıda bulunanla birlikte olun.

Hızlı İnceleme Özeti

• Artılar: Ücretsiz, zengin bileşen seti, sağlam temalandırma, güçlü erişilebilirlik, düzenli güncellemeler.
• Eksiler: Yeni başlayanlar için öğrenme eğrisi, olası paket boyutu etkisi.