Ketika kita memberikan sebuah warna pada bootstrap cara yang simple adalah kita hanya memberikan sebuah class warna yang sudah di sedikan bootstrap ke sebuah elemen html sesuai yang kita ingin berikan efectnya, misal tag p kita berikan class text-primary seperti itu, lalu bagaimana jika kita ingin memberikan class itu tetapi melalui event dimana kita sedang menggunakan framework vuejs, sesaat lagi kita akan bahas cara memberikan efek warna bootstrap dengan VueJS, simak terus ya teman-teman.
Untuk kasus cara memberikan efek warna bootstrap dengan VueJS, kita akan menyediakan sebuah button dimana button itu mempunyai efect warna yang berbeda-beda misal setiap kita menekan button ini akan mendapatkan hasil yang berbeda, dan target kita untuk kali ini adalah sebuah judulnya ya, jadi judul itu akan kita rubah warna nya.
dan cara memberikan efek warna bootstrap dengan VueJS yang kita butuhkan adalah karena kita menggunkan event yang cocok adalah kita menggunakan bantuan methods oke langsung saja ya kita lihat caranya seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <head> <title>Cara Memberikan Efek Warna Bootstrap dengan VueJS</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> </head> <body> <div class="container mt-3" id="app"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="row"> <div class="bg-secondary p-3 text-center"> <h1 v-bind:class="color">Cara Memberikan Efek Warna Bootstrap dengan VueJS</h1> </div> </div> <div class="row mt-3"> <button v-on:click="warna('text-danger')" class="btn btn-danger mr-2">Danger</button> <button v-on:click="warna('text-primary')" class="btn btn-primary mr-2">Primary</button> <button v-on:click="warna('text-success')" class="btn btn-success mr-2">Success</button> <button v-on:click="warna('text-warning')" class="btn btn-warning mr-2">Warning</button> <button v-on:click="warna('text-info')" class="btn btn-info mr-2">Info</button> <button v-on:click="warna('text-light')" class="btn btn-light mr-2">Light</button> </div> </div> <div class="col-md-3"></div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { color: "" }, methods:{ warna(param){ if(param == "text-danger"){ this.color = param }else if(param == "text-light"){ this.color = param } else if(param == "text-primary"){ this.color = param } else if(param == "text-success"){ this.color = param } else if(param == "text-warning"){ this.color = param } else if(param == "text-info"){ this.color = param } } } }) </script> </body> </html> |
bisa dilihat kita menggunakan v-on:click=”warna()” jadi event itu akan menuju ke methods warna, dan didalam methods itu kita buat kondisi sesuai value button. dan hasil layoutnya seperti ini:
jika teman-teman ingin melihat demo nya silahkan klik saja lihat disini.
dan saya rasa sudah cukup jelas ya, tentang cara memberikan efek warna bootstrap dengan VueJS, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.