Skip to content

Commit 676537a

Browse files
LaercioSantanaLaercioSantana
committed
[rating-bar] changes in variables names to improvement api interface
1 parent 4323ef8 commit 676537a

File tree

4 files changed

+98
-98
lines changed

4 files changed

+98
-98
lines changed

‎docs/src/pages/components/RatingBar.vue

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -30,39 +30,39 @@
3030
</md-table-row>
3131

3232
<md-table-row>
33-
<md-table-cell>md-num-stars</md-table-cell>
33+
<md-table-cell>md-max-rating</md-table-cell>
3434
<md-table-cell><code>Number</code></md-table-cell>
35-
<md-table-cell>Number of the stars. Default <code>5</code>.</md-table-cell>
35+
<md-table-cell>Max rating allowed. Default <code>5</code>.</md-table-cell>
3636
</md-table-row>
3737

3838
<md-table-row>
39-
<md-table-cell>md-front-icon</md-table-cell>
39+
<md-table-cell>md-full-icon</md-table-cell>
4040
<md-table-cell><code>String</code></md-table-cell>
4141
<md-table-cell>The icon used to represent full star. Can be a material icon from google font or src of the image file (svg or png). Default <code>star</code>.</md-table-cell>
4242
</md-table-row>
4343

4444
<md-table-row>
45-
<md-table-cell>md-back-icon</md-table-cell>
45+
<md-table-cell>md-empty-icon</md-table-cell>
4646
<md-table-cell><code>String</code></md-table-cell>
4747
<md-table-cell>The icon used to represent empty star. Can be a material icon from google font or src of the image file (svg or png). Default <code>star</code>.</md-table-cell>
4848
</md-table-row>
4949

5050
<md-table-row>
51-
<md-table-cell>md-front-iconset</md-table-cell>
51+
<md-table-cell>md-full-iconset</md-table-cell>
5252
<md-table-cell><code>String</code></md-table-cell>
5353
<md-table-cell>The font icon set used on full star. Example: <code>md-iconset="fa fa-heart"</code> for font awesome.</md-table-cell>
5454
</md-table-row>
5555

5656
<md-table-row>
57-
<md-table-cell>md-back-iconset</md-table-cell>
57+
<md-table-cell>md-empty-iconset</md-table-cell>
5858
<md-table-cell><code>String</code></md-table-cell>
5959
<md-table-cell>The font icon set used on empty star. Example: <code>md-iconset="fa fa-heart-o"</code> for font awesome.</md-table-cell>
6060
</md-table-row>
6161

6262
<md-table-row>
63-
<md-table-cell>md-size</md-table-cell>
63+
<md-table-cell>md-icon-size</md-table-cell>
6464
<md-table-cell><code>Number</code></md-table-cell>
65-
<md-table-cell>Change the size. From 1 to 5. Default <code>1</code>.</md-table-cell>
65+
<md-table-cell>Change the icon size. From 1 to 5. Default <code>1</code>.</md-table-cell>
6666
</md-table-row>
6767

6868
<md-table-row>
@@ -97,23 +97,23 @@
9797
<example-box card-title="Default">
9898
<div slot="demo">
9999
<md-rating-bar v-model="rating1" disabled></md-rating-bar>
100-
<md-rating-bar v-model="rating2" :md-num-stars="10" disabled></md-rating-bar>
101-
<md-rating-bar v-model="rating3" :md-num-stars="7" class="md-primary" disabled></md-rating-bar>
102-
<md-rating-bar v-model="rating4" :md-num-stars="7" class="md-accent" disabled></md-rating-bar>
103-
<md-rating-bar v-model="rating5" :md-num-stars="7" class="md-warn" disabled></md-rating-bar>
104-
<md-rating-bar v-model="rating6" :md-num-stars="7" class="md-primary" :md-back-icon="'star_border'"></md-rating-bar>
105-
<md-rating-bar v-model="rating7" :md-num-stars="5" class="md-warn" :md-back-icon="'panorama_fish_eye'" :md-front-icon="'lens'"></md-rating-bar>
100+
<md-rating-bar v-model="rating2" :md-max-rating="10" disabled></md-rating-bar>
101+
<md-rating-bar v-model="rating3" :md-max-rating="7" class="md-primary" disabled></md-rating-bar>
102+
<md-rating-bar v-model="rating4" :md-max-rating="7" class="md-accent" disabled></md-rating-bar>
103+
<md-rating-bar v-model="rating5" :md-max-rating="7" class="md-warn" disabled></md-rating-bar>
104+
<md-rating-bar v-model="rating6" :md-max-rating="7" class="md-primary" :md-empty-icon="'star_border'"></md-rating-bar>
105+
<md-rating-bar v-model="rating7" :md-max-rating="5" class="md-warn" :md-empty-icon="'panorama_fish_eye'" :md-full-icon="'lens'"></md-rating-bar>
106106
</div>
107107

108108
<div slot="code">
109109
<code-block lang="xml">
110110
&lt;md-rating-bar v-model="rating1" disabled&gt;&lt;/md-rating-bar&gt;<br />
111-
&lt;md-rating-bar v-model="rating2" :md-num-stars="10" disabled&gt;&lt;/md-rating-bar&gt;<br />
112-
&lt;md-rating-bar v-model="rating3" :md-num-stars="7" class="md-primary" disabled&gt;&lt;/md-rating-bar&gt;<br />
113-
&lt;md-rating-bar v-model="rating4" :md-num-stars="7" class="md-accent" disabled&gt;&lt;/md-rating-bar&gt;<br />
114-
&lt;md-rating-bar v-model="rating5" :md-num-stars="7" class="md-warn" disabled&gt;&lt;/md-rating-bar&gt;<br />
115-
&lt;md-rating-bar v-model="rating6" :md-num-stars="7" class="md-primary" :md-back-icon="'star_border'"&gt;&lt;/md-rating-bar&gt;<br />
116-
&lt;md-rating-bar v-model="rating7" :md-num-stars="5" class="md-warn" :md-back-icon="'panorama_fish_eye'" :md-front-icon="'lens'"&gt;&lt;/md-rating-bar&gt;
111+
&lt;md-rating-bar v-model="rating2" :md-max-rating="10" disabled&gt;&lt;/md-rating-bar&gt;<br />
112+
&lt;md-rating-bar v-model="rating3" :md-max-rating="7" class="md-primary" disabled&gt;&lt;/md-rating-bar&gt;<br />
113+
&lt;md-rating-bar v-model="rating4" :md-max-rating="7" class="md-accent" disabled&gt;&lt;/md-rating-bar&gt;<br />
114+
&lt;md-rating-bar v-model="rating5" :md-max-rating="7" class="md-warn" disabled&gt;&lt;/md-rating-bar&gt;<br />
115+
&lt;md-rating-bar v-model="rating6" :md-max-rating="7" class="md-primary" :md-empty-icon="'star_border'"&gt;&lt;/md-rating-bar&gt;<br />
116+
&lt;md-rating-bar v-model="rating7" :md-max-rating="5" class="md-warn" :md-empty-icon="'panorama_fish_eye'" :md-full-icon="'lens'"&gt;&lt;/md-rating-bar&gt;
117117
</code-block>
118118
</div>
119119
</example-box>
@@ -123,31 +123,31 @@
123123
<md-rating-bar v-model="rating8" class="md-primary" md-theme="orange" disabled></md-rating-bar>
124124
<md-rating-bar v-model="rating9" class="md-primary" md-theme="brown" disabled></md-rating-bar>
125125
<md-rating-bar v-model="rating10" class="md-primary" md-theme="light-blue"></md-rating-bar>
126-
<md-rating-bar v-model="rating11" class="md-primary" md-theme="teal" :md-back-icon="'star_border'"></md-rating-bar>
126+
<md-rating-bar v-model="rating11" class="md-primary" md-theme="teal" :md-empty-icon="'star_border'"></md-rating-bar>
127127
</div>
128128

129129
<div slot="code">
130130
<code-block lang="xml">
131131
&lt;md-rating-bar v-model="rating8" class="md-primary" md-theme="orange" disabled&gt;&lt;/md-rating-bar&gt;<br />
132132
&lt;md-rating-bar v-model="rating9" class="md-primary" md-theme="brown" disabled&gt;&lt;/md-rating-bar&gt;<br />
133133
&lt;md-rating-bar v-model="rating10" class="md-primary" md-theme="light-blue"&gt;&lt;/md-rating-bar&gt;<br />
134-
&lt;md-rating-bar v-model="rating11" class="md-primary" md-theme="teal" :md-back-icon="'star_border'"&gt;&lt;/md-rating-bar&gt;
134+
&lt;md-rating-bar v-model="rating11" class="md-primary" md-theme="teal" :md-empty-icon="'star_border'"&gt;&lt;/md-rating-bar&gt;
135135
</code-block>
136136
</div>
137137
</example-box>
138138

139139
<example-box card-title="Sizes">
140140
<div slot="demo">
141141
<md-rating-bar v-model="rating12" ></md-rating-bar>
142-
<md-rating-bar v-model="rating12" :md-size="2" ></md-rating-bar>
143-
<md-rating-bar v-model="rating12" :md-size="3" ></md-rating-bar>
142+
<md-rating-bar v-model="rating12" :md-icon-size="2" ></md-rating-bar>
143+
<md-rating-bar v-model="rating12" :md-icon-size="3" ></md-rating-bar>
144144
</div>
145145

146146
<div slot="code">
147147
<code-block lang="xml">
148148
&lt;md-rating-bar v-model="rating12" &gt;&lt;/md-rating-bar&gt;<br />
149-
&lt;md-rating-bar v-model="rating12" :md-size="2" &gt;&lt;/md-rating-bar&gt;<br />
150-
&lt;md-rating-bar v-model="rating12" :md-size="3" &gt;&lt;/md-rating-bar&gt;
149+
&lt;md-rating-bar v-model="rating12" :md-icon-size="2" &gt;&lt;/md-rating-bar&gt;<br />
150+
&lt;md-rating-bar v-model="rating12" :md-icon-size="3" &gt;&lt;/md-rating-bar&gt;
151151
</code-block>
152152
</div>
153153
</example-box>
@@ -157,14 +157,14 @@
157157
<md-layout :md-gutter="true">
158158
<md-layout>
159159
<strong class="md-body-2">SVG:</strong>
160-
<md-rating-bar v-model="rating13" class="md-primary" :md-back-icon="'assets/icon-home.svg'" :md-front-icon="'assets/icon-home.svg'"></md-rating-bar>
161-
<md-rating-bar v-model="rating13" class="md-primary" :md-back-icon="'assets/icon-home.svg'" :md-front-icon="'assets/icon-home.svg'" :md-size="2"></md-rating-bar>
160+
<md-rating-bar v-model="rating13" class="md-primary" :md-empty-icon="'assets/icon-home.svg'" :md-full-icon="'assets/icon-home.svg'"></md-rating-bar>
161+
<md-rating-bar v-model="rating13" class="md-primary" :md-empty-icon="'assets/icon-home.svg'" :md-full-icon="'assets/icon-home.svg'" :md-icon-size="2"></md-rating-bar>
162162
</md-layout>
163163

164164
<md-layout>
165165
<strong class="md-body-2">PNG:</strong>
166-
<md-rating-bar v-model="rating13" :md-back-icon="'assets/icon-home-back.png'" :md-front-icon="'assets/icon-home-front.png'"></md-rating-bar>
167-
<md-rating-bar v-model="rating13" :md-back-icon="'assets/icon-home-back.png'" :md-front-icon="'assets/icon-home-front.png'" :md-size="2"></md-rating-bar>
166+
<md-rating-bar v-model="rating13" :md-empty-icon="'assets/icon-home-back.png'" :md-full-icon="'assets/icon-home-front.png'"></md-rating-bar>
167+
<md-rating-bar v-model="rating13" :md-empty-icon="'assets/icon-home-back.png'" :md-full-icon="'assets/icon-home-front.png'" :md-icon-size="2"></md-rating-bar>
168168
</md-layout>
169169
</md-layout>
170170
</div>
@@ -174,14 +174,14 @@
174174
&lt;md-layout :md-gutter="true"&gt;<br />
175175
&lt;md-layout&gt;<br />
176176
&lt;strong class="md-body-2"&gt;SVG:&lt;/strong&gt;<br />
177-
&lt;md-rating-bar v-model="rating13" class="md-primary" :md-back-icon="'assets/icon-home.svg'" :md-front-icon="'assets/icon-home.svg'"&gt;&lt;/md-rating-bar&gt;<br />
178-
&lt;md-rating-bar v-model="rating13" class="md-primary" :md-back-icon="'assets/icon-home.svg'" :md-front-icon="'assets/icon-home.svg'" :md-size="2"&gt;&lt;/md-rating-bar&gt;<br />
177+
&lt;md-rating-bar v-model="rating13" class="md-primary" :md-empty-icon="'assets/icon-home.svg'" :md-full-icon="'assets/icon-home.svg'"&gt;&lt;/md-rating-bar&gt;<br />
178+
&lt;md-rating-bar v-model="rating13" class="md-primary" :md-empty-icon="'assets/icon-home.svg'" :md-full-icon="'assets/icon-home.svg'" :md-icon-size="2"&gt;&lt;/md-rating-bar&gt;<br />
179179
&lt;/md-layout&gt;<br />
180180
<br />
181181
&lt;md-layout&gt;<br />
182182
&lt;strong class="md-body-2"&gt;PNG:&lt;/strong&gt;<br />
183-
&lt;md-rating-bar v-model="rating13" :md-back-icon="'assets/icon-home-back.png'" :md-front-icon="'assets/icon-home-front.png'"&gt;&lt;/md-rating-bar&gt;<br />
184-
&lt;md-rating-bar v-model="rating13" :md-back-icon="'assets/icon-home-back.png'" :md-front-icon="'assets/icon-home-front.png'" :md-size="2"&gt;&lt;/md-rating-bar&gt;<br />
183+
&lt;md-rating-bar v-model="rating13" :md-empty-icon="'assets/icon-home-back.png'" :md-full-icon="'assets/icon-home-front.png'"&gt;&lt;/md-rating-bar&gt;<br />
184+
&lt;md-rating-bar v-model="rating13" :md-empty-icon="'assets/icon-home-back.png'" :md-full-icon="'assets/icon-home-front.png'" :md-icon-size="2"&gt;&lt;/md-rating-bar&gt;<br />
185185
&lt;/md-layout&gt;<br />
186186
&lt;/md-layout&gt;
187187
</code-block>
@@ -194,21 +194,21 @@
194194
<div slot="demo">
195195
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
196196
<div>This first example uses <a href="http://fontawesome.io/icons/" target="fa_icons">Font Awesome Icons</a></div>
197-
<md-rating-bar v-model="rating14" class="md-primary" :md-back-iconset="'fa fa-bell-o'" :md-front-iconset="'fa fa-bell'"></md-rating-bar>
198-
<md-rating-bar v-model="rating14" class="md-warn" :md-size="2" :md-back-iconset="'fa fa-heart-o'" :md-front-iconset="'fa fa-heart'"></md-rating-bar>
197+
<md-rating-bar v-model="rating14" class="md-primary" :md-empty-iconset="'fa fa-bell-o'" :md-full-iconset="'fa fa-bell'"></md-rating-bar>
198+
<md-rating-bar v-model="rating14" class="md-warn" :md-icon-size="2" :md-empty-iconset="'fa fa-heart-o'" :md-full-iconset="'fa fa-heart'"></md-rating-bar>
199199
<hr/>
200200
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
201201
<div>This second example uses <a href="http://ionicons.com/" target="ion_icons">Ion Icons</a></div>
202-
<md-rating-bar v-model="rating14" class="md-primary" :md-back-iconset="'ion-ios-bell-outline'" :md-front-iconset="'ion-ios-bell'"></md-rating-bar>
203-
<md-rating-bar v-model="rating14" class="md-warn" :md-size="2" :md-back-iconset="'ion-android-favorite-outline'" :md-front-iconset="'ion-android-favorite'"></md-rating-bar>
202+
<md-rating-bar v-model="rating14" class="md-primary" :md-empty-iconset="'ion-ios-bell-outline'" :md-full-iconset="'ion-ios-bell'"></md-rating-bar>
203+
<md-rating-bar v-model="rating14" class="md-warn" :md-icon-size="2" :md-empty-iconset="'ion-android-favorite-outline'" :md-full-iconset="'ion-android-favorite'"></md-rating-bar>
204204
</div>
205205

206206
<div slot="code">
207207
<code-block lang="xml">
208208
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/&gt;<br />
209209
&lt;div&gt;This first example uses &lt;a href="http://fontawesome.io/icons/" target="fa_icons"&gt;Font Awesome Icons&lt;/a&gt;&lt;/div&gt;<br />
210-
&lt;md-rating-bar v-model="rating14" class="md-primary" :md-back-iconset="'fa fa-bell-o'" :md-front-iconset="'fa fa-bell'"&gt;&lt;/md-rating-bar&gt;<br />
211-
&lt;md-rating-bar v-model="rating14" class="md-warn" :md-size="2" :md-back-iconset="'fa fa-heart-o'" :md-front-iconset="'fa fa-heart'"&gt;&lt;/md-rating-bar&gt;<br />
210+
&lt;md-rating-bar v-model="rating14" class="md-primary" :md-empty-iconset="'fa fa-bell-o'" :md-full-iconset="'fa fa-bell'"&gt;&lt;/md-rating-bar&gt;<br />
211+
&lt;md-rating-bar v-model="rating14" class="md-warn" :md-icon-size="2" :md-empty-iconset="'fa fa-heart-o'" :md-full-iconset="'fa fa-heart'"&gt;&lt;/md-rating-bar&gt;<br />
212212
&lt;style type="text/css"&gt;&lt;!-- offset fix to awesome icons--&gt;<br />
213213
.fa {<br />
214214
font-size: 19px !important;<br />
@@ -234,8 +234,8 @@
234234
&lt;hr/&gt;<br />
235235
&lt;link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/&gt;<br />
236236
&lt;div&gt;This second example uses &lt;a href="http://ionicons.com/" target="ion_icons"&gt;Ion Icons&lt;/a&gt;&lt;/div&gt;<br />
237-
&lt;md-rating-bar v-model="rating14" class="md-primary" :md-back-iconset="'ion-ios-bell-outline'" :md-front-iconset="'ion-ios-bell'"&gt;&lt;/md-rating-bar&gt;<br />
238-
&lt;md-rating-bar v-model="rating14" class="md-warn" :md-size="2" :md-back-iconset="'ion-android-favorite-outline'" :md-front-iconset="'ion-android-favorite'"&gt;&lt;/md-rating-bar&gt;<br />
237+
&lt;md-rating-bar v-model="rating14" class="md-primary" :md-empty-iconset="'ion-ios-bell-outline'" :md-full-iconset="'ion-ios-bell'"&gt;&lt;/md-rating-bar&gt;<br />
238+
&lt;md-rating-bar v-model="rating14" class="md-warn" :md-size="2" :md-empty-iconset="'ion-android-favorite-outline'" :md-full-iconset="'ion-android-favorite'"&gt;&lt;/md-rating-bar&gt;<br />
239239
&lt;style type="text/css"&gt; &lt;!-- offset fix to ion icons--&gt;<br />
240240
i[class*="ion-"]{<br />
241241
padding-left: 0.1em;<br />

‎src/components/mdRatingBar/mdRatingBar.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ $button-radius: 2px;
99
padding: 3px;
1010
border-radius: 2px;
1111

12-
> .md-front-stars {
12+
> .md-full-icon {
1313
overflow-x: hidden;
1414
display: inherit;
1515
}
1616

17-
> .md-back-stars,
18-
> .md-front-stars {
17+
> .md-empty-icon,
18+
> .md-full-icon {
1919
> .md-icon {
2020
margin: 0;
2121
white-space: nowrap;
@@ -30,8 +30,8 @@ $button-radius: 2px;
3030
}
3131

3232
&[disabled] {
33-
> .md-back-stars,
34-
> .md-front-stars {
33+
> .md-empty-icon,
34+
> .md-full-icon {
3535
> .md-icon {
3636
cursor: default;
3737
}

‎src/components/mdRatingBar/mdRatingBar.theme

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
.THEME_NAME {
22
&.md-rating-bar {
3-
> .md-back-stars .md-icon {
3+
> .md-empty-icon .md-icon {
44
color: #{'BACKGROUND-CONTRAST-0.26'};
55
}
66

7-
> .md-front-stars .md-icon {
7+
> .md-full-icon .md-icon {
88
color: #{'BACKGROUND-CONTRAST-0.38'};
99
}
1010

11-
&.md-primary > .md-front-stars .md-icon {
11+
&.md-primary > .md-full-icon .md-icon {
1212
color: #{'PRIMARY-COLOR'};
1313
}
1414

15-
&.md-accent > .md-front-stars .md-icon {
15+
&.md-accent > .md-full-icon .md-icon {
1616
color: #{'ACCENT-COLOR'};
1717

1818
}
1919

20-
&.md-warn > .md-front-stars .md-icon {
20+
&.md-warn > .md-full-icon .md-icon {
2121
color: #{'WARN-COLOR'};
2222
}
2323
}

0 commit comments

Comments
 (0)