Material Bileşenleri (MDC), geliştiricilerin Material Design'ı uygulamasına yardımcı olur. Google'daki bir mühendis ve kullanıcı deneyimi tasarımcısı ekibi tarafından oluşturulan MDC, düzinelerce güzel ve işlevsel kullanıcı arayüzü bileşeni içerir ve Android, iOS, web ve Flutter için kullanılabilir. material.io/develop |
MDC-101 ve MDC-102 adlı codelab'lerde, giyim ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı uygulamanın temelini oluşturmak için Material Components'ı (MDC) kullandınız. Bu uygulamanın kullanıcı akışı, giriş ekranıyla başlar ve kullanıcıyı ürünlerin bulunduğu bir ana ekrana yönlendirir.
Material Design, kısa süre önce tasarımcıların ve geliştiricilerin ürünlerinin markasını ifade etme konusunda daha fazla esneklik kazanması için genişletildi. Bu kod laboratuvarında, Shrine uygulamasını markanın benzersiz stilini yansıtacak şekilde özelleştirmek için MDC'yi kullanacaksınız.
Ne oluşturacaksı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 son sürümü (JavaScript paket yöneticisi olan npm ile birlikte gelir).
- Örnek kod (sonraki adımda indirilecek)
- HTML, CSS ve JavaScript hakkında temel bilgi
Web geliştirme alanındaki deneyim seviyenizi nasıl değerlendirirsiniz?
MDC-102'den devam mı ediyorsunuz?
MDC-102'yi tamamladıysanız kodunuz bu codelab'de kullanıma hazır olmalıdır. 3. adıma (Rengi değiştirin) geçin.
Başlangıç Codelab uygulamasını indirin
Başlangıç uygulaması, material-components-web-codelabs-master/mdc-103/starter dizininde bulunur. Başlamadan önce bu dizine cd olduğunuzdan emin olun.
...veya GitHub'dan kopyalayın
Bu codelab'i GitHub'dan klonlamak için aşağıdaki 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
Başlangıç dizininden material-components-web-codelabs/mdc-103/starter (yukarıdaki adımı uyguladıysanız mevcut dizininiz olmalıdır) şunu çalıştırın:
npm install
Çok sayıda etkinlik görürsünüz ve sonunda terminalinizde başarılı bir yükleme gösterilir:
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ızı http://localhost:8080/ adresine yönlendirin.
Başarılı aktarım Tarayıcınızda Shrine'ın giriş sayfasının çalıştığını görmelisiniz. Kullanıcı adı ve şifre alanlarını doldurun, ana sayfaya gitmek için "İleri" düğmesini tıklayın. Sol tarafta, ürün resimlerinin bulunduğu bir tablonun yanında gezinme çekmecesi gösterilmelidir.
Gezinme çekmecesi işlevsel olsa da rengini, yüksekliğini ve tipografisini değiştirerek Shrine markasına uygun hale getirelim.
Bu renk teması, özel renkler (aşağıdaki resimde gösterilmiştir) kullanan bir tasarımcı tarafından oluşturulmuştur. Bu tema, Shrine'ın markasından seçilen ve Materyal Tema Düzenleyici'ye uygulanan renkleri içerir. Materyal Tema Düzenleyici, bu renkleri genişleterek daha kapsamlı bir palet oluşturur. (Bu renkler 2014 Materyal renk paletlerinden alınmamıştır.)
Shrine uygulamasının gezinme çekmecesinin rengini bu renk şemasını yansıtacak şekilde değiştirelim.
Tema renklerini geçersiz kılma
Aşağıdakileri 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, _common.scss'nın en üst kısmından içe aktarın:
@import "./variables";Gezinme çekmecesine CSS stili ekleme
home.scss dosyasında, mevcut içe aktarmaların ardından aşağıdaki içe aktarma 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 adresindeki sayfayı yenileyin. Ana ekranınız artık aşağıdaki gibi görünmelidir:
Giriş ekranının rengini, renk şemamıza uygun şekilde değiştirelim.
Giriş sayfasına CSS stili ekleme
login.scss bölümüne 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çicisinin içine aşağıdaki mixin ç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/ adresindeki sayfayı yenileyin. Giriş ekranınız aşağıdaki gibi görünmelidir:
Tasarımcınız, renk değişikliklerinin yanı sıra sitede kullanmanız için belirli bir tipografi de belirledi. Bunu da gezinme çekmecesine ekleyelim.
Tipografi paketini yüklemek için şunu çalıştırın:
npm install @material/typography
Tipografi için CSS ekleme
home.scss bölümünde, mevcut içe aktarma işlemlerinden sonra aşağıdaki içe aktarma ifadesini ekleyin:
@import "@material/typography/mdc-typography";Ardından, aşağıdaki mixin çağrısını shrine-title sınıfına ekleyin:
.shrine-title {
@include mdc-typography(headline6);
...
}Ardından, çekmece öğelerini stilize edelim.
Satır ayırıcı ekleme
home.html içinde, <a ...>Featured</a> öğesinden hemen sonra aşağıdakileri ekleyin:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>home.scss dosyasına aşağıdaki stilleri 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 etiketlerini ayarlama
Öğeleri ve etiketleri ayarlamak için .product-list seçicisi içindeki 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 aşağıdaki gibi görünmelidir:
Sayfayı Shrine'ın özel renkleri ve tipografisiyle şekillendirdiğinize göre şimdi de Shrine'ın ürünlerini gösteren resim listesine bakalım. Ürünlere daha fazla vurgu yaparak dikkat çekelim.
Elevation paketini yüklemek için şu komutu çalıştırın:
npm install @material/elevation
İçe aktarma ifadesini ekleme
home.scss içinde, 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 mixin'lerini 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, gezinme çubuğunun biraz üzerinde duruyormuş gibi görünmesi için gölge eklediniz.
Ardından, düzeni değiştirerek resimleri farklı en-boy oranlarında ve boyutlarda gösterelim. Böylece her resim diğerlerine kıyasla benzersiz görünür.
HTML'yi değiştirme
home.html içinde, 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">Gemini Live'a
home.html içinde, her bir img öğesinin src özelliğini assets klasöründeki resimlerle eşleşecek şekilde değiştirin. Ardından, her resmin etiket metnini güncelleyin. Tamamlandığında şu şekilde görünmelidir:
<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) mixin'ini kaldırın ve aşağıdaki mixin ile değiştirin:
@include mdc-image-list-masonry-columns(4);Ardından, home.scss içindeki product-list sınıfına aşağıdaki padding değerlerini ekleyin:
.product-list {
...
padding: 80px 100px 0;
}
Kodunuz artık complete/ klasöründeki kodla eşleşmelidir.
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 Shrine'ın marka renk şeması tamamen farklı olsaydı nasıl görüneceğine bakalım.
CSS'yi değiştirme
_variables.scss içinde, 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 içinde, .username, .password seçicisindeki mixin'leri kaldırın. Şu şekilde görünmelidir:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}Ayrıca, .cancel sınıfındaki mdc-button-ink-color karışımını geçersiz kılmayı kaldırın:
home.scss içinde .home sınıfına aşağıdaki kuralı ekleyin:
background-color: $mdc-theme-background;.shrine-logo-drawer seçicisinde, fill özelliğini on-primary rengiyle değiştirin:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}Benzer şekilde, .shrine-title seçicisinde color özelliğini on-primary rengi olarak ayarlayın:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Son olarak, mdc-elevation seçicisi altında daha önce kullanılan .shrine-body mixin'ini kaldırın.
Derleyin ve çalıştırın. Yeni tema artık tarayıcınızda görünmelidir.
home.html sayfasındaki değişiklikleri görmek için http://localhost:8080/home.html adresine gidin.
Artık tasarımcınızın spesifikasyonlarına benzeyen bir uygulama oluşturdunuz.
Sonraki adımlar
Artık şu MDC bileşenlerini kullandınız: tema, tipografi, yükseklik ve şekil. Daha fazla bileşeni ve alt sistemi MDC Web Kataloğu'nda inceleyebilirsiniz.