Penasaran dengan rating bintang, nah kali ini kami Kursus web design jakarta akan membahas membuat sebuah tampilan rating bintang, dimana rating bintang ini biasa kita temukan di sebuha marketplace-marketplace seperti ketika si pembeli sudah mengkonfirmasi barangya pasti di sebuah ulasan si pembeli akan menuliskan sebuah ulasanya berbelanja di toko tersebut, selain menggunakan teks, kadang kita di suguhkan dengan sebuah tampilan rating bintang ini, oke jadi bagaimana cara membuat tampilan rating bintang, simak terus ya teman-teman.
Untuk cara membuat tampilan rating bintang kita akn buat mudah menggunakan bootstrap vue, di karenakan di sebuah bootstrap vue sudah di siapkan sebuah component untuk membuat tampilan rating bintang. Rating bintang ini juga sudah masuk kedalam sebuah form jadi kita bisa mendapatkan valuenya untuk di proses datanya, oke langsung saja.
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 |
<template> <div> <b-input-group> <b-input-group-prepend> <b-button @click="value = null">Clear</b-button> </b-input-group-prepend> <b-form-rating v-model="value" color="#ff8800"></b-form-rating> <b-input-group-append> <b-input-group-text class="justify-content-center" style="min-width: 3em;"> {{ value }} </b-input-group-text> </b-input-group-append> </b-input-group> </div> </template> <script> export default { data() { return { value: null } } } </script> |
Kami Kursus web design mencoba untuk jelaskan sedikit inti untuk membuat rating bintang ini kita cukup membuatnya dengan b-form-rating
1 |
<b-form-rating v-model="value" color="#ff8800"></b-form-rating> |
untuk yang lainya kita bisa style, seperti contohnya di bootstrap vue, di bootstrap vue kita bisa menghapusnya lalu kita juga bisa menampilkan nilai dari valueya, oke kita lihat dulu hasilnya
bagaimana keren bukan, seperti yang ada di marketplace-marketplace kita juga bia mengatur sizenya dengan sm, lg, md
1 |
<b-form-rating id="rating-sm" v-model="value" size="sm"></b-form-rating> |
kita juga bisa menambahkan bintangnya dengan stars=”10″ misanya seperti ini
1 |
<b-form-rating id="rating-10" v-model="value10" stars="10"></b-form-rating> |
dengan mengganti warna bawaan dari bootstrap juga bisa
1 |
<b-form-rating v-model="value" variant="warning" class="mb-2"></b-form-rating> |
kita juga bisa menggantinya selain menggunakan bintang seperti icon hati misalnya:
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <div> <b-form-rating icon-empty="heart" icon-half="heart-half" icon-full="heart-fill" icon-clear="slash-circle" show-clear variant="danger" ><b-form-rating> </div> </template> |
keren bukan teman-teman kita tidak lagi pusing lagi membuatnya tidak repot lagi dengan bootstrap vue kita sudah langsung terima beres untuk membuat sebuah ratingnya, seperti halnya membuat sebuah inputan form biasanya.
oke kami kursus web design jakarta akan mencukupi sampai disini belajar kita tentang cara membuat tampilan rating bintang semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.