Malzeme Bileşenleri (MDC), geliştiricilerin Materyal Tasarım'ı uygulamasına yardımcı olur. Google'da bir mühendis ve kullanıcı deneyimi tasarımcıları 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 için kullanılabilir. material.io/develop |
Web için Materyal Tasarım ve Materyal Bileşenleri nedir?
Materyal Tasarım, cesur ve güzel dijital ürünler oluşturmak için kullanılan bir sistemdir. Ürün ekipleri, stil, marka bilinci oluşturma, etkileşim ve hareketi tutarlı bir ilke ve bileşen grubu altında birleştirerek ürün ekiplerinin en iyi tasarım potansiyeline ulaşmasını sağlayabilir.
Masaüstü ve mobil web'de, Material Components Web (MDC Web), uygulamalar ve web siteleri arasında 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 yer alır. Dolayısıyla, Materyal Tasarım sistemi geliştikçe bu bileşenler, pikselin mükemmel bir şekilde uygulanması ve Google'ın ön uç geliştirme standartlarına uymasını sağlamak için kolayca güncellenebilir. MDC; Android, iOS ve Flutter için de kullanılabilir.
Bu codelab'de, MDC Web'in birkaç bileşenini kullanarak bir giriş sayfası oluşturacaksınız.
Geliştireceğiniz uygulama
Bu codelab, giyim ve ev eşyaları satan bir e-ticaret web sitesi olan Shrine adlı bir uygulama oluştururken size yol gösterecek üç codelab'den ilkidir. Burada, MDC Web'i kullanarak bileşenleri herhangi bir markayı veya stili yansıtacak şekilde nasıl özelleştirebileceğiniz gösterilmektedir.
Bu codelab'de, Tapınağın şunları 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", diğeri "Sonraki" için olan iki düğme
- Web sitesinin adı (Heykel)
- Shrine's logosu resmi
Bu codelab'deki MDC Web bileşenleri
- Metin alanı
- Düğme
- Dalga
Gerekenler
- Kısa süre önce Node.js'nin (JavaScript paket yöneticisi npm ile birlikte gelen) son sürümü.
- Örnek kod (sonraki adımda indirilecek)
- HTML, CSS ve JavaScript ile ilgili temel bilgiler
Eğitimlerimizi iyileştirmek için sürekli çalışıyoruz. Web geliştirme ile ilgili deneyiminizi nasıl değerlendirirsiniz?
Starter codelab uygulamasını indirme
Başlangıç uygulaması, material-components-web-codelabs-master/mdc-101/starter dizininin içinde bulunur. Başlamadan önce bu dizine cd girdiğinizden emin olun.
...veya GitHub'dan klonlayı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ıç dizininde şu komutu çalıştırın:
npm install
Çok sayıda etkinlik göreceksiniz ve sonunda terminaliniz başarılı bir yükleme gösterecek:
Başlamazsa npm audit fix komutunu çalıştırın.
Starter uygulamasını çalıştırma
Aynı dizinde şunu çalıştırın:
npm start
webpack-dev-server başlayacak. Sayfayı görmek için tarayıcınızı http://localhost:8080/ adresine yönlendirin.
İşlem başarılı! Shrine' uygulamasının giriş sayfasının başlangıç kodu tarayıcınızda çalışmalıdır. Bu adın hemen altında "Heykel" adını ve Tapınak logosunu görmelisiniz.
Koda göz atın
index.html içindeki meta veriler
Başlangıç dizininde, index.html kodunu 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. Buna ek olarak, tutarlı tarayıcılar arası oluşturma için normalize.css ve Google Fonts'taki Roboto yazı tipini ekleriz.
login.scss kategorisindeki özel stiller
MDC Web bileşenleri, mdc-text-field sınıfı gibi mdc-* CSS sınıfları kullanılarak biçimlendirilir. (MDC Web, DOM yapısını herkese açık API'sının 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 sayfası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, ilk bileşenimizi uygulayalım.
Başlangıç olarak, kullanıcıların giriş bilgilerini ve kullanıcı adlarını girebilecekleri iki adet metin alanı giriş sayfamıza eklenir. Bir kayan etiket gösteren ve dokunma dalgalanmasını etkinleştiren yerleşik işlevi içeren MDC Metin Alanı bileşenini kullanacağız.
MDC Metin Alanı'ı yükleyin
MDC Web bileşenleri, NPM paketleri aracılığıyla yayınlanır. Metin alanı bileşeni için paketi yüklemek üzere şunu çalıştırın:
npm install @material/textfield
HTML'yi ekleme
index.html öğesinde, gövdedeki <form> öğesinin içine aşağıdakileri ekleyin:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>MDC Metin Alanı DOM yapısı birkaç bölümden oluşur:
- Ana öğe,
mdc-text-field mdc-text-field__input,mdc-floating-labelvemdc-line-ripplealt öğeleri
CSS'yi ekleme
login.scss ürününde, mevcut içe aktarma işleminden sonra aşağıdaki içe aktarma ifadesini ekleyin:
@import "@material/textfield/mdc-text-field";Aynı dosyada, metin alanlarını hizalamak ve ortalamak için aşağıdaki stilleri ekleyin:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}JavaScript 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ı, HTML5's form doğrulama API'sı tarafından sağlanan özellikler kullanılarak alan girişinin geçerli olması veya bir hata içermesi durumunda ifade edilir.
Aşağıdakileri yaptığınızdan emin olun:
- Hem Kullanıcı adı hem de Şifre metin alanlarının
mdc-text-field__inputöğelerinerequiredözelliğini ekleyin - Şifre metin alanındaki
mdc-text-field__inputöğesininminlengthözelliğini"8"olarak ayarlayın
İki <div class="mdc-text-field"> öğesini şu şekilde görünecek şekilde ayarlayın:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>http://localhost:8080/ adresinden sayfayı yenileyin. Şimdi, Kullanıcı Adı ve Şifre için iki metin alanı içeren bir sayfa göreceksiniz.
Kayan etiket animasyonuna ve çizgi dalga animasyonuna (dışarıya sallanan alt sınır çizgisi) göz atmak için metin alanlarını tıklayın:
Ardından, giriş sayfamıza iki düğme ekliyoruz: "İptal" ve "Sonraki". ikonik Materyal Tasarım mürekkep dalga efektini tamamlamak için MDC Dalga bileşeninin yanı sıra MDC Düğme bileşenini kullanacağız.
MDC Düğmesini Yükle
Düğme bileşeni için paketi yüklemek üzere şunu çalıştırın:
npm install @material/button
HTML'yi ekleme
index.html içinde, <div class="mdc-text-field password"> öğesinin kapanış etiketi 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 "İleri" düğmesi mdc-button--raised sınıfıyla belirtilen yükseltilmiş bir stil varyantı kullanır.
Öğeleri daha sonra kolayca hizalamak için iki mdc-button öğesini bir <div> öğesi içinde sarmalarız.
CSS'yi ekleme
login.scss olarak, mevcut içe aktarma işlemlerinden sonra aşağıdaki içe aktarma ifadesini ekleyin:
@import "@material/button/mdc-button";Düğmeleri hizalamak ve yanlarına bir kenar boşluğu eklemek için login.scss ürünü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, bir mürekkep dalgası şeklinde görüntülenir. Mürekkep dalga bileşeni JavaScript gerektirdiğinden, bunu sayfaya ekleyeceğiz.
Google+ Dalga bileşeni için paketi yüklemek üzere:
npm install @material/ripple
login.js öğesinin üst kısmına aşağıdaki içe aktarma ifadesini ekleyin:
import {MDCRipple} from '@material/ripple';Dalgaları anlık hale getirmek için login.js öğesine şunu ekleyin:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));Dalga örneğine verilen bir referansı saklamamız gerekmediği için bunu bir değişkene atamamız gerekmez.
İşte oldu. Sayfayı yenileyin. Her düğmeyi tıkladığınızda bir mürekkep dalgası görüntülenir.
Metin alanlarını geçerli değerlerle doldurun ve "İLERİ" düğmesine basın. Başardınız! MDC-102'de bu sayfa üzerinde çalışmaya devam edeceksiniz.
Web HTML'si için Materyal Bileşenleri, temel HTML işaretlemesini ve yalnızca birkaç satır CSS ve JavaScript'i kullanarak Materyal Tasarım yönergelerine uygun, tüm cihazlarda tutarlı biçimde görünen ve davranan güzel bir giriş sayfası oluşturmanıza yardımcı olmuştur.
Sonraki adımlar
Metin Alanı, Düğme ve Google+ Dalgası, MDC Web kitaplığının üç temel bileşenidir ancak daha pek çok avantaj mevcuttur. MDC Web'deki bileşenlerin geri kalanını da keşfedebilirsiniz.
MDC-102: Materyal Tasarım Yapısı ve Düzeni bölümüne giderek gezinme çekmecesi ve resim listesi hakkında bilgi edinebilirsiniz. Malzeme Bileşenlerini denediğiniz için teşekkür ederiz. Bu codelab'den memnun kaldığınızı umuyoruz.