1. Giriş
Material Components (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. Stil, markalama, etkileşim ve hareket tutarlı bir dizi ilke ve bileşen altında birleştirildiğinde ü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 kolayca güncellenerek tutarlı ve piksel açısından mükemmel bir uygulama ile Google'ın ön uç geliştirme standartlarına uyum sağlanabilir. 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'nin 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 bilgiler
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:
Çalışmıyorsa 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 içindeki ö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 tanıdığınıza 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 öğesini açın. Metin alanlarını içe aktarmak ve örneklemek 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ğ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"> öğeyi 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 etiketi animasyonunu 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 yükseltilmiş stil varyantı kullanılır.
Daha sonra kolayca hizalamak için iki mdc-button öğesini <div> öğesiyle sarmalı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 gerektirir. Bu nedenle, JavaScript'i sayfaya ekleyeceğiz.
Dalgalanma bileşeni için paketi yüklemek üzere ş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ı örneklendirmek 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 atamamız gerekmez.
İşte bu kadar. Sayfayı yenileyin. Her düğmeyi tıkladığınızda mürekkep dalgalanması gösterilir.
Metin alanlarını geçerli değerlerle doldurun ve "SONRAKİ" düğmesine basın. Başardınız! MDC-102'de bu sayfada ç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. MDC Web'deki diğer bileşenleri de inceleyebilirsiniz.
MDC-102: Materyal Tasarım Yapısı ve Düzeni başlıklı makaleyi inceleyerek gezinme çekmecesi ve resim listesi hakkında bilgi edinebilirsiniz. Material Components'ı denediğiniz için teşekkür ederiz. Bu codelab'i beğendiğinizi umuyoruz.