MDC-102 Web: Materyal Yapısı ve Düzen (Web)

MDC-102 Web:
Materyal Yapısı ve Düzeni (Web)

Bu codelab hakkında

subjectSon güncelleme Eki 11, 2020
account_circleYazan: Liz Mitchell, Abhinay Omkar

1. Giriş

logo_components_color_2x_web_96dp.png

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

e2f359c254988d75.png

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:

23003b0e5fdf9077.png

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.

4e04758051693865.png

Başarıyla gerçekleştirildi. MDC-101 kod laboratuvarındaki Shrine giriş sayfasını görürsünüz.

6c206785707bee2e.png

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:

9c145acccbc28214.png

Ş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:

5362b330204ffd58.png

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:

e2f359c254988d75.png

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.

Bu codelab'i makul bir zaman ve çabayla tamamlayabildim

Gelecekte Material Components'i kullanmaya devam etmek istiyorum