Material Bileşenleri (MDC), geliştiricilerin Material Design'ı 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 ve Android, iOS, web ve Flutter için kullanılabilir. material.io/develop |
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, Material Design 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'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 bilgi
Eğitimlerimizi sürekli olarak geliştirmeye çalışıyoruz. Web geliştirme alanındaki deneyim seviyenizi nasıl değerlendirirsiniz?
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 bir <link> etiketi kullanılır ve <script> etiketi bundle-login.js dosyasını içerir. Ayrıca, tarayıcılar arası tutarlı oluşturma için normalize.css'nin yanı sıra 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ı herkese açık API'sinin bir parçası olarak değerlendirir.)
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 adresini 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.
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 Text Field'ı 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
HTML'yi ekleme
index.html içinde, 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ı çeşitli bölümlerden oluşur:
- Ana öğe,
mdc-text-field - Alt öğeler
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ı dosyada, metin alanlarını hizalamak ve ortalamak için aşağıdaki stilleri ekleyin:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}JavaScript'i ekleme
Şu anda boş olan login.js dosyasını 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 özellikler kullanılarak 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 <div class="mdc-text-field"> öğesini aşağıdaki gibi 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/ 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:
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
HTML'yi ekleme
index.html içinde, <div class="mdc-text-field 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 <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 gerektirdiğinden bunu sayfaya ekleyeceğiz.
Dalgalanma bileşeni için paketi yüklemek üzere şu komutu çalıştırın:
npm install @material/ripple
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 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! Bu sayfada MDC-102'de çalışmaya devam edeceksiniz.
Temel HTML işaretlemesi ve yalnızca birkaç satır CSS ve JavaScript kullanarak, web için Material Components kitaplığı, Material Design 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 keşfedebilirsiniz.
MDC-102: Material Design 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'den keyif aldığınızı umuyoruz.