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. |
Web için Materyal Tasarım ve Materyal Bileşenleri nelerdir?
Materyal Tasarım, cesur ve güzel dijital ürünler oluşturmaya yönelik bir sistemdir. Ürün ekipleri stil, marka, etkileşim ve hareketi tutarlı bir ilke ve bileşen kümesi altında bir araya getirerek en büyük tasarım potansiyellerini gerçekleştirebilir.
Materyal Bileşenler Web (MDC Web), masaüstü ve mobil web'de tutarlılık sağlamak amacıyla tasarım ve mühendisliği bir bileşen kitaplığıyla birleştirir. MDC Web bileşenlerinin her biri kendi düğüm modüllerinde yer alır; bu nedenle Materyal Tasarım sistemi geliştikçe bu bileşenler tutarlı bir şekilde piksel mükemmelliğinde uygulama sağlamak ve Google'ın kullanıcı arabirimi geliştirme standartlarına uyum sağlamak için kolayca güncellenebilir. MDC ayrıca Android, iOS ve Flutter'da da kullanılabilir.
Bu codelab'de MDC Web'in çeşitli bileşenlerini kullanarak bir giriş sayfası oluşturacaksınız.
Oluşturacaklarınız
Bu codelab, giysi ve ev eşyaları satan bir e-ticaret web sitesi olan Shrine adlı uygulamayı geliştirme konusunda size rehberlik edecek üç codelab'den ilkidir. Bu kurs, MDC Web'i kullanarak bileşenleri her marka veya stili yansıtacak şekilde nasıl özelleştirebileceğinizi gösterecek.
Bu codelab'de, Shrine için aşağıdakileri içeren bir giriş sayfası oluşturacaksınız:
- Biri kullanıcı adı, diğeri şifre için olmak üzere iki metin alanı
- Biri "İptal" için olmak üzere iki düğme diğeri "Sonraki" için
- Web sitesinin adı (Mabet)
- Shrine'ın logosunun resmi
Bu codelab'deki MDC Web bileşenleri
- Metin alanı
- Düğme
- Dalga
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
Eğitimlerimizi her zaman daha iyi hale getirmek için çalışıyoruz. Web geliştirme konusundaki deneyim düzeyinizi nasıl değerlendirirsiniz?
2. Geliştirme ortamınızı ayarlama
Starter codelab uygulamasını indirin
Başlangıç uygulaması material-components-web-codelabs-master/mdc-101/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-101/starter
Proje bağımlılıklarını yükleme
Başlangıç dizininden aşağıdaki komutu çalıştırın:
npm install
Çok fazla etkinlik göreceksiniz ve son olarak terminalinizde başarılı bir yükleme gösterilecektir:
Başlamazsa npm audit fix komutunu çalıştırın.
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. Shrine'ın giriş sayfası için başlangıç kodu tarayıcınızda çalışıyor olmalıdır. "Shrine" adını göreceksiniz ve hemen altındaki Shrine logosu.
Koda göz atın
index.html ürünündeki meta veriler
Başlangıç dizininde, index.html uygulamasını favori kod düzenleyicinizle açın. Şunları içermelidir:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shrine (MDC Web Example App)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
<link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
<section class="header">
<svg class="shrine-logo" ...>
...
</svg>
<h1>SHRINE</h1>
</section>
<form action="home.html">
</form>
<script src="bundle-login.js" async></script>
</body>
</html>
Burada, web paketi tarafından oluşturulan bundle-login.css dosyasını yüklemek için bir <link> etiketi kullanılır ve bir <script> etiketi bundle-login.js dosyasını içerir. Ayrıca, farklı tarayıcılarda tutarlı oluşturma için normalize.css ve Google Fonts'taki Roboto yazı tipini ekleriz.
login.scss ürünündeki özel stiller
MDC web bileşenlerinin stil özellikleri, mdc-text-field sınıfı gibi mdc-* CSS sınıfları kullanılarak belirlenir. (MDC Web, DOM yapısını herkese açık API'sinin bir parçası olarak ele alır.)
Genel olarak, kendi sınıflarınızı kullanarak bileşenlerde özel stil değişiklikleri yapmanız önerilir. Yukarıdaki HTML'de bulunan shrine-logo gibi bazı özel CSS sınıflarını fark etmiş olabilirsiniz. Bu stiller, sayfaya temel stiller eklemek için login.scss içinde tanımlanır.
login.scss uygulamasını açtığınızda giriş sayfası için şu stilleri görürsünüz:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}
Artık başlangıç kodunu öğrendiğinize göre ilk bileşenimizi uygulayalım.
3. Metin alanları ekleyin
Başlangıç olarak, giriş sayfamıza, kullanıcıların kullanıcı adlarını ve şifrelerini girebilecekleri iki metin alanı ekleyeceğiz. Kayan bir etiket görüntüleyen ve bir dokunma dalgalanmasını etkinleştiren yerleşik işlevsellik içeren MDC Metin Alanı bileşenini kullanacağız.
MDC Metin Alanı'nı yükleyin
MDC Web bileşenleri, NPM paketleri aracılığıyla yayınlanır. Metin alanı bileşeninin paketini yüklemek için şu komutu çalıştırın:
npm install @material/textfield@^6.0.0
HTML'yi ekleme
index.html ürününde, aşağıdakileri gövdedeki <form> öğesinin içine ekleyin:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
MDC Metin Alanı DOM yapısı birkaç bölümden oluşur:
- Ana öğe olan
mdc-text-field - Alt öğeler
mdc-text-field__ripple,mdc-text-field__input,mdc-floating-labelvemdc-line-ripple
CSS'yi ekleme
login.scss aracında, mevcut içe aktarma işleminden sonra aşağıdaki içe aktarma deyimini ekleyin:
@import "@material/textfield/mdc-text-field";
Aynı dosyada, metin alanlarını hizalayıp ortalamak için aşağıdaki stilleri ekleyin:
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
JavaScript'i ekleme
Şu anda boş olan login.js uygulamasını açın. Metin Alanlarını içe aktarmak ve örneklendirmek için aşağıdaki kodu ekleyin:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));
HTML5 doğrulaması ekleme
Metin Alanları, alan girişi geçerliyse veya hata içeriyorsa HTML5'in form doğrulama API'si tarafından sağlanan özellikleri kullanarak bunu ifade eder.
Aşağıdakileri yapmanız gerekir:
requiredözelliğini hem Kullanıcı Adı hem de Şifre metin alanlarınınmdc-text-field__inputöğelerine ekleyin.- Password (Şifre) metin alanının
mdc-text-field__inputöğesininminlengthözelliğini"8"olarak ayarlayın
İki <label class="mdc-text-field mdc-text-field--filled"> öğesini aşağıdaki gibi görünecek şekilde ayarlayın:
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
http://localhost:8080/ adresinden sayfayı yenileyin. Kullanıcı Adı ve Şifre için iki metin alanı içeren bir sayfa görmeniz gerekir.
Kayan etiket animasyonunu ve çizgi dalgası animasyonunu (dışa doğru dalgalanan alt kenarlık çizgisi) kontrol etmek için metin alanlarını tıklayın:
4. Düğme ekle
Daha sonra, giriş sayfamıza iki düğme ekleyeceğiz: "İptal" ve "Sonraki"yi seçin. İkonik Materyal Tasarım mürekkep dalga efektini tamamlamak için MDC Düğmesi bileşenini, MDC Dalga bileşeniyle birlikte kullanacağız.
MDC'yi Yükle Düğmesi
Düğme bileşenine ilişkin paketi yüklemek için şu komutu çalıştırın:
npm install @material/button@^6.0.0
HTML'yi ekleme
index.html içinde, <label class="mdc-text-field mdc-text-field--filled password"> öğesinin kapanış etiketinin altına aşağıdakileri ekleyin:
<div class="button-container">
<button type="button" class="mdc-button cancel">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Cancel
</span>
</button>
<button class="mdc-button mdc-button--raised next">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Next
</span>
</button>
</div>
"İptal" için varsayılan düğme stilini kullanıyoruz. Ancak "Sonraki" düğmesi, mdc-button--raised sınıfıyla belirtilen yükseltilmiş bir stil varyantı kullanır.
Daha sonra kolayca hizalamak için iki mdc-button öğesini bir <div> öğesine sarmalarız.
CSS'yi ekleme
login.scss aracında, mevcut içe aktarma işlemlerinden sonra aşağıdaki içe aktarma deyimini ekleyin:
@import "@material/button/mdc-button";
Düğmeleri hizalayıp aralarına kenar boşluğu eklemek için login.scss bölümüne aşağıdaki stilleri ekleyin:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}
Düğmelere mürekkep dalgası ekleme
Kullanıcı bir düğmeye dokunduğunda veya düğmeyi tıkladığında geri bildirim, mürekkep dalgası biçiminde gösterilmelidir. Mürekkep dalgası bileşeni JavaScript gerektirdiğinden onu sayfaya ekleyeceğiz.
Ripple bileşeninin paketini yüklemek için şu komutu çalıştırın:
npm install @material/ripple@^6.0.0
login.js öğesinin üst tarafına aşağıdaki içe aktarma deyimini ekleyin:
import {MDCRipple} from '@material/ripple';
Dalgaları örneklendirmek için aşağıdakileri login.js öğesine ekleyin:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));
Ripple örneğini saklamamız gerekmediği için bu örneği bir değişkene atamaya da gerek yoktur.
İşte bu kadar. Sayfayı yenileyin. Düğmelerden her birini tıkladığınızda bir mürekkep dalgası görüntülenir.
Metin alanlarını geçerli değerlerle doldurun ve "SONRAKİ" düğmesine basın düğmesini tıklayın. Başardınız! MDC-102'de bu sayfa üzerinde çalışmaya devam edeceksiniz.
5. Özet
Web kitaplığı için Malzeme Bileşenleri, temel HTML işaretlemesi ile yalnızca birkaç satırlık CSS ve JavaScript'i kullanarak Materyal Tasarım yönergelerine uygun, tüm cihazlarda tutarlı bir görünüm ve davranışa sahip, güzel bir giriş sayfası oluşturmanıza yardımcı oldu.
Sonraki adımlar
Metin Alanı, Düğme ve Dalga, MDC Web kitaplığındaki üç temel bileşendir ancak daha birçok bileşen vardır. MDC Web'deki bileşenlerin geri kalanını da keşfedebilirsiniz.
Gezinme çekmecesi ve resim listesi hakkında bilgi edinmek için MDC-102: Material Design Structure and Layout'a (MDC-102: Materyal Tasarım Yapısı ve Düzen) gidebilirsiniz. Materyal Bileşenler'i denediğiniz için teşekkürler. Bu codelab'den memnun kaldığınızı umuyoruz.