Açısal Malzeme
Material Design, Çince adı: Material Design Language, Google tarafından piyasaya sürülen yeni bir tasarım dilidir ve Google'ın belirttiği gibi, cep telefonları, tabletler, masaüstü bilgisayarlar ve "diğer platformlar" için daha tutarlı ve daha geniş bir "görünüm ve hiss" sağlamak amacıyla tasarlanmıştır.
Google'a göre, Materyal Tasarımı "gerçek dokunuşa dayanıyor, kağıt ve mürekkebin incelenmesinden ilham alıyor" ve kullanıcıların "gerçek dünyayı değiştiren görsel ipuçlarını anlamalarını" "mekanik ilkelerine aykırı olmadan" anlamağa olanak tanıyabiliyor. Ayrıca, ışık, yüzey ve hareketin temel prensipleri, nesnelerin birbirleriyle ilişkili olarak mekânda nasıl hareket ettiğini, etkileşime girdiğini ve var olduğunu temsil etmek için kilit öneme sahiptir. Gerçekçi ışık ve gölge efektleri bloklar arasındaki dikişleri gösterir, boşlukları ayırır ve hareketli parçaları işaretler. Daha ayrıntılı tanıtım için lütfen Materyal'in resmi web sitesini ziyaret edinBağlantı girişi görünür.。
Angular Materyal, Angular ekibi tarafından Materyal spesifikasyonuna ve resmi web sitesi adresine göre mükemmel şekilde uygulanan bir Angular2+ kullanıcı arayüzü çerçevesi setidir:Bağlantı girişi görünür.
Bu makale, Angular Material'ın MatSnackBar bileşenini bir uyarı kutusunu kapsüllemek için kullanıyor, önce renderlere bakalım:
Adım 1: Kurulum
Adım 2: Animasyonu yapılandırmak
Animasyon paketi yüklendikten sonra, animasyon desteğini etkinleştirmek için BrowserAnimationsModule'u uygulamanıza aktarın.
app.module.ts aşağıdaki gibi ithal edilir:
Adım 3: Temayı içe aktarın
Tüm temel ve tema stillerini uygulamanıza uygulamak için temaları dahil etmek gereklidir.
Hazır temalarla başlamak için, uygulamanıza Angular Material'ın önceden hazırlanmış temalarından birini küresel olarak ekleyin. Angular CLI kullanıyorsan, kurabilirsinstyles.scss için：
Eğer senKullanılmamıştırAçısal CLI, sonra<link>geçebilirUnsurlarınız önceden hazırlanmış tematik index.html içerir.
Adım 4: Uyarı kutusunu kapsüllemeye başlayın
/app/services dizinine cmd komut cd'sinden girin, dizini kendi projenize göre değiştirebilir ve Hizmet Yarat komutunu çalıştırabilirsiniz:
TS kodu şöyledir:
Adım 5: İstri kutusunu CSS tarzında yapılandırın
Projedestyles.scssDosyanın en altında, gerçek durumunuza göre değiştirilebilecek aşağıdaki stili ekleyin! Kod şöyledir:
Adım 6: Uyarı kutusunu kullanın
Giriş arayüzünü örnek olarak alıyorum ve login.module.tsAlert ServiceveMatSnackBarModülüBileşen modüller, aşağıdaki gibidir:
login.component.ts bileşende kullanılan kod şu şekildedir:
MatSnackBar bileşen API dokümantasyonu:Bağlantı girişi görünür.
(Son)
|
Yayınlandı 22.11.2018 15:00:49
|
|
|
|
