bem components
v5.1.1
bem-components adalah perpustakaan open-source yang menyediakan satu set komponen visual (blok) yang sudah jadi untuk membuat antarmuka web.
Perpustakaan menyediakan tema desain. Versi ini memperkenalkan tema islands , yang mengimplementasikan desain Yandex baru. Fitur termasuk mendukung banyak tema sekaligus, dan membuat tema baru.
Informasi tambahan
common.blocks - Dukungan dari perangkat dan browser apa pun.desktop.blocks - Dukungan browser desktop.touch.blocks - Implementasi fitur spesifik untuk platform sentuh.touch-phone.blocks -Implementasi fitur spesifik untuk smartphone.touch-pad.blocks -Implementasi fitur spesifik untuk tablet.design/<common|desktop|touch|touch-phone|touch-pad>.blocks -Implementasi berbagai desain (tema). Desktop
Menyentuh
Untuk mendukung Internet Explorer 8, Anda harus menambahkan:
*.ie.styl ke halaman. Untuk melakukan ini, tentukan mereka dalam konfigurasi build (lihat contoh ini) dan tambahkan komentar di bagian page (lihat contoh ini). Anda juga dapat mengaktifkan gaya untuk Internet Explorer 8 di tingkat template. Perakit
Pengoptimal
Analisis Kode
Lainnya
Ada beberapa cara untuk mulai menggunakan bem-components . Pendekatan terbaik tergantung pada persyaratan proyek Anda dan kompatibilitasnya dengan teknologi dan alat perpustakaan, serta pada pengalaman Anda dengan proyek BEM.
Pilih metode yang paling cocok untuk proyek Anda:
| Dist | Sumber | Disusun |
|---|---|---|
| CSS dan kode javascript dan templat perpustakaan yang sudah dirakit. Terintegrasi dengan menautkan ke halaman. Tidak memerlukan perakitan atau kompatibilitas dengan proyek Anda. | Kode Sumber Lengkap Perpustakaan. Membutuhkan perakitan. Proyek Anda harus sepenuhnya kompatibel dengan teknologi dan alat perpustakaan. | Kode Sumber Lengkap Perpustakaan. Membutuhkan perakitan. Berbeda dari metode sumber dalam postCSS tersebut dikompilasi ke dalam CSS. Cocok untuk proyek -proyek di mana PostCSS tidak digunakan. |
Cara Anda menggunakan perpustakaan menentukan cara mengintegrasikannya ke dalam proyek Anda:
Kami merekomendasikan menggunakan ENB atau BEM-Tools untuk mengintegrasikan perpustakaan.
Sebagai contoh, Anda dapat menggunakan Project-Stub, di mana perpustakaan diaktifkan secara default. Anda juga dapat membuat proyek dan menggunakan Yo Generator untuk menghubungkan perpustakaan (ini memungkinkan Anda untuk membuat konfigurasi proyek yang diperlukan).
Cara termudah untuk menghubungkan perpustakaan ke proyek adalah dengan mengunduh file perpustakaan yang telah dirakit dan menggunakan elemen <link> dan <script> untuk menambahkannya ke halaman HTML. Ada beberapa cara untuk melakukan ini:
Untuk informasi tentang cara menggunakan file pustaka yang terhubung, lihat bekerja dengan perpustakaan.
Struktur perpustakaan yang telah dirakit sebelumnya
Ada set file terpisah yang tersedia untuk tiga platform:
Setiap set termasuk:
bem-components.css -styles;bem-components.ie.css -gaya untuk IE8 (informasi lebih lanjut);bem-components.js -JavaScript;bem-components.bemhtml.js -template bemhtml;bem-components.bh.js -Templat BH;bem-components.js+bemhtml.js -menggabungkan kode javascript dan templat bemhtml untuk menggunakan templat di browser;bem-components.js+bh.js -menggabungkan kode JavaScript dan templat BH untuk menggunakan templat di browser;bem-components.no-autoinit.js -JavaScript tanpa inisialisasi otomatis. Gunakan jika Anda perlu menulis kode Anda sendiri di i-bem.js ;bem-components.no-autoinit.js+bemhtml.js ;bem-components.no-autoinit.js+bh.js .Setiap set juga mencakup versi pengembangan dari file yang sama (melestarikan pemformatan dan komentar asli).
Cara tercepat dan termudah untuk menghubungkan perpustakaan ke proyek adalah dengan menambahkan elemen <link> dan <script> ke halaman HTML:
< link rel =" stylesheet " href =" https://yastatic.net/bem-components/latest/desktop/bem-components.css " >
< script src =" https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js " > </ script > Pola untuk menghubungkan file dari cdn: //yastatic.net/library-name/version/platform/file-name .
Contoh: //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bemhtml.js .
Pilih versi perpustakaan yang sesuai dan unduh arsip. Buka ritsleting. Tambahkan file ke halaman menggunakan elemen <link> dan <script> :
< link rel =" stylesheet " href =" desktop/bem-components.css " >
< script src =" desktop/bem-components.js+bemhtml.js " > </ script > Kode Perpustakaan ada di GitHub: https://github.com/bem/bem-pomponents.
Untuk menjalankan build, gunakan perintah ini:
# Clone the library source code
git clone https://github.com/bem/bem-components.git
# Switch to the library folder
cd bem-components
# Install the required dependencies
npm install
# Build Dist
npm run dist
Sebagai hasil dari build, file akan tersedia di folder bem-components-dist . Hubungkan file di HTML halaman:
< link rel =" stylesheet " href =" bower_components/bem-components-dist/desktop/bem-components.css " >
< script src =" bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js " > </ script > Bower asalkan sudah ada di proyek Anda, jalankan perintah berikut:
bower i bem/bem-components-dist
Sebagai hasil dari build, file akan tersedia di folder bem-components-dist . Hubungkan file dengan cara yang sama seperti untuk metode sebelumnya:
< link rel =" stylesheet " href =" bower_components/bem-components-dist/desktop/bem-components.css " >
< script src =" bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js " > </ script > Ada dua langkah untuk bekerja dengan perpustakaan:
Langkah pertama selalu sama. Langkah kedua dapat dilakukan dengan tiga cara berbeda, yang dapat Anda gabungkan sesuai keinginan:
Metode 1. Salin HTML dari contoh. Untuk melakukan ini, buka tab HTML di header contoh.
Ini adalah pendekatan termudah, tetapi jika templat diperbarui di versi perpustakaan mendatang, Anda harus membuat perubahan secara manual di setiap blok yang diperbarui.
Metode 2. Gunakan templating di browser. Merakit pustaka Dist termasuk template BEMHTML dan BH yang sudah dirakit sebelumnya untuk dipilih.
Untuk melakukan ini, salin Contoh Kode Bemjson dari dokumentasi dan tempel ke kode HTML halaman. Gunakan tab BEMJSON di header contoh.
Kode HTML halaman akan terlihat seperti ini:
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " >
< title > bem-components as a library </ title >
< link rel =" stylesheet " href =" https://yastatic.net/bem-components/latest/desktop/bem-components.css " >
</ head >
< body class =" page page_theme_islands " >
< form class =" form " action =" / " > </ form >
< script src =" https://yastatic.net/bem-components/latest/desktop/bem-components.no-autoinit.js+bemhtml.js " > </ script >
< script >
modules . require ( [ 'i-bem__dom' , 'BEMHTML' , 'jquery' , 'i-bem__dom_init' ] , function ( BEMDOM , BEMHTML , $ , init ) {
var html = BEMHTML . apply ( {
block : 'select' ,
mods : { mode : 'check' , theme : 'islands' , size : 'm' } ,
name : 'select1' ,
val : [ 2 , 3 ] ,
text : 'Conference programme' ,
options : [
{ val : 1 , text : 'Report' } ,
{ val : 2 , text : 'Master class' } ,
{ val : 3 , text : 'Round Table' }
]
} ) ;
BEMDOM . append ( $ ( '.form' ) , html ) ;
// NOTE: explicitly call `init();` if you need to initialize blocks from HTML markup
} ) ;
</ script >
</ body >
</ html >Berbeda dengan metode pertama, kode ini tidak akan memerlukan perubahan pada markup ketika perpustakaan diperbarui ke versi baru. Namun, markup yang dihasilkan klien mungkin tidak diindeks juga oleh mesin pencari.
Metode 3 . Jalankan {BEMHTML,BH}.apply() di node.js dan berikan browser html yang disiapkan:
var BEMHTML = require ( './dist/desktop/bem-components.bemhtml.js' ) . BEMHTML ;
BEMHTML . apply ( {
block : 'select' ,
mods : { mode : 'check' , theme : 'islands' , size : 'm' } ,
name : 'select1' ,
val : [ 2 , 3 ] ,
text : 'Conference programme' ,
options : [
{ val : 1 , text : 'Report' } ,
{ val : 2 , text : 'Master class' } ,
{ val : 3 , text : 'Round Table' }
]
} ) ; // returns HTML line Perpustakaan terdiri dari blok, yang dapat Anda lihat diwakili secara visual dalam pameran bem-components . Blok memiliki status yang menentukan model perilaku. Keadaan blok diekspresikan melalui pengubah dan bidang khusus. Mengubah pengubah menciptakan acara yang dapat digunakan untuk bekerja dengan blok.
Tidak perlu membuat acara BEM khusus jika Anda dapat bekerja dengan acara perubahan pengubah. Bergantung pada apa yang digunakan untuk mengubah keadaan komponen (pengubah atau bidang), berbagai peristiwa digunakan:
value , acara change digunakan.bem-components Kontrol dalam bem-components dapat digunakan sebagai dasar untuk membuat komponen perpustakaan lainnya. Kontrol seperti itu tidak memiliki model seperti dalam HTML, dan mereka dapat digunakan untuk tugas yang tidak memerlukan semantik dari model HTML tertentu.
Sebagai contoh, pikirkan "model perilaku" untuk HTMlinPutElement, yang merupakan antarmuka tingkat lebih tinggi yang dirancang khusus untuk mengedit data. Yang berbeda tentang blok bem-components adalah bahwa mereka dapat digunakan sebagai dasar blok di perpustakaan lain yang akan menyelesaikan masalah yang sama. Tetapi seiring dengan itu, mereka dapat melayani tujuan lain dalam antarmuka yang tidak memerlukan semantik HTML input .
focused Kontrol dalam komponen BEM memiliki dua jenis fokus, yang diatur menggunakan pengubah focused dan focused-hard . Jenis fokus menentukan penampilan kontrol.
Pengubah dipilih secara otomatis berdasarkan bagaimana fokus diatur:
focused - Set untuk klik mouse pada kontrol.focused-hard -Set saat kontrol dipilih menggunakan keyboard atau melalui JavaScript. Ini menyoroti komponen lebih jelas ketika mendapatkan fokus. Misalnya, dalam tema Islands , sebagian besar kontrol mendapatkan perbatasan tambahan ketika focused-hard diatur. Dapatkan Sumber:
$ git clone git://github.com/bem/bem-components.git
$ cd bem-componentsInstal dependensi (alat):
$ npm install Untuk kemudian menjalankan alat yang diinstal secara lokal, gunakan export PATH=./node_modules/.bin:$PATH atau metode alternatif apa pun.
Instal perpustakaan dependen:
$ bower installBangun contoh dan tes:
$ npm run build-allMulai server pengembangan:
$ npm start
$ open http://localhost:8080/Catatan: Untuk informasi tentang merakit blok individu, lihat tes bagian untuk templat.
Analisis Kode:
$ npm run lint Perintah npm run test-specs meluncurkan tes unit di JS.
Untuk meluncurkan perakitan berbasis titik, gunakan perintah enb make specs desktop.specs/<block-name> (misalnya, enb make specs desktop.specs/input ).
Tes akan dijalankan secara otomatis di Travis untuk setiap permintaan tarik.
Hermione digunakan untuk pengujian tata letak.
Tes untuk setiap blok disimpan dalam file block-name.hermione.js terpisah di hermione/ Direktori. Secara lokal, tes dieksekusi secara manual. Pada Travis, tes dieksekusi secara otomatis. Untuk Selenium Grid, layanan Saucelabs digunakan.
Untuk melaksanakan tes secara lokal, Anda perlu:
SAUCE_USERNAME dan SAUCE_ACCESS_KEY ).sc (Sauceconnect) dan tunggu terowongan dibuka.hermione .hermione gui .Saat mengembangkan tes baru untuk mempercepat eksekusi lokal:
.hermione.conf.js , ubah opsi gridUrl menjadi http://localhost:4444/ . Untuk informasi lebih lanjut tentang penggunaan Hermione dengan berbagai backend, baca artikel Hermione Quick Start.
Catatan: Anda perlu menyimpan tangkapan layar dari saucelab di repositori. Ini membantu menghindari perbedaan saat merender font.
Sebelum melakukan gambar referensi baru atau yang dimodifikasi, Anda harus:
Bangun Alat untuk Perpustakaan memungkinkan Anda untuk membangun dan menjalankan tes pada template blok BEMHTML dan BH.
Tambahkan tes untuk blok
[block name].tmpl-specs di direktori blok di level yang diperlukan. File uji akan disimpan di direktori ini.Beberapa tes dapat ditulis untuk blok dan, karenanya, setiap tes terdiri dari dua file (Bemjson dan HTML) dengan nama yang sama.
desktop.blocks
└── myblocks
├── myblock.bemhtml.js
├── myblock.bh.js
├── ...
└── myblock.tmpl-specs
├── 10-default.bemjson.js
├── 10-default.html
├── 20-advanced.bemjson.js
└── 20-advanced.html
Untuk membangun dan menjalankan tes, gunakan:
magic run tmpl-specsUntuk membangun tes pada tingkat definisi yang diperlukan, gunakan:
magic make desktop.tmpl-specsUntuk membangun tes hanya untuk blok tertentu, gunakan:
magic make desktop.tmpl-specs/buttonJika prosedur pembuatan berhasil, tes dijalankan secara otomatis, dan Anda akan melihat semua hasil tes. Jika hasil penerapan templat tidak cocok dengan sampel blok dalam HTML, Anda akan melihat kesalahan dalam log yang menunjukkan bagaimana hal itu berbeda dari sampel blok.
Semua tes dijalankan secara otomatis menggunakan Travis pada setiap permintaan tarik.
Tugas saat ini terdaftar di papan gesit khusus.
Status tugas:
Kode dan Dokumentasi © 2012 Yandex LLC. Kode yang dirilis di bawah Lisensi Publik Mozilla 2.0.
