Membuat Aplikasi Menggunakan Komponen Bergaya di Vue.js

Halo, Habr! Suatu hari saya menemukan satu artikel yang sangat menarik dalam bahasa Portugis. Untungnya, kami berhasil menemukan versi bahasa Inggrisnya. Saya membawa terjemahan Anda ke dalam bahasa Rusia. Anda dapat menemukan terjemahan saya yang lain di halaman saya di Habr.

Tautan asli: Portugis , Inggris

Bagi mereka yang tidak dalam subjek. Styled-Components adalah perpustakaan yang sangat populer di kalangan pengembang asli-React & Ract. Ini memungkinkan Anda untuk menulis CSS khusus langsung di JS.

Di Vue, kita tahu betapa mudahnya bekerja dengan komponen file tunggal (SFC), karena semua komponen yang diperlukan dikumpulkan di satu tempat. Pola SFC telah secara signifikan meningkatkan popularitas Vue.

Beberapa bulan terakhir saya berkesempatan untuk mengambil bagian dalam pengembangan proyek besar React. Kami menggunakan Komponen Bergaya di dalamnya, dan itu adalah pengalaman yang sangat menarik.

Namun, di sebagian besar proyek saya, saya menggunakan Vue, jadi wajar jika saya ingin menggabungkan pengalaman baru dengan Styled-Components dan manfaat ekosistem Vue.js. Saat itulah saya menemukan bahwa solusi seperti itu sudah ada dan didukung oleh pencipta yang sama dengan perpustakaan serupa di bawah React: vue-style-components .

Mulai

Sisihkan obrolan kosong dan lanjutkan ke kode. Seperti biasa, gunakan benang atau npm.

// for yarn yarn add vue-styled-components // for npm npm install --save vue-styled-components 

Di github saya, Anda akan menemukan repositori dengan contoh-contoh menggunakan perpustakaan ini.

Setiap elemen yang digunakan dalam contoh-contoh dapat diproses oleh komponen-komponen bergaya-vue sebagai komponen yang terisolasi dengan sifat-sifat individualnya atau dengan menerima data dari komponen-komponen lain.

Contoh pertama kami hanyalah sebuah tombol dengan gaya default.

 import styled from "vue-styled-components"; const CButton = styled.button` font-size: 1em; text-align: center; color: #FFFFFF; border-radius: 5px; padding: 10px 15px; background-color: #0057AA; `; export default CButton; 

Di mana saja dalam aplikasi kita, kita dapat menggunakan komponen ini.

  import CButton from '@/components/elements/Button' export default { name: 'app', components: { CButton }, } 

Melewati parameter

Dalam komponen-vue-style, Anda dapat secara dinamis menentukan gaya untuk suatu komponen dengan melewatkan nilai-nilai ini melalui properti. Contoh ini menggambarkan bahwa ketika atribut utama dilewati, tombol akan menerima gaya latar belakang baru dan warna font.

 import styled from "vue-styled-components"; const typeButton = { primary: Boolean }; const CButtonProps = styled('button', typeButton)` font-size: 1em; text-align: center; color: ${props => props.primary ? '#0057AA' : '#FFFFFF'}; border-radius: 5px; padding: 10px 15px; background-color: ${props => props.primary ? '#FFFFFF' : '#0057AA'}; `; export default CButtonProps; 

Contoh di atas dapat ditingkatkan dan bahkan menambahkan properti baru (Anda dapat mengirimkan atribut sebanyak yang Anda inginkan). Semuanya berjalan sesuai dengan kebutuhan Anda dalam proyek.

Dengan bantuan perpustakaan ini, kami mendapatkan kesempatan untuk mengelola gaya melalui logika. Pada contoh di bawah ini, Anda memiliki kesempatan untuk memilih skema warna mana yang ingin Anda tetapkan untuk tombol Anda tanpa memengaruhi orang lain, sehingga mendiversifikasi aplikasi Anda.

 import styled from "vue-styled-components"; const typeButton = { type: String, radius: Boolean }; const styleButton = type => { switch (type) { case "primary": return ` background-color: #FFFFFF; color: #0057AA; `; case "error": return ` background-color: #B4000B; color: #FDFDFD; `; case "success": return ` background-color: #00C887; color: #37435F; `; default: return ` background-color: #0057AA; color: #FFFFFF; `; } } const CButtonPropsCond = styled('button', typeButton)` font-size: 1em; text-align: center; padding: 10px 15px; border-radius: ${({ radius }) => radius ? "6px" : null}; ${(props) => styleButton(props.type)} `; export default CButtonPropsCond; 

Untuk menjelaskan proses pembuatan tombol ini dengan lebih baik: pertama-tama kita (selalu) mengimpor komponen-vue-style, tepat setelah (dari baris 3 ke baris 6) kita perlu menentukan jenis properti apa yang akan diteruskan ke komponen. Dari baris 8 hingga 31, kami membuat fungsi yang mengambil nilai properti tipe, sesuai dengan apa yang diteruskan, ia mengembalikan atribut latar belakang. warna dan warna register masing-masing, jika tidak ada yang dilewatkan sebagai properti, tombol akan diberi nilai default.

Berkat pengetahuan ini, Anda dapat menerapkan atribut baru yang akan membuat komponen khusus Anda sangat dinamis.

Saya meninggalkan contoh-contoh kecil ini di GitHub saya sehingga Anda dapat mengambil langkah awal dalam menguasai perpustakaan ini. Selamat menikmati.

Tautkan ke repositori dengan contoh-contoh .