Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-10 08:14:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[rating-bar] doc updated with explanations about support to svg and png

Browse source
This commit is contained in:
Laercio Santana 2017-03-23 13:25:35 -03:00
parent 5114878b78
commit 2d73e3b1a7
3 changed files with 40 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/src/assets/icon-home-back.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 840 B

BIN
docs/src/assets/icon-home-front.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 842 B

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

@ -38,13 +38,13 @@
<md-table-row>
<md-table-cell>md-front-icon</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>The font icon used to represent full star. Default <code>star</code>.</md-table-cell>
<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>
</md-table-row>
<md-table-row>
<md-table-cell>md-back-icon</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>The font icon used to represent empty star. Default <code>star</code>.</md-table-cell>
<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>
</md-table-row>
<md-table-row>
@ -139,6 +139,42 @@
</code-block>
</div>
</example-box>
<example-box card-title="Images">
<div slot="demo">
<md-layout :md-gutter="true">
<md-layout>
<strong class="md-body-2">SVG:</strong>
<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>
<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>
</md-layout>
<md-layout>
<strong class="md-body-2">PNG:</strong>
<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>
<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>
</md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-layout :md-gutter="true"&gt;<br />
&lt;md-layout&gt;<br />
&lt;strong class="md-body-2"&gt;SVG:&lt;/strong&gt;<br />
&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 />
&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 />
&lt;/md-layout&gt;<br />
<br />
&lt;md-layout&gt;<br />
&lt;strong class="md-body-2"&gt;PNG:&lt;/strong&gt;<br />
&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 />
&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 />
&lt;/md-layout&gt;<br />
&lt;/md-layout&gt;
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
@ -159,7 +195,8 @@
rating9: 0.18,
rating10: 0.45,
rating11: 0.82,
rating12: 0.5
rating12: 0.5,
rating13: 0.7
};
}
};