Membuat Situs Web Desain Dengan Framework Materialize CSS (Bagian 2)
Vertical Aligning Menggunakan Materialize
Anda dapat dengan mudah, memusatkan hal-hal secara vertikal dengan menambahkan valign-wrapper ke container, memegang item yang ingin Anda selaraskan secara vertikal.
<div class="box valign-wrapper">
<h5>Vertical</h5>
</div>
Depth Menggunakan Materialize
Dalam Materialize , semuanya harus memiliki kedalaman z atau titik tertentu yang menentukan seberapa jauh terangkat atau dekat dengan halaman elemen.Anda dapat dengan mudah menerapkan efek bayangan ini dengan menambahkan class = "z-depth-n" ke tag HTML.
<p class="z-depth-1">z-depth-1</p>Untuk contoh hasilnya bisa kalian lihat disini↵
<p class="z-depth-2">z-depth-2</p>
<p class="z-depth-3">z-depth-3</p>
<p class="z-depth-4">z-depth-4</p>
<p class="z-depth-5">z-depth-5</p>
Materialize Buttons
Ada dua jenis tombol utama yang dijelaskan dalam desain material. Tombol terangkat adalah tombol standar yang menandakan tindakan dan berupaya memberikan kedalaman pada halaman yang sebagian besar datar. Tombol aksi mengambang, melingkar dimaksudkan untuk fungsi yang sangat penting.
<a class="waves-effect waves-light btn">Stuff</a>Untuk contoh hasilnya bisa lihat disini↵
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud left"></i>button</a>
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud right"></i>button</a>
<a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content-add"></i></a>
Materialize Forms
Form / Formulir adalah cara standar untuk menerima data yang dimasukkan pengguna. Transisi dan kelancaran elemen-elemen ini sangat penting karena interaksi pengguna yang melekat terkait dengan bentuk.
Bidang teks memungkinkan input pengguna. Perbatasan harus menyala sederhana dan dengan jelas menunjukkan bidang mana yang sedang diedit pengguna. Kalian harus memiliki div .input-field yang membungkus input dan label. Ini membantu jQuery menampilkan label. Ini hanya digunakan dalam Input dan Textarea kita untuk membentuk elemen.
Jika kalian tidak ingin terdapat status validasi Hijau dan Merah, hapus saja kelas validasi dari input yang dimasukkan.
Bidang teks memungkinkan input pengguna. Perbatasan harus menyala sederhana dan dengan jelas menunjukkan bidang mana yang sedang diedit pengguna. Kalian harus memiliki div .input-field yang membungkus input dan label. Ini membantu jQuery menampilkan label. Ini hanya digunakan dalam Input dan Textarea kita untuk membentuk elemen.
Jika kalian tidak ingin terdapat status validasi Hijau dan Merah, hapus saja kelas validasi dari input yang dimasukkan.
Untuk contoh hasilnya bisa lihat disini↵<div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s6"> <input id="first_name" type="text" class="validate"> <label for="first_name">First Name</label> </div> <div class="input-field col s6"> <input id="last_name" type="text" class="validate"> <label for="last_name">Last Name</label> </div> </div> <div class="row"> <div class="input-field col s12"> <input id="username" type="text" class="validate"> <label for="username">Username</label> </div> </div> <div class="row"> <div class="input-field col s12"> <input id="password" type="password" class="validate"> <label for="password">Password</label> </div> </div> <div class="row"> <div class="input-field col s12"> <input id="email" type="email" class="validate"> <label for="email">Email</label> </div> </div> </form> </div>
Materialize Icons
Materialize telah memasukkan 740 Material Design Icons, milik Google. File font ikon tertanam ke file Materialize CSS dalam bentuk URI Data. Kelas ikon menggunakan elemen semu untuk memilih elemen HTML dan menggunakan konten yang dihasilkan untuk mengisinya dengan ikon menggunakan ikon UNICODE.
Untuk menggunakan ikon-ikon ini, cukup tempatkan nama ikon ke dalam kelas tag HTML
Untuk mengontrol ukuran ikon, ubah properti ukuran font-size kalian. Secara opsional, Anda dapat menggunakan small, large dan medium.
Untuk menggunakan ikon-ikon ini, cukup tempatkan nama ikon ke dalam kelas tag HTML
Untuk mengontrol ukuran ikon, ubah properti ukuran font-size kalian. Secara opsional, Anda dapat menggunakan small, large dan medium.
<i class="small mdi-content-add"></i> <i class="medium mdi-content-add"></i> <i class="large mdi-content-add"></i>
Materialize Tabs
Struktur tab terdiri dari daftar tab yang tidak berurutan yang memiliki hash yang sesuai dengan id tab. Kemudian, ketika kalian mengklik pada setiap tab, hanya wadah dengan id tab yang sesuai akan menjadi terlihat.
Untuk contoh hasilnya bisa lihat disini↵<div class="row" <div class="col s12"> <ul class="tabs"> <li class="tab col s3"><a href="#test1">Test 1</a></li> <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li> <li class="tab col s3"><a href="#test3">Test 3</a></li> <li class="tab col s3"><a href="#test4">Test 4</a></li> </ul> </div> <div id="test1" class="col s12">Test 1</div> <div id="test2" class="col s12">Test 2</div> <div id="test3" class="col s12">Test 3</div> <div id="test4" class="col s12">Test 4</div> </div>
Materialize's Material Box
Material Box adalah implementasi desain material dari plugin Lightbox, ketika pengguna mengklik gambar yang bisa diperbesar. Kotak material memusatkan gambar dan memperbesarnya dengan halus, tanpa gangguan. Untuk mengabaikan gambar, pengguna dapat mengklik gambar itu lagi, gulir menjauh, atau tekan tombol ESC. Sangat mudah untuk menambahkan keterangan singkat ke foto. Tambahkan saja caption sebagai atribut data-caption.
Untuk contoh hasilnya bisa lihat disini↵<img class="materialboxed" width="300" src="http://qnimate.comhttps://cask.scotch.io/2015/01/784014790032582570.png" data-caption="Materialize Demo">
Materialize Dropdown
Tambahkan daftar dropdown ke tombol apa saja. Pastikan bahwa atribut yang diaktifkan data cocok dengan id pada tag <ul>. Kalian dapat menambahkan pembagi dengan tag <li class = "divider"> </li>.
Untuk contoh hasilnya bisa lihat disini↵<!-- Dropdown Trigger --> <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a> <!-- Dropdown Structure --> <ul id='dropdown1' class='dropdown-content'> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li class="divider"></li> <li><a href="#!">three</a></li> </ul>
Membuat Situs Portofolio
Setelah kita membahas beberapa komponen terpenting dari Framework Materialize CSS . Saatnya menyatukan mereka dan membuat situs portofolio. Demo lengkap dari situs portofolio yang akan kita buat dalam tutorial ini. Link demo hasil↵
Introduction Banner
Di situs portofolio kita ini, pertama, kita akan memiliki spanduk horizontal besar yang menampilkan nama dan profesi. Kita dapat membuat ini menggunakan tag pemformatan teks Materialize dan sedikit CSS.
Untuk contoh hasilnya bisa lihat disini↵<div class="intro deep-orange lighten-2 z-depth-1"><h1 class="grey-text text-lighten-5">narayan prusty</h1> <h5 class="grey lighten-4 grey-text text-darken-1">web and mobile developer</h5> </div>
Detail Information
Kita perlu menampilkan bio, profil, dan status pekerjaan saat ini di portofolio kita. Untuk ini, kita bisa membuat kisi 3 kolom. Grid ini adalah 3 kolom layar sedang dan besar, tetapi pada ponsel itu ditumpuk.
Untuk contoh hasilnya bisa lihat disini↵<div class="container about"> <h5>about me</h5> <h6>let me introduce my self</h6> <hr> <div class="row"> <div class="col s12 m4 l4"> <h6>Story</h6> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="col s12 m4 l4"> <h6>Profile</h6> <div class="card blue-grey darken-1"> <div class="card-content white-text"> <img src="http://labs.qnimate.com/portfolio-materialize/images/profile.png" width="64" height="64"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p> </div> <div class="card-action"> <a href="#">Link</a> <a href='#'>Link</a> </div> </div> </div> <div class="col s12 m4 l4"> <h6>current jobs</h6> <ul class="collapsible"> <li class="active"> <div class="collapsible-header"><i class="mdi-av-web"></i>Designer</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-editor-format-align-justify"></i>Developer</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-av-play-shopping-bag"></i>Video Editor</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-editor-insert-comment"></i>Support Asst.</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> </div> </div> </div>
Kita menggunakan kartu Materialize di kolom Tengah. Kartu adalah cara yang mudah untuk menampilkan konten yang terdiri dari berbagai jenis objek. Mereka juga sangat cocok untuk menyajikan objek serupa yang ukuran atau tindakan yang didukungnya dapat sangat bervariasi, seperti foto dengan keterangan panjang variabel.
Di sini kami menggunakan Material Dilipat di kolom terakhir. Collapsibles adalah elemen akordion yang meluas saat diklik. Mereka memungkinkan Anda untuk menyembunyikan konten yang tidak langsung relevan bagi pengguna.
Di sini kami menggunakan Material Dilipat di kolom terakhir. Collapsibles adalah elemen akordion yang meluas saat diklik. Mereka memungkinkan Anda untuk menyembunyikan konten yang tidak langsung relevan bagi pengguna.
Final Thoughts
Kita telah melihat beberapa fitur dan komponen Desain Materialize. Ada banyak lagi komponen yang ditawarkan oleh Materialize sehingga kalian dapat membangun segala jenis tampilan situs web. Jika kalian berencana membuat situs web baru atau mendesain ulang situs kalian, maka saya sarankan untuk memilih Materialize Framework, karena ada sangat sedikit situs yang dirancang materi dan situs kalian akan menonjol. Kalian juga dapat menggunakan Materialize dalam merancang aplikasi seluler hybrid. Silakan bagikan pengalaman kalian dengan Materialize dengan berkomentar di bawah ini.