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, 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. |
Materyal Tasarım ve web için Materyal Bileşenleri nedir?
Materyal Tasarım, cesur ve güzel dijital ürünler oluşturmaya yönelik bir sistemdir. Stili, markalamayı, etkileşimi ve hareketi tutarlı bir dizi ilke ve bileşen altında birleştirerek ürün ekipleri en büyük tasarım potansiyellerini gerçekleştirebilir.
Masaüstü ve mobil web için Material Components Web (MDC Web), uygulamalar ve web sitelerinde tutarlılık oluşturmak için tasarım ve mühendisliği bir bileşen kitaplığıyla birleştirir. MDC Web bileşenlerinin her biri kendi düğüm modüllerinde bulunur. Bu nedenle, Materyal Tasarım sistemi geliştikçe bu bileşenler, tutarlı ve piksel açısından mükemmel bir uygulama sağlamak ve Google'ın ön uç geliştirme standartlarına uymak için kolayca güncellenebilir. MDC, Android, iOS ve Flutter için de kullanılabilir.
Bu codelab'de, MDC Web'in çeşitli bileşenlerini kullanarak bir giriş sayfası oluşturacaksınız.
Ne oluşturacaksınız?
Bu codelab, giyim ve ev eşyaları satan bir e-ticaret web sitesi olan Shrine adlı bir uygulama oluşturma konusunda size yol gösterecek üç codelab'den ilkidir. Bu örnekte, MDC Web'i kullanarak bileşenleri herhangi bir markayı veya stili yansıtacak şekilde nasıl özelleştirebileceğiniz gösterilmektedir.
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 girmek için kullanılan iki metin alanı
- Biri "İptal", diğeri "Sonraki" için iki düğme
- Web sitesinin adı (Tapınak)
- Shrine'ın logosunun resmi
Bu Codelab'deki MDC Web bileşenleri
- Metin alanı
- Düğme
- Dalga
Gerekenler
- Node.js'in 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 bilgi
Eğitimlerimizi sürekli olarak geliştirmeye çalışıyoruz. Web geliştirme alanındaki deneyim seviyenizi nasıl değerlendirirsiniz?
2. Geliştirme ortamınızı kurma
Başlangıç Codelab uygulamasını indirin
Başlangıç uygulaması, material-components-web-codelabs-master/mdc-101/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-101/starter
Proje bağımlılıklarını yükleme
Başlangıç dizininden şunu çalıştırın:
npm install
Çok sayıda etkinlik görürsünüz ve sonunda terminalinizde başarılı bir yükleme gösterilir:
Bu metin yoksa 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ızı http://localhost:8080/ adresine yönlendirin.
Başarılı aktarım Shrine'ın giriş sayfası için başlangıç kodu tarayıcınızda çalışıyor olmalıdır. "Shrine" adını ve hemen altında Shrine logosunu görmelisiniz.
Koda göz atın
index.html içindeki meta veriler
Başlangıç dizininde index.html dosyasını en sevdiğiniz kod düzenleyiciyle 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, webpack tarafından oluşturulan bundle-login.css dosyasını yüklemek için <link> etiketi, bundle-login.js dosyasını eklemek için ise <script> etiketi kullanılıyor. Ayrıca, tarayıcılar arası tutarlı oluşturma için normalize.css'yi ve Google Fonts'taki Roboto yazı tipini de ekliyoruz.
login.scss'daki özel stiller
MDC Web bileşenleri, mdc-* CSS sınıfları (ör. mdc-text-field sınıfı) kullanılarak stillendirilir. MDC Web, DOM yapısını genel 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 shrine-logo gibi bazı özel CSS sınıfları olduğunu fark etmiş olabilirsiniz. Bu stiller, sayfaya temel stiller eklemek için login.scss içinde tanımlanır.
login.scss bağlantısını açtığınızda giriş sayfası için aşağıdaki stilleri görürsünüz:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}
Başlangıç kodunu öğrendiğinize göre şimdi ilk bileşenimizi uygulayalım.
3. Metin alanları ekleme
Başlamak için giriş sayfamıza iki metin alanı ekleyeceğiz. Bu alanlarda kullanıcılar, kullanıcı adlarını ve şifrelerini girebilecek. Kayar etiket görüntüleyen ve 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 içinde, gövdedeki <form> öğesinin içine aşağıdakileri 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ı çeşitli bölümlerden oluşur:
- Ana öğe,
mdc-text-field - Alt öğeler
mdc-text-field__ripple,mdc-text-field__input,mdc-floating-labelvemdc-line-ripple
CSS'yi ekleme
login.scss bölümünde, mevcut içe aktarma ifadesinden sonra aşağıdaki içe aktarma ifadesini ekleyin:
@import "@material/textfield/mdc-text-field";
Aynı dosyaya, metin alanlarını hizalamak ve 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'ı açın. Aşağıdaki kodu ekleyerek metin alanlarını içe aktarın ve örnekleyin:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));
HTML5 doğrulama ekleme
Metin alanları, HTML5'in form doğrulama API'si tarafından sağlanan özellikleri kullanarak alan girişinin geçerli olup olmadığını veya hata içerip içermediğini ifade eder.
Şunları yapmanız gerekir:
- Hem Kullanıcı adı hem de Şifre metin alanlarının
mdc-text-field__inputöğelerinerequiredözelliğini ekleyin. - Ş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/ adresindeki sayfayı yenileyin. Kullanıcı adı ve şifre için iki metin alanı içeren bir sayfa görmelisiniz.
Kaydırma etiketli animasyonu ve çizgi dalgalanma animasyonunu (dışa doğru dalgalanan alt kenarlık çizgisi) incelemek için metin alanlarını tıklayın:
4. Düğme ekleme
Ardından, giriş sayfamıza "İptal" ve "Sonraki" olmak üzere iki düğme ekleyeceğiz. İkonik Materyal Tasarım mürekkep dalgalanma efektini tamamlamak için MDC Ripple bileşeniyle birlikte MDC Button bileşenini kullanacağız.
MDC düğmesini yükleme
Düğme bileşeni için paketi yüklemek üzere ş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 kapatma 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" düğmesi için varsayılan düğme stilini kullanıyoruz. Ancak "Sonraki" düğmesinde mdc-button--raised sınıfıyla belirtilen bir yükseltilmiş stil varyantı kullanılır.
Daha sonra kolayca hizalamak için iki mdc-button öğesini bir <div> öğesine sarıyoruz.
CSS'yi ekleme
login.scss bölümünde, mevcut içe aktarma işlemlerinden sonra aşağıdaki içe aktarma ifadesini ekleyin:
@import "@material/button/mdc-button";
Düğmeleri hizalamak ve etraflarına kenar boşluğu eklemek için login.scss öğesine 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 mürekkep dalgası şeklinde geri bildirim gösterilmelidir. Mürekkep dalgalanması bileşeni JavaScript gerektirdiğinden bunu sayfaya ekleyeceğiz.
Dalgalanma bileşeninin paketini yüklemek için şu komutu çalıştırın:
npm install @material/ripple@^6.0.0
login.js dosyasının en üstüne aşağıdaki içe aktarma ifadesini ekleyin:
import {MDCRipple} from '@material/ripple';
Dalgalanmaları başlatmak için login.js öğesine aşağıdakileri ekleyin:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));
Ripple örneğine referans tutmamız gerekmediğinden, bunu bir değişkene atamaya gerek yoktur.
İşte bu kadar. Sayfayı yenileyin. Her düğmeyi tıkladığınızda mürekkep dalgası gösterilir.
Metin alanlarını geçerli değerlerle doldurun ve "SONRAKİ" düğmesine basın. Başardınız! Bu sayfada MDC-102'de çalışmaya devam edeceksiniz.
5. Özet
Temel HTML işaretlemesi ve yalnızca birkaç satır CSS ve JavaScript kullanarak, web için Material Components kitaplığı, Materyal Tasarım kurallarına uygun, tüm cihazlarda tutarlı bir şekilde görünen ve çalışan 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. Ayrıca, MDC Web'deki diğer bileşenleri de inceleyebilirsiniz.
MDC-102: Materyal Tasarım Yapısı ve Düzeni başlıklı dokümanı inceleyerek gezinme çekmecesi ve resim listesi hakkında bilgi edinebilirsiniz. Material Components'ı denediğiniz için teşekkür ederiz. Bu codelab'den keyif aldığınızı umuyoruz.