Bu codelab hakkında
1. Giriş
Materyal Bileşenleri (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, onlarca güzel ve işlevsel kullanıcı arayüzü bileşenine sahiptir ve Android, iOS, web ve Flutter'da kullanılabilir.material.io/develop |
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şturacağınız uygulama
Bu codelab'de, giyim ve ev eşyası satan bir e-ticaret uygulaması olan Shrine 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'in son sürümü (JavaScript paket yöneticisi 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ı kurma
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 atla: Gezinme çekmecesi ekleyin.
Başlangıç Codelab uygulamasını indirin
Başlatıcı uygulama 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 kod laboratuvarını GitHub'dan kopyalamak 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
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 sayıda etkinlik gösterildikten sonra 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şlayacaktır. Sayfayı görmek için tarayıcınızı http://localhost:8080/ adresine yönlendirin.
Başarıyla gerçekleştirildi. MDC-101 kod laboratuvarındaki Shrine giriş sayfasını görürsünüz.
Giriş sayfası iyi göründüğü için uygulamayı bazı ürünlerle dolduralım. Geçerli bir kullanıcı adı ve şifre girin, ardından ana sayfaya gitmek için "Sonraki" düğmesini tıklayın.
3. Gezinme çekmecesi ekle
Kullanıcı oturum açtığında "Bunu başardınız" yazan bir ana sayfa gösterilir. Harika! Ama şimdi kullanıcımızın yapması gereken işlemler ve uygulama içinde nerede olduğuyla ilgili bir fikir edinmek. Bu konuda yardımcı olması için gezinme bölümü 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 tane 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
ürününde, çekmece ve öğeleri için "Başladınız!" ifadesini 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
dosyası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 adresindeki 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ükleme
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 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ır.
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 listeleri, koleksiyondaki birçok resmi görüntülemek için kullanılır. Bu nedenle, bileşenin nasıl çalıştığını daha iyi anlamak 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 sonuna (kapanış </ul>
etiketinden önce) 15 kez yapıştırın. Bu işlem sonucunda toplam 16 resim elde edilir. Benzersiz görseller ve başlıklar için henüz endişelenmeyin; MDC-103'te bunları alacaksınız.
Yenile'ye dokunun. Ana sayfa şu şekilde görünecektir:
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ış var. 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 sahiptir.
Sonraki adımlar
Çekmecesi ve resim listesiyle birlikte, MDC Web kitaplığından iki temel Material Design bileşenini daha kullanmış oldunuz. MDC Web Kataloğu'nu ziyaret ederek daha fazla bileşen keşfedebilirsiniz.
Ana sayfa tamamen 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.