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 Malzeme Bileşenleri (MDC Web), normal JavaScript kullanılarak oluşturulan, çerçeveden bağımsızdır. Bu, MDC Web'in geliştirme sürecinizle sorunsuz çalışmasını sağlar. Bu bileşenler, mevcut uygulamanızda çevik tasarım iyileştirmeleri yapmak için gerektiğinde yüklenebilir.
Oluşturacaklarınız
Bu codelab'de, formdaki mevcut bileşenlerden bazılarını MDC Web tarafından sağlanan bileşenlerle değiştireceksiniz:
Bu codelab'deki MDC Web bileşenleri
- Düğme
- Seçin
- Metin alanı
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
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-111/starter dizininde bulunur. Başlamadan önce bu dizinde cd olduğundan 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-111/starter
Proje bağımlılıklarını yükleme
Başlangıç dizininden (material-components-web-codelabs/mdc-111/starter) 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şlangıç uygulamasını çalıştırma
Başlangıç dizininde ş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. Uygulamanın gönderim adresi formunu görürsünüz:
3. Düğmeyi güncelleyin
MDC'yi Yükle Düğmesi
Geliştirme sunucusunu sonlandırmak için Ctrl+C tuşlarına basın. Ardından, MDC Düğmesi NPM paketini yükleyin ve sunucuyu yeniden başlatın:
npm install @material/button npm start
CSS'yi içe aktarma
_theme.scss öğesinin üst kısmındaki .crane-button { ... } bloğunu silin ve yerine aşağıdakini ekleyin:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
İşaretlemeyi güncelleme
index.html öğesinde, <button> öğesinden crane-button sınıfını kaldırın, mdc-button ile mdc-button--raised sınıflarını ekleyin ve etiketi mdc-button__label sınıfıyla bir <span> öğesi içine yerleştirin:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
Dalgayı ekleme
MDC Düğmeleri JavaScript olmadan kullanılabilir. Bununla birlikte, düğmeye etkileşimli bir dalga eklemek daha zengin bir kullanıcı deneyimi oluşturur.
Geliştirme sunucusunu sonlandırmak için Ctrl+C tuşlarına basın. Ardından şu komutu çalıştırın:
npm install @material/ripple npm start
app.js öğesinin üstüne şu içe aktarma deyimini ekleyin:
import {MDCRipple} from '@material/ripple';
Düğmede dalgalanmayı örneklendirmek için şunu ekleyin: app.js öğesinin altına şunu ekleyin:
new MDCRipple(document.querySelector('.mdc-button'));
Roboto yazı tipini içe aktarma
Materyal Tasarım, bileşen yazı tipleri için varsayılan olarak Roboto'yu kullanır.
index.html ürününde, <head> öğesine aşağıdakileri ekleyerek Roboto Web yazı tipini içe aktarın:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Sayfayı yeniden yüklediğinizde şuna benzer bir sonuç göreceksiniz:
Bu düğme, basıldığında artık görsel geri bildirim olarak hafif dalga efektini gösteriyor.
4. Seçim öğesini güncelleme
MDC Seçim bileşeni, yerel HTML <select> öğesini sarmalar. Normalde <select> kullandığınız her yerde kullanabilirsiniz. "State" alanını güncelleyelim.
MDC Düğümü modülünü yükleme
Geliştirme sunucusunu sonlandırmak için Ctrl+C tuşlarına basın. Ardından şu komutu çalıştırın:
npm install @material/select npm start
CSS'yi içe aktarma
Aşağıdakileri, düğme içe aktarma işleminden hemen sonra _theme.scss öğesine ekleyin:
@import "@material/select/mdc-select";
İşaretlemeyi güncelleme
index.html içinde <select> öğesini bulun. crane-input sınıfını mdc-select__native-control ile değiştirin:
<select class="mdc-select__native-control" id="crane-state-input" required>
<select> etiketinin hemen üstüne MDC Seçim bileşeninin açılır oku için aşağıdaki işaretlemeyi ekleyin:
<i class="mdc-select__dropdown-icon"></i>
</select> kapanış etiketinin hemen altında crane-label sınıfını mdc-floating-label ile değiştirin:
<label class="mdc-floating-label" for="crane-state-input">
Ardından aşağıdaki işaretlemeyi etiketin hemen arkasına ekleyin:
<div class="mdc-line-ripple"></div>
Son olarak, aşağıdaki etiketleri <select> öğesinin etrafına (ancak crane-field öğesinin içine) ekleyin:
<div class="mdc-select">
...
</div>
Elde edilen işaretleme aşağıdaki gibi görünmelidir:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
JS'yi içe aktar
app.js öğesinin üstüne şu içe aktarma deyimini ekleyin:
import {MDCSelect} from '@material/select';
Seçimi örneklendirmek için aşağıdakileri app.js öğesinin altına ekleyin:
new MDCSelect(document.querySelector('.mdc-select'));
Sayfayı yeniden yükleyin. Yeniden yükleyin. Yeniden yüklediğinizde bu işlem şu şekilde görünmelidir:
MDC Seçim bileşeni, kullanıcıya tanıdık bir biçimde ancak modern stille bir seçenek listesi sunar.
5. Metin alanlarını güncelleme
Materyal Tasarım metin alanları, düz <input> öğelerine kıyasla kullanılabilirlik açısından büyük kazanımlar sağlıyor. Bu reklamlar, karmaşık içerikte kolayca ayırt edilebilecek ve kullanıcı etkileşimde bulunduğunda görsel geri bildirim verecek şekilde tasarlanmıştır.
MDC Düğümü modülünü yükleme
Geliştirme sunucusunu sonlandırmak için Ctrl+C tuşlarına basın. Ardından şu komutu çalıştırın:
npm install @material/textfield npm start
CSS'yi ekleme
İçe aktarma seçiminden hemen sonra, _theme.scss ürününe aşağıdakileri ekleyin:
@import "@material/textfield/mdc-text-field";
İşaretlemeyi güncelleme
index.html bölümünde "Name" alanı için <input> öğesini bulun. crane-input sınıfını mdc-text-field__input ile değiştirin:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Ardından, crane-label sınıfını mdc-floating-label ile değiştirin:
<label class="mdc-floating-label" for="crane-name-input">
Ardından aşağıdaki işaretlemeyi etiketin hemen arkasına ekleyin:
<div class="mdc-line-ripple"></div>
Son olarak 3 öğeyi aşağıdakilerle sarmalayın:
<div class="mdc-text-field">
...
</div>
Elde edilen işaretleme aşağıdaki gibi görünmelidir:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Aynı işlemi sayfadaki diğer tüm <input> öğeleri için tekrarlayın.
"Adres", "Şehir" ve "Posta Kodu" alanlarının işaretlemesi şöyle görünmelidir:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Artık kullanılmayan .crane-label ve .crane-input stillerini _theme.scss ürününden kaldırabilirsiniz.
JS'yi içe aktar
app.js öğesinin üstüne şu içe aktarma deyimini ekleyin:
import {MDCTextField} from '@material/textfield';
Metin alanlarını örneklendirmek için aşağıdakileri app.js öğesinin altına ekleyin:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Sayfayı yeniden yükleyin. Yeniden yükleyin. Yeniden yüklediğinizde bu işlem şu şekilde görünmelidir:
Metin alanlarının tümü Materyal Teması kullanacak şekilde güncellendi.
6. Özet
Uygulamanızı baştan aşağı tasarlamadan bazı yaygın bileşenleri (metin alanları, seçim ve düğme) değiştirdiniz. Tebrikler.
Üst uygulama çubuğu ve gezinme çekmecesi de büyük fark yaratabilecek diğer bileşenlerdir.
Sonraki adımlar
MDC Web kataloğunu ziyaret ederek MDC Web'deki daha fazla bileşeni keşfedebilirsiniz.
MDC Web'i belirli bir çerçeveyle kullanmak isterseniz MDC-112: MDC'yi Web Çerçeveleriyle Entegre Etme başlıklı makaleyi inceleyin.