rating.vue
3.45 KB
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<script setup>
import * as demoCode from '@/views/demos/forms/form-elements/rating/demoCodeRating'
</script>
<template>
<VRow class="match-height">
<VCol
cols="12"
md="6"
>
<!-- 👉 Basic -->
<AppCardCode
title="Basic"
:code="demoCode.basic"
>
<p>The <code>v-rating</code> component provides a simple interface for gathering user feedback.</p>
<DemoRatingBasic />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Density -->
<AppCardCode
title="Density"
:code="demoCode.density"
>
<p>Control the space occupied by <code>v-rating</code> items using the <code>density</code> prop.</p>
<DemoRatingDensity />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Colors -->
<AppCardCode
title="Colors"
:code="demoCode.colors"
>
<p>The <code>v-rating</code> component can be colored as you want, you can set both selected and not selected colors.</p>
<DemoRatingColors />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Size -->
<AppCardCode
title="Size"
:code="demoCode.size"
>
<p>Utilize the same sizing classes available in <code>v-icon</code> or provide your own with the <code>size</code> prop.</p>
<DemoRatingSize />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Length -->
<AppCardCode
title="Length"
:code="demoCode.length"
>
<p>Change the number of items by modifying the the <code>length</code> prop.</p>
<DemoRatingLength />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Clearable -->
<AppCardCode
title="Clearable"
:code="demoCode.clearable"
>
<p>Use <code>clearable</code> prop to allows for the component to be cleared. Triggers when the icon containing the current value is clicked.</p>
<DemoRatingClearable />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Readonly -->
<AppCardCode
title="Readonly"
:code="demoCode.readonly"
>
<p>For ratings that are not meant to be changed you can use <code>readonly</code> prop.</p>
<DemoRatingReadonly />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Hover -->
<AppCardCode
title="Hover"
:code="demoCode.hover"
>
<p>Provides visual feedback when hovering over icons</p>
<DemoRatingHover />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Incremented -->
<AppCardCode
title="Incremented"
:code="demoCode.incremented"
>
<p>The <code>half-increments</code> prop increases the granularity of the ratings, allow for .5 values as well.</p>
<DemoRatingIncremented />
</AppCardCode>
</VCol>
<VCol
cols="12"
md="6"
>
<!-- 👉 Item slot -->
<AppCardCode
title="Item slot"
:code="demoCode.itemSlot"
>
<p>Slots enable advanced customization possibilities and provide you with more freedom in how you display the rating.</p>
<DemoRatingItemSlot />
</AppCardCode>
</VCol>
</VRow>
</template>