1. Giriş
Material Components (MDC), geliştiricilerin Materyal Tasarım'ı 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. Android, iOS, web ve Flutter.material.io/develop için kullanılabilir. |
MDC-101 adlı codelab'de, giriş sayfası kullanıcı arayüzü oluşturmak için iki Material Components (MDC) bileşeni kullandınız: metin alanı ve düğme. Şimdi de gezinme, yapı ve veri ekleyerek bu konuyu genişletelim.
Ne oluşturacaksınız?
Bu codelab'de, giyim ve ev eşyası satan bir e-ticaret uygulaması olan Shrine adlı uygulamanın ana sayfasını oluşturacaksınız. Bu kartta şu bilgiler yer alır:
- Gezinme çekmecesi
- Ürünlerle dolu bir resim listesi
Bu Codelab'deki MDC Web bileşenleri
- Çekmece
- 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 bilgiler
Web geliştirme alanındaki deneyim seviyenizi nasıl değerlendirirsiniz?
2. Geliştirme ortamınızı kurma
MDC-101'den devam mı ediyorsunuz?
MDC-101'i tamamladıysanız kodunuz bu codelab'e hazır olmalıdır. 3. adıma (Gezinme çekmecesi ekleme) geçin.
Başlangıç Codelab uygulamasını indirin
Başlangıç uygulaması material-components-web-codelabs-master/mdc-102/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-102/starter
Proje bağımlılıklarını yükleme
Mevcut dizininiz material-components-web-codelabs/mdc-102/starter. olmalıdır. Buradan aşağıdaki komutu çalıştırın:
npm install
Çok sayıda etkinlik gösterildikten sonra terminalinizde başarılı bir yükleme gösterilmelidir:
Başlangıç uygulamasını çalıştırma
Aynı dizinde şunu ç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 MDC-101 codelab'indeki Shrine giriş sayfasını görmelisiniz.
Giriş sayfası artık iyi göründüğüne göre uygulamayı bazı ürünlerle dolduralım. Geçerli bir kullanıcı adı ve şifre girip ana sayfaya gitmek için "Sonraki" düğmesini tıklayın.
3. Gezinme çekmecesi ekleme
Kullanıcı oturum açtığında "Başardınız!" yazan bir ana sayfa gösterilir. Harika! Ancak kullanıcımızın artık yapması gereken işlemler ve uygulamada nerede olduğunu bilmesi gerekiyor. Bu konuda yardımcı olmak için gezinme özelliği ekleyelim.
Materyal Tasarım gezinme kalıpları, yüksek düzeyde kullanılabilirlik sunar. Material gezinme çekmecesi, gezinme ve diğer işlemlere hızlı erişim sağlar. Bir tane ekleyelim.
MDC Drawer ve List'i yükleme
Çekmece bileşeni için paketleri yüklemek üzere şu komutu çalıştırın:
npm install @material/drawer @material/list
HTML'yi ekleme
home.html içinde, "Başardınız!" ifadesini çekmece ve öğeleri için aşağıdaki işaretlemeyle değiştirin:
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>
CSS'yi ekleme
home.scss bölümünde, mevcut içe aktarma işleminden sonra aşağıdaki içe aktarma ifadelerini ekleyin:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
home.scss dosyasının en altına aşağıdaki stilleri ekleyin:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}
JavaScript'i ekleme
Klavye ile doğru gezinme için gezinme çekmecesinde MDC List'i başlatmamız gerekir. Şu anda boş olan home.js dosyasını açın ve aşağıdaki kodu ekleyin:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));
http://localhost:8080/home.html adresindeki sayfayı yenileyin. Ana sayfanız artık aşağıdaki gibi görünecektir:
Artık ana sayfada, çeşitli gezinme öğelerini gösteren kalıcı bir gezinme çekmecesi var. İlk öğe etkin durumda.
4. Metin etiketli resimler ekleme
Uygulamamızın yapısı oluştuğuna göre içeriği bir resim listesine yerleştirerek düzenleyelim.
MDC Image List'i yükleme
Resim listesi bileşeni için paketi yüklemek üzere şu komutu çalıştırın:
npm install @material/image-list
Tek öğeli bir liste için HTML ekleme
Öncelikle gezinme çekmecesinin yanına bir resim listesi ekleyelim. Listeyi, resim ve metin etiketinden oluşan tek bir öğe ekleyerek başlatacağız.
home.html bölümünde, <aside> öğesinin sonuna aşağıdaki HTML'yi ekleyin:
<ul class="mdc-image-list product-list">
<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>
Listede, hem bu eğitimde hem de MDC-103'te özel stiller uygulayacak ek bir sınıf (product-list) yer alıyor.
CSS'yi ekleme
İlk olarak, home.scss içinde mevcut içe aktarma işlemlerinden sonra resim listesi bileşen stilleri için bir içe aktarma işlemi ekleyin:
@import "@material/image-list/mdc-image-list";
Ardından, ilk ana sayfa stillerinden sonra aşağıdaki stilleri ekleyin:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
Bu stiller, resim listesinin dört sütun halinde gösterilmesini sağlar. Böylece, resim listesi çekmeceden bağımsız olarak kaydırılır.
Sayfayı yenileyin. Ana sayfa artık aşağıdaki gibi görünecektir:
Resim listesi, bir koleksiyondaki birçok resmi göstermek için tasarlanmıştır. Bu nedenle, bileşenin nasıl çalıştığını daha iyi görmek için daha fazla resim ekleyelim.
home.html içinde mevcut <li> öğesini kopyalayın:
<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>
Ardından, mevcut öğeden sonra (kapanış </ul> etiketinden önce) 15 kez yapıştırın. Bu durumda toplam 16 resim elde edilir. Benzersiz resimler ve başlıklar hakkında endişelenmeyin. Bunları MDC-103'te öğreneceksiniz.
Yenile'ye dokunun. Ana sayfa artık aşağıdaki gibi görünmelidir:
Resim listesinde her satırda dört resim gösterilir ve resimler, kullanılabilir ekran alanına sığacak şekilde otomatik olarak boyutlandırılır.
5. Özet
Sitenizde, kullanıcıyı oturum açma sayfasından ürünlerin görüntülenebileceği bir ana sayfaya yönlendiren temel bir akış var. Yalnızca birkaç satır kodla içerik sunmak için bir çekmece ve resim listesi eklediniz. Ana sayfa artık temel bir yapıya ve içeriğe sahip.
Sonraki adımlar
Çekmece ve resim listesiyle birlikte, MDC Web kitaplığındaki iki Materyal Tasarım temel bileşenini daha kullanmış oldunuz. MDC Web Kataloğu'nu ziyaret ederek daha fazla bileşeni keşfedebilirsiniz.
Tamamen işlevsel olsa da ana sayfa henüz belirli bir markayı veya bakış açısını ifade etmiyor. MDC-103: Material Design Theming with Color, Shape, Elevation and Type (MDC-103: Renk, Şekil, Yükseklik ve Tür ile Materyal Tasarım Temalandırma) başlıklı dokümanda, bu bileşenlerin stilini canlı ve modern bir markayı ifade edecek şekilde özelleştireceksiniz.