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. |
Web için Material Components (MDC Web), çerçeveye bağlı olmayan ve normal JavaScript kullanılarak oluşturulmuş bileşenlerdir. Bu sayede MDC Web, geliştirme sürecinizle sorunsuz bir şekilde çalışır. Bu bileşenler, mevcut uygulamanızda çevik tasarım iyileştirmeleri yapmanıza yardımcı olmak için gerektiğinde yüklenebilir.
Ne oluşturacaksınız?
Bu codelab'de, bir formdaki mevcut bileşenlerden bazılarını MDC Web tarafından sağlananlarla değiştireceksiniz:
Bu Codelab'deki MDC Web bileşenleri
- Düğme
- Seç
- Metin alanı
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
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-111/starter dizininde bulunur. Başlamadan önce bu dizine cd olduğunuzdan 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-111/starter
Proje bağımlılıklarını yükleme
Başlangıç dizininden (material-components-web-codelabs/mdc-111/starter) şu komutu ç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:
Başlangıç uygulamasını çalıştırma
Başlangıç dizininde şunu ç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 Uygulamanın kargo adresi formunu görmelisiniz:
3. Düğmeyi güncelleme
MDC düğmesini yükleme
Geliştirme sunucusunu kapatmak için Ctrl+C tuşlarına basın. Ardından, MDC Button NPM paketini yükleyin ve sunucuyu yeniden başlatın:
npm install @material/button npm start
CSS'yi içe aktarma
_theme.scss öğesinin en üstünde .crane-button { ... } bloğunu silin ve yerine aşağıdakileri ekleyin:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Biçimlendirmeyi güncelleme
index.html içinde, <button> öğesinden crane-button sınıfını kaldırın, mdc-button ve mdc-button--raised sınıflarını ekleyin ve etiketi mdc-button__label sınıfına sahip 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>
Dalgalanma efektini ekleme
MDC düğmeleri JavaScript olmadan kullanılabilir. Ancak düğmeye etkileşimli bir dalga efekti eklemek daha zengin bir kullanıcı deneyimi sunar.
Geliştirme sunucusunu kapatmak 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 dosyasının en üstüne aşağıdaki içe aktarma ifadesini ekleyin:
import {MDCRipple} from '@material/ripple';
Düğmede dalga efektini başlatmak için app.js dosyasının en altına aşağıdakileri ekleyin:
new MDCRipple(document.querySelector('.mdc-button'));
Roboto yazı tipini içe aktarma
Materyal Tasarım, varsayılan olarak bileşen yazı tipleri için Roboto'yu kullanır.
index.html içinde, <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 aşağıdakine benzer bir şey görürsünüz:
Düğmeye basıldığında artık görsel geri bildirim olarak hafif bir dalgalanma efekti gösteriliyor.
4. Seçme öğesini güncelleme
MDC Select bileşeni, yerel bir HTML <select> öğesini sarmalar. Normalde <select> kullandığınız her yerde kullanabilirsiniz. "Eyalet" alanını güncelleyelim.
MDC Node modülünü yükleme
Geliştirme sunucusunu kapatmak 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 _theme.scss'ya, düğme içe aktarma işleminden hemen sonra ekleyin:
@import "@material/select/mdc-select";
İşaretlemeyi güncelleme
index.html öğesinde <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 Select bileşeninin açılır okuna yönelik aşağıdaki işaretlemeyi ekleyin:
<i class="mdc-select__dropdown-icon"></i>
Kapatma </select> 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, etiketin hemen ardından aşağıdaki işaretlemeyi ekleyin:
<div class="mdc-line-ripple"></div>
Son olarak, <select> öğesinin etrafına (ancak crane-field öğesinin içine) aşağıdaki etiketleri 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 aktarma
app.js dosyasının en üstüne aşağıdaki içe aktarma ifadesini ekleyin:
import {MDCSelect} from '@material/select';
Seçimi örneklendirmek için app.js öğesinin en altına aşağıdakileri ekleyin:
new MDCSelect(document.querySelector('.mdc-select'));
Sayfayı yeniden yükleyin. Sayfa aşağıdaki gibi görünmelidir:
MDC Select bileşeni, kullanıcının seçeneklerini modern bir stille ancak tanıdık bir biçimde sunar.
5. Metin alanlarını güncelleme
Materyal Tasarım metin alanları, düz <input> öğelerine kıyasla önemli ölçüde daha kullanışlıdır. Bu reklamlar, karmaşık içeriklerde kolayca tanımlanabilecek şekilde tasarlanır ve kullanıcı etkileşimde bulunduğunda görsel olarak küçük bir geri bildirim gösterir.
MDC Node modülünü yükleme
Geliştirme sunucusunu kapatmak 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
Şunu _theme.scss'ya, select import'un hemen ardından ekleyin:
@import "@material/textfield/mdc-text-field";
Biçimlendirmeyi güncelleme
index.html içinde "Ad" 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, etiketin hemen ardından aşağıdaki işaretlemeyi ekleyin:
<div class="mdc-line-ripple"></div>
Son olarak, 3 öğeyi de aşağıdakiyle 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>
Sayfadaki diğer tüm <input> öğeleri için aynı işlemi tekrarlayın.
"Adres", "Şehir" ve "Posta Kodu" alanlarının işaretlemesi şu şekilde olmalıdır:
<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'den kaldırabilirsiniz.
JS'yi içe aktarma
app.js dosyasının en üstüne aşağıdaki içe aktarma ifadesini ekleyin:
import {MDCTextField} from '@material/textfield';
Metin alanlarını örneklendirmek için app.js dosyasının en altına aşağıdakileri ekleyin:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Sayfayı yeniden yükleyin. Sayfa aşağıdaki gibi görünmelidir:
Metin alanlarının tümü artık Materyal Teması Oluşturma'yı kullanacak şekilde güncellendi.
6. Özet
Uygulamanızı tamamen yeniden 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şenler arasındadır.
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 istiyorsanız MDC-112: Integrating MDC with Web Frameworks (MDC-112: MDC'yi Web Çerçeveleriyle Entegre Etme) başlıklı makaleyi inceleyin.