Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-02 12:34:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[rating-bar] add examples on the doc

Browse source
This commit is contained in:
Laercio Santana 2017-03-18 19:04:12 -03:00
parent e0da31eafb
commit 70afd79bc9
1 changed files with 51 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
docs/src/pages/components/RatingBar.vue
View file

@ -76,7 +76,47 @@
</div>
<div slot="example">
<example-box card-title="Default">
<div slot="demo">
<md-rating-bar v-model="rating1" disabled></md-rating-bar>
<md-rating-bar v-model="rating2" :num-stars="10" disabled></md-rating-bar>
<md-rating-bar v-model="rating3" :num-stars="7" class="md-primary" disabled></md-rating-bar>
<md-rating-bar v-model="rating4" :num-stars="7" class="md-accent" disabled></md-rating-bar>
<md-rating-bar v-model="rating5" :num-stars="7" class="md-warn" disabled></md-rating-bar>
<md-rating-bar v-model="rating6" :num-stars="7" class="md-primary" :back-icon="'star_border'"></md-rating-bar>
<md-rating-bar v-model="rating7" :num-stars="5" class="md-warn" :back-icon="'panorama_fish_eye'" :front-icon="'lens'"></md-rating-bar>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-rating-bar v-model="rating1" disabled&gt;&lt;/md-rating-bar&gt;<br />
&lt;md-rating-bar v-model="rating2" :num-stars="10" disabled&gt;&lt;/md-rating-bar&gt;<br />
&lt;md-rating-bar v-model="rating3" :num-stars="7" class="md-primary" disabled&gt;&lt;/md-rating-bar&gt;<br />
&lt;md-rating-bar v-model="rating4" :num-stars="7" class="md-accent" disabled&gt;&lt;/md-rating-bar&gt;<br />
&lt;md-rating-bar v-model="rating5" :num-stars="7" class="md-warn" disabled&gt;&lt;/md-rating-bar&gt;<br />
&lt;md-rating-bar v-model="rating6" :num-stars="7" class="md-primary" :back-icon="'star_border'"&gt;&lt;/md-rating-bar&gt;<br />
&lt;md-rating-bar v-model="rating7" :num-stars="5" class="md-warn" :back-icon="'panorama_fish_eye'" :front-icon="'lens'"&gt;&lt;/md-rating-bar&gt;
</code-block>
</div>
</example-box>
<example-box card-title="Themes">
<div slot="demo">
<md-rating-bar v-model="rating8" class="md-primary" md-theme="orange" disabled></md-rating-bar>
<md-rating-bar v-model="rating9" class="md-primary" md-theme="brown" disabled></md-rating-bar>
<md-rating-bar v-model="rating10" class="md-primary" md-theme="light-blue"></md-rating-bar>
<md-rating-bar v-model="rating11" class="md-primary" md-theme="teal" :back-icon="'star_border'"></md-rating-bar>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-rating-bar v-model="rating8" class="md-primary" md-theme="orange" disabled&gt;&lt;/md-rating-bar&gt;<br />
&lt;md-rating-bar v-model="rating9" class="md-primary" md-theme="brown" disabled&gt;&lt;/md-rating-bar&gt;<br />
&lt;md-rating-bar v-model="rating10" class="md-primary" md-theme="light-blue"&gt;&lt;/md-rating-bar&gt;<br />
&lt;md-rating-bar v-model="rating11" class="md-primary" md-theme="teal" :back-icon="'star_border'"&gt;&lt;/md-rating-bar&gt;
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
@ -86,7 +126,17 @@
export default {
data() {
return {
rating1: 0.70,
rating2: 0.6,
rating3: 0.2,
rating4: 0.84,
rating5: 0.7,
rating6: 0.5,
rating7: 0.90,
rating8: 0.9,
rating9: 0.18,
rating10: 0.45,
rating11: 0.82
};
}
};