1. Giriş
Materyal Bileşenleri (MDC), geliştiricilerin Materyal Tasarım'ı uygulamasına yardımcı olur. Google'da mühendislerden ve kullanıcı deneyimi tasarımcılarından oluşan bir ekip tarafından oluşturulan MDC, onlarca güzel ve işlevsel kullanıcı arayüzü bileşeni içerir. Ayrıca Android, iOS, web ve Flutter.material.io/develop'da kullanılabilir. |
MDC-101 ve MDC-102 codelab'lerinde, kıyafet ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulamanın temellerini oluşturmak için Malzeme Bileşenleri'ni (MDC) kullandınız. Bu uygulamanın kullanıcı işlemleri akışı bir giriş ekranıyla başlar ve ardından kullanıcıyı ürünlerin bulunduğu bir ana ekrana yönlendirir.
Materyal Tasarım, tasarımcılara ve geliştiricilere ürünlerinin markalarını ifade etmeleri için daha fazla esneklik sunmak üzere yakın zamanda genişletildi. Bu kod laboratuvarında Shrine uygulamasını, markanın benzersiz tarzını her zamankinden daha farklı şekillerde özelleştirmek için MDC'yi kullanacaksınız.
Oluşturacaklarınız
Bu codelab'de Shrine'ı markasını yansıtacak şekilde özelleştirmek için şunları kullanacaksınız:
- Renk
- Yazı biçimi
- Rakım
- Şekil
- Düzen
Bu codelab'de kullanılan MDC web bileşenleri ve alt sistemleri
- Tema
- Yazı biçimi
- Rakım
- Resim listesi
Gerekenler
- Node.js'nin yeni bir sürümü (JavaScript paket yöneticisi olan npm ile birlikte gelir).
- Örnek kod (sonraki adımda indirilecektir)
- Temel HTML, CSS ve JavaScript bilgisi
Web geliştirme konusundaki deneyim düzeyinizi nasıl değerlendirirsiniz?
2. Geliştirme ortamınızı ayarlama
MDC-102'den mi devam ediyorsunuz?
MDC-102'yi tamamladıysanız kodunuz bu codelab'de kullanılmaya hazır olmalıdır. 3. adıma (Rengi değiştirme) atlayın.
Starter codelab uygulamasını indirin
Başlangıç uygulaması material-components-web-codelabs-master/mdc-103/starter dizininde bulunur. Başlamadan önce bu dizine cd eklediğinizden emin olun.
...veya GitHub'dan klonlayın
Bu codelab'i GitHub'dan klonlamak için şu komutları çalıştırın:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-103/starter
Proje bağımlılıklarını yükleme
material-components-web-codelabs/mdc-103/starter başlangıç dizininden (yukarıdaki adımı uygulamanız durumunda bu dizin geçerli dizininiz olmalıdır) aşağıdaki komutu çalıştırın:
npm install
Çok fazla etkinlik göreceksiniz ve son olarak terminalinizde başarılı bir yükleme gösterilecektir:
Başlangıç uygulamasını çalıştırma
Aynı dizinde şu komutu çalıştırın:
npm start
webpack-dev-server başlar. Sayfayı görmek için tarayıcınızda http://localhost:8080/ adresine gidin.
Başarıyla gerçekleştirildi. Tarayıcınızda Shrine'ın giriş sayfası çalışıyor olmalıdır. Kullanıcı Adı ve Parola alanlarını doldurun ve "İleri"yi tıklayın ana sayfaya gitmek için düğmeyi kullanın. Sol tarafta, ürün resimleri tablosunun yanında bir gezinme çekmecesi gösterilmelidir.
Gezinme çekmecesi çalışıyor olsa da rengini, yüksekliğini ve tipografisini değiştirerek tapınak markasıyla uyumlu hale getirelim.
3. Rengi değiştirin
Bu renk teması, bir tasarımcı tarafından özel renklerle oluşturulmuştur (aşağıdaki resimde gösterilmektedir). Shrine'ın markasından seçilen ve daha zengin bir palet oluşturacak şekilde genişletilen Materyal Tema Düzenleyici'ye uygulanan renkler içerir. (Bu renkler, 2014 Malzeme renk paletlerinden alınmamıştır.)
Shrine uygulamasının gezinme çekmecesinin rengini, ilgili renk şemasını yansıtacak şekilde değiştirelim.
Tema renklerini geçersiz kılma
Şunları içeren _variables.scss adlı yeni bir dosya oluşturun:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;
Ardından, etiketi _common.scss öğesinin en üstüne aktarın:
@import "./variables";
Gezinme çekmecesine CSS stili ekleme
home.scss adresinde, mevcut içe aktarma işlemlerinden sonra aşağıdaki import ifadesini ekleyin:
@import "@material/ripple/mixins";
Ardından, .shrine-drawer sınıfını oluşturarak aşağıdaki stilleri ekleyin:
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}
http://localhost:8080/home.html adresinden sayfayı yenileyin. Ana ekranınız artık şu şekilde görünmelidir:
Giriş ekranının rengini, renk şemamıza uyacak şekilde değiştirelim.
Giriş sayfasına CSS stili ekleme
login.scss alanına aşağıdaki satırları ekleyin:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}
Ayrıca, .username, .password CSS seçiciye şu mix çağrılarını ekleyin:
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}
http://localhost:8080/ adresinden sayfayı yenileyin. Giriş ekranınız artık şu şekilde görünmelidir:
4. Tipografi ve etiket stillerini değiştirme
Tasarımcınız, renk değişikliklerine ek olarak, sitede kullanacağınız belirli bir yazı biçimi de sağladı. Bunu da gezinme çekmecesine ekleyelim.
Tipografi paketini yüklemek için şu komutu çalıştırın:
npm install @material/typography
Yazı biçimi için CSS'yi ekleme
home.scss aracında, mevcut içe aktarma işlemlerinden sonra aşağıdaki içe aktarma deyimini ekleyin:
@import "@material/typography/mdc-typography";
Ardından shrine-title sınıfına aşağıdaki mixin çağrısını ekleyin:
.shrine-title {
@include mdc-typography(headline6);
...
}
Sonra, çekmece öğelerini biçimlendirelim.
Satır ayırıcı ekleme
home.html içinde, aşağıdakileri <a ...>Featured</a> öğesinin hemen arkasına ekleyin:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
Şu stilleri home.scss içine ekleyin:
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}
Resim öğelerini ve etiketleri ayarlama
Öğeleri ve etiketleri ayarlamak için .product-list seçicisi içinde home.scss öğesine aşağıdaki stilleri ekleyin:
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}
Sayfayı yenileyin. Ana ekranınız artık şu şekilde görünmelidir:
5. Rakımı ayarla
Artık Shrine'ın kendi renklerini ve yazılarını kullanarak sayfanın stilini belirlediğinize göre Shrine'ın ürünlerini gösteren resim listesine bakalım. Ürünleri daha vurgulayarak dikkat çekelim.
Elevation paketini yüklemek için şu komutu çalıştırın:
npm install @material/elevation
İçe aktarma beyanını ekleme
home.scss dilinde, son içe aktarma ifadesinden sonra aşağıdaki satırı ekleyin:
@import "@material/elevation/mdc-elevation";
Resim listesini yeni bir div ile sarmalama
home.html içinde, <ul> öğesinin etrafına aşağıdaki işaretlemeyi ekleyin:
<div class="shrine-body">
<ul...>
</div>
Sass karışımlarını kullanarak yüksekliği değiştirme
home.scss alanına aşağıdakileri ekleyin:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}
Etkileyici! Resim listesi öğelerinin arkasındaki beyaz yüzeyin sol kenarına, gezinmenin biraz üzerinde kayan gibi görünen bir gölge eklediniz.
6. Düzeni değiştirme
Şimdi de düzeni, resimleri farklı en boy oranlarında ve boyutlarda gösterecek şekilde değiştirelim. Böylece, her resim diğerlerine göre benzersiz görünür.
HTML'yi değiştirme
home.html öğesinde, mdc-image-list öğesini mdc-image-list--masonry sınıfını içerecek şekilde güncelleyin:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
Resim ekleme
home.html ürününde her img öğesinin src özelliğini, assets klasöründe bulunan resimlerle eşleşecek şekilde değiştirin. Ardından, her görselin etiket metnini güncelleyin. Tamamlandığında, kod aşağıdaki gibi görünecektir:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>
CSS'yi güncelleme
home.scss içinde mdc-image-list-standard-columns(4) mix'ini kaldırın ve şu mix'le değiştirin:
@include mdc-image-list-masonry-columns(4);
Ardından şu padding değerlerini home.scss içindeki product-list sınıfına ekleyin:
.product-list {
...
padding: 80px 100px 0;
}
Kodunuz artık complete/ klasöründe yer alan kodla eşleşmelidir.
7. Başka bir tema deneyin
Renk, markanızı ifade etmenin güçlü bir yoludur ve renkteki küçük bir değişiklik kullanıcı deneyiminizi büyük ölçüde etkileyebilir. Bunu test etmek için markanın renk şeması tamamen farklı olsaydı Shrine'ın nasıl görüneceğine bakalım.
CSS'yi değiştirme
_variables.scss ürününde, birincil tema için bildirdiğiniz değişkenleri aşağıdakilerle değiştirin:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;
login.scss konumunda, .username, .password seçicideki mix'leri kaldırın. Aşağıdaki gibi görünecektir:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
Ayrıca, .cancel sınıfındaki mdc-button-ink-color mix'i geçersiz kılmasını kaldırın:
home.scss uygulamasında .home sınıfına aşağıdaki kuralı ekleyin:
background-color: $mdc-theme-background;
.shrine-logo-drawer seçici içinde, fill özelliğini birincilde rengiyle değiştirin:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}
Benzer şekilde, .shrine-title seçicisinde color özelliğini birincilde rengi olarak ayarlayın:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Son olarak, daha önce .shrine-body seçicisinin altında kullanılan mdc-elevation mix'ini kaldırın.
Derleyin ve çalıştırın. Yeni tema artık tarayıcınızda görünecektir.
Şimdi, home.html sayfasındaki değişiklikleri görmek için http://localhost:8080/home.html adresine gidin.
8. Özet
Tasarımcınızın özelliklerine benzeyen bir uygulama oluşturdunuz.
Sonraki adımlar
Bu aşamada şu MDC bileşenlerini kullandınız: tema, tipografi, yükseklik ve şekil. MDC Web Kataloğu'nda daha fazla bileşen ve alt sistem keşfedebilirsiniz.