1. Giriş
Materyal Bileşenleri (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, 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 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 yapmanıza yardımcı olmak için gerektiğinde yüklenebilir.
Oluşturacağınız uygulama
Bu codelab'de, bir formdaki mevcut bileşenlerin 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'in son sürümü (JavaScript paket yöneticisi npm ile birlikte gelir).
- Örnek kod (sonraki adımda indirilecek)
- HTML, CSS ve JavaScript hakkında temel düzeyde bilgi
Web geliştirme konusundaki deneyiminizi nasıl değerlendirirsiniz?
2. Geliştirme ortamınızı ayarlama
Başlangıç Codelab uygulamasını indirin
Başlatıcı uygulama material-components-web-codelabs-master/mdc-111/starter dizininde bulunur. Başlamadan önce bu dizinde cd olduğundan emin olun.
...veya GitHub'dan kopyalayın
Bu kod laboratuvarını 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) aşağıdaki komutu çalıştırın:
npm install
Çok sayıda işlem görürsünüz ve sonunda terminalinizde yüklemenin başarılı olduğunu belirten bir mesaj gösterilir:
Başlatıcı uygulamayı çalıştırma
Başlangıç dizininde şunları ç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 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 ü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";
İşaretleri 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>
Dalgalı efekti 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 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 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 aşağıdakine benzer bir sonuç göreceksiniz:
Düğmeye basıldığında artık görsel geri bildirim olarak ince bir dalga efekti gösteriliyor.
4. Seçim öğesini güncelleme
MDC Select bileşeni, yerel bir HTML <select> öğesini sarar. Normalde <select> kullandığınız her yerde kullanabilirsiniz. "State" alanını güncelleyelim.
MDC düğüm 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, düğme içe aktarma işleminden hemen sonra _theme.scss öğesine ekleyin:
@import "@material/select/mdc-select";
Üstbilgileri 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 oku için aşağıdaki işaretlemeyi ekleyin:
<i class="mdc-select__dropdown-icon"></i>
Kapanıcı </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 aşağıdaki işaretlemeyi etiketin hemen arkasına 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 şu şekilde 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 dosyasının en üstüne aşağıdaki içe aktarma ifadesini ekleyin:
import {MDCSelect} from '@material/select';
Seçimi örneklemek için app.js öğesinin altına aşağıdakileri ekleyin:
new MDCSelect(document.querySelector('.mdc-select'));
Sayfayı yeniden yükleyin. Sayfa şu şekilde görünecektir:
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. Karmaşık içeriklerde kolayca tanımlanabilecek ve kullanıcılar bunlarla etkileşime geçtiğinde ince görsel geri bildirim gösterecek ş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
Seçili içe aktarma işleminden hemen sonra _theme.scss dosyasına aşağıdakileri ekleyin:
@import "@material/textfield/mdc-text-field";
İşaretleri 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, etiketten hemen sonra 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 şu şekilde 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 şö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 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ı örneklemek için app.js öğesinin 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. Yeniden yükleyin. Yeniden yüklediğinizde bu işlem şu şekilde görünmelidir:
Metin alanlarının tümü artık Material Teması'nı 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. İyi iş çıkardınız.
Ü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.