Google Polimer - Bagaimana Ia Akan Tukar Aplikasi Web Jalan Dibina

dan unsur-unsur yang membina kawalan pemain UI secara rahsia.

Hari ini, dengan Komponen Web, kita boleh namakan elemen kita sendiri juga. Kita boleh membina elemen seperti, untuk membenamkan suapan Twitter atau (mungkin) untuk membenamkan carta.

Selain itu, unsur-unsur tersuai ini juga mungkin mempunyai beberapa atribut tersuai yang diterima. Berkenaan dengan elemen, anda menetapkan atribut yang dipanggil nama pengguna yang akan digunakan untuk menentukan nama pengguna Twitter.

Elemen Custom dalam polimer

Polimer datang dengan sekumpulan unsur yang menyumbang (hampir) setiap aplikasi web yang diperlukan. Google membahagikan elemen ini kepada kumpulan: Unsur Besi, Unsur Kertas, Komponen Web Google, Unsur Emas, Elemen Neon, Elemen Platinum, dan Molekul.

1. Unsur Besi

Elemen Besi adalah koleksi unsur-unsur asas. Unsur-unsur asas ini adalah yang biasa kita gunakan membina laman web seperti input, bentuk dan imej. Perbezaannya ialah Polimer menambah beberapa kuasa tambahan kepada unsur-unsur ini.

Semua elemen dalam kumpulan ini adalah besi- sebagai contoh , yang digunakan untuk memaparkan imej. The elemen telah dilengkapi dengan beberapa atribut tambahan yang tidak dapat kita terapkan secara teratur elemen. Kita boleh, sebagai contoh, tambah pramuat, pudar, dan pemegang tempat atribut:

Contoh di atas akan mula menunjukkan ruang letak imej dan kemudian memudar ke imej sebenar di dalam src kerana ia dimuatkan sepenuhnya, melaksanakan kesan memuat imej yang lancar.

2. Elemen Kertas

The Elemen Kertas adalah sekumpulan unsur Reka Bentuk Bahan. Reka Bentuk Bahan adalah bahasa reka bentuk Google untuk menjadikan antara muka pengguna dan pengalaman merentas platform Google kedua-dua aplikasi Web dan Android lebih konsisten secara visual. Beberapa elemen yang unik untuk Reka Bentuk Bahan adalah Kertas dan Butang Tindakan Terapung (FAB).

Kertas

Kertas adalah metafora Google untuk medium yang mendasari kandungan. Untuk menambah kertas dengan Polimer, kami menggunakan elemen. Elemen ini mengambil 2 atribut:

• ketinggian untuk mengangkat Kertas, dengan itu menambah bayangan untuk mengukuhkan ketinggian
• animasi akan menggunakan animasi sebagai perubahan ketinggian Kertas.

Butang Tindakan Terapung (FAB)

Butang Tindakan Terapung (FAB) adalah butang bulat dengan ikon, terapung di skrin, biasanya dengan warna yang menonjol. Google mencadangkan bahawa butang ini membawa fungsi kerap diakses. Contohnya:

Coretan kod berikut menambah Bahan Kertas dengan imej dan FAB.

Kami akan mempunyai hasil berikut:

Kami mempunyai foto dengan a “hati” butang terapung di atasnya. Klik untuk Suka foto itu, dan butang itu mengeluarkan kesan riak untuk mengakui klik.

• Lihat Demo Kertas

3. Komponen Web Google

Komponen Web Google adalah elemen khas yang menangani API dan perkhidmatan Google seperti Peta Google, Youtube, serta Google Feed, untuk menamakan beberapa. Elemen dalam kumpulan ini membuat berinteraksi dengan perkhidmatan Google hanya beberapa baris sahaja.

Berikut adalah contoh untuk menunjukkan Peta Google menggunakan elemen.

  Ini adalah Googleplex  

Seperti yang anda dapat, di atas elemen mengambil latitud dan longitud untuk menentukan lokasi pada peta. Kita juga boleh sarang untuk menunjukkan penanda peta lokasi itu bersama dengan teks yang akan muncul apabila mengklik penanda.

• Lihat Demo Peta

Mahu tunjukkan video Youtube? anda boleh menggunakannya elemen.

Begitu juga kami menyesuaikan output melalui atribut.

• Lihat Demo Youtube

4. Unsur Emas

Unsur Emas adalah elemen yang direka khusus untuk aplikasi e-dagang. Di sini anda akan menemui unsur untuk menunjukkan kad kredit, e-mel, telefon dan input ZIP yang semuanya telah dilengkapi pengesahan format untuk memastikan input dan keselamatan data yang betul. Berikut adalah satu contoh untuk menambah input kad kredit Visa.

5. Unsur lain

Unsur-unsur yang lain termasuk unsur-unsur Neon untuk animasi dan kesan khas, elemen Platinum untuk pemberitahuan luar talian dan menolak dan akhirnya Molekul, pembalut untuk perpustakaan pihak ketiga.

Nota Editor: Pada masa penulisan ini, Elemen Neon, Unsur Platinum dan Molekul masih tidak tersedia.

Mengintegrasikan Polimer

Mahu menggunakan Polimer dalam pembangunan web anda? Inilah cara memasang dan menyatukannya ke halaman web anda. Oleh kerana kebanyakan elemen Polimer bergantung pada satu sama lain, cara terbaik untuk memasang Polimer adalah melalui Bower.

Bower adalah pengurus dependensi projek yang memudahkan untuk memasang skrip atau gaya yang diperlukan untuk menjalankan projek. Lihat siaran awal kami tentang cara memasang, mengemas kini & alih keluar perpustakaan web dengan mudah dengan Bower.

Untuk mengintegrasikan Polimer, mulakan Terminal kemudian navigasi ke direktori projek anda, dengan menganggap anda telah mencipta satu. Kemudian lari bower init arahan untuk memulakan fail bower.json ke dalam projek anda yang akan digunakan untuk merakam kebergantungan projek. Buka bower.json dan tambahkan baris berikut.

 "dependencies": "polymer": "Polymer / polymer # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0" Unsur-unsur polimer / elemen besi # ^ 1.0.0 "," unsur-unsur kertas ":" PolimerElements / unsur-unsur kertas # ^ 1.0.0 "," unsur-unsur emas ":" PolimerElements / unsur emas # ^ 1.0.0 " 

Persediaan ini mengandaikan bahawa kita akan menggunakan semua elemen dari setiap kumpulan. Anda boleh mengalih keluar apa yang anda tidak perlukan dari senarai ketergantungan. Apabila kebergantungan ditetapkan, jalankan memasang bower arahan untuk memasang dependencies pada senarai.

Proses ini mungkin mengambil sedikit masa kerana ia melibatkan meraih sejumlah besar fail dari repositori. Sebaik sahaja selesai, anda perlu mencari mereka yang disimpan di dalam bower_components folder.

Buka fail HTML yang anda ingin gunakan komponen Polymer masuk. Di dalam kepala dokumen, pautan WebComponents.js yang mana satu polyfill untuk penyemak imbas yang tidak menyokong WebComponents lagi, dan import fail komponen menggunakan Import HTML.

Inilah contohnya:

Persediaan ini akan membolehkan kami menggunakannya , , unsur-unsur.

Mempamerkan

Berikut adalah beberapa aplikasi web yang sudah menggunakan Google Polymer.

Google

Google menggunakan Google Polymer dalam laman web Google IO 2015; Google Fi, perkhidmatan wayarles Google untuk pembawa dan vendor dalam perkongsian; dan Muzik Google.

Elemen Custom

CustomElements adalah hab di mana anda boleh menemui elemen tersuai yang dibina dengan Komponen Web. Ia menggunakan elemen Kertas untuk mengandungi dan membina senarai. Ia juga menyediakan laluan mudah untuk memasang elemen-elemen ini melalui Bower dan NPM.

Editor Dev Chrome

Aplikasi Chrome untuk penyuntingan kod yang berfungsi dengan baik. Aplikasi ini menggunakan butang FAB, menu Kertas, dan elemen dialog Kertas dalam antara muka pengguna.

Pereka Polimer

Alat untuk membina aplikasi web dengan elemen Polimer menggunakan antara muka drag-and-drop.

Ramalan Harian Harian

Laporan dan ramalan bursa saham dibina sepenuhnya dengan elemen Polimer.

Mel polimer

Apl klien e-mel untuk Gmail. Ia kelihatan bagus dan cair, walaupun sedih, ia tidak berfungsi sepenuhnya.

Pemikiran Akhir

Polimer mempunyai skop yang sangat besar dan mungkin membawa anda beberapa saat untuk membiasakan diri dengan semua elemen adat serta APInya. Walau bagaimanapun, Komponen Web dan Polimer pasti akan mempengaruhi cara kami membina aplikasi web. Tinggal di depan orang ramai dengan membaca lebih lanjut mengenai Komponen Web - rujukan didapati di bawah.

• Lihat Demo
• Muat turun Sumber

Rujukan berguna

• Negeri Komponen Web
• Pengenalan Terperinci Ke Elemen Custom
• Blog Rasmi Polimer Google