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. |
Codelab MDC-101'de bir giriş sayfası kullanıcı arayüzü oluşturmak için iki Materyal Bileşeni (MDC) kullandınız: metin alanı ve düğme. Şimdi gezinme, yapı ve veri ekleyerek bunu daha da genişletelim.
Oluşturacaklarınız
Bu codelab'de, giysi ve ev eşyaları satan bir e-ticaret uygulaması olan Shrine adlı bir uygulama için bir ana sayfa oluşturacaksınız. Şunları içerecektir:
- Gezinme çekmecesi
- Ürünlerle dolu bir resim listesi
Bu codelab'deki MDC Web bileşenleri
- Çekmece
- 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-101'den mi devam ediyorsunuz?
MDC-101 kursunu tamamladıysanız kodunuz bu codelab için hazırlanmış olmalıdır. 3. adıma atlayın: Gezinme çekmecesi ekleyin.
Starter codelab uygulamasını indirin
Başlangıç uygulaması material-components-web-codelabs-master/mdc-102/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-102/starter
Proje bağımlılıklarını yükleme
Geçerli dizininiz material-components-web-codelabs/mdc-102/starter. olmalıdır. Bu bölümde şu komutu çalıştırın:
npm install
Çok fazla etkinlik göründükten sonra terminaliniz başarılı bir yükleme işlemi görüntüleyecektir:
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. MDC-101 codelab'inde Tapınak giriş sayfası görünecektir.
Artık giriş sayfası iyi göründüğüne göre uygulamaya bazı ürünler ekleyelim. Geçerli bir kullanıcı adı ve şifre girip "Sonraki"yi tıklayın. ana sayfaya gitmek için düğmeyi kullanın.
3. Gezinme çekmecesi ekle
Kullanıcı oturum açtığında, "Başardınız!" ifadesini içeren bir ana sayfa gösterilir. Harika! Ancak artık kullanıcılarımızın işlem yapması ve uygulamadaki yerini anlaması gerekiyor. Bu konuda yardımcı olmak için gezinme öğelerini ekleyelim.
Materyal Tasarım gezinme kalıpları, yüksek derecede kullanılabilirlik sunar. Materyal gezinme çekmecesi, gezinme ve diğer işlemlere hızlı erişim sağlar. Bir ekleyelim.
MDC Çekmecesini ve Listesini Yükleme
Çekmece bileşenine ilişkin paketleri yüklemek için şu komutu çalıştırın:
npm install @material/drawer @material/list
HTML'yi ekleme
home.html alanındaki "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 aracında, 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 öğesinin alt kısmına şu 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
Klavyeyle düzgün bir şekilde gezinmesi için gezinme çekmecesi içindeki MDC Listesi'ni örneklendirmemiz 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 adresinden sayfayı yenileyin. Ana sayfanız aşağıdaki gibi görünecektir:
Şimdi ana sayfada ilk öğe etkin olmak üzere çeşitli gezinme öğelerini görüntüleyen kalıcı bir gezinme çekmecesi vardır.
4. Metin etiketli resim ekleme
Artık uygulamamızın bir yapısı var. Şimdi içeriği bir resim listesine yerleştirerek düzenleyelim.
MDC Resim Listesini Yükle
Resim listesi bileşeninin paketini yüklemek için şu komutu çalıştırın:
npm install @material/image-list
Bir öğeli bir liste için HTML ekleme
Gezinme çekmecesinin yanına bir resim listesi ekleyerek başlayalım. Listeyi, bir resim ve bir metin etiketinden oluşan tek bir öğe ekleyerek başlatacağız.
home.html içinde, <aside> öğesinin sonundan sonra 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>
Liste, hem bu eğiticide hem de MDC-103'te özel stiller uygulayacak ek bir sınıf (product-list) içerir.
CSS'yi ekleme
İlk olarak home.scss ürününde, 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";
Sonra, ilk ana sayfa stillerinden sonra aşağıdaki stilleri ekleyin:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
Bu stiller, resim listesine resimleri dört sütunda göstermesi talimatını verir. Böylece, resim listesinin çekmeceden bağımsız olarak kaydırılmasını sağlar.
Sayfayı yenileyin. Ana sayfa artık şu şekilde görünmelidir:
Resim listesinin, bir koleksiyonda çok sayıda resim göstermesi amaçlanmış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 öğenin arkasına (</ul> kapanış etiketinden önce) 15 kez yapıştırın. Bunun sonucunda toplam 16 görsel elde edilir. Henüz benzersiz görseller ve başlıklara ihtiyacınız yok. MDC-103'tekilere ulaşırsınız.
Yenile'ye dokunun. Şimdi ana sayfa şu şekilde görünmelidir:
Resim listesinde her satırda dört resim gösterilir ve resimler, mevcut 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ış vardır. Sadece birkaç satır kodla, içeriğinizi 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, artık MDC Web kitaplığındaki iki Materyal Tasarım temel bileşenini daha kullanmışsınızdır! MDC Web Kataloğu'nu ziyaret ederek diğer bileşenleri keşfedebilirsiniz.
Ana sayfa tam olarak işlevsel olsa da henüz belirli bir markayı veya bakış açısını yansıtmıyor. MDC-103: Renk, Şekil, Yükseklik ve Tür ile Materyal Tasarım Teması bölümünde canlı ve modern bir markayı ifade etmek için bu bileşenlerin stilini özelleştireceksiniz.