Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-20 14:51:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add to the bottom-bar the new icon options (#377)

Browse source 
* adding to the bottombar the new icon options

* making the requested changes

* missing term
This commit is contained in:
Sombriks 2017-01-23 17:43:05 -03:00 committed by Marcos Moura
parent 4a9c26e210
commit b2cd2d3086
2 changed files with 64 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
docs/src/pages/components/BottomBar.vue
View file

@ -67,6 +67,18 @@
<md-table-cell>Icon name on the <a href="https://material.io/icons/" target="_blank" rel="noopener">Material Icons</a> docs.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-icon-src</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Set icon src url. See <a href="#/components/Icon">Icon </a> component for more details.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-iconset</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Set the 3rd party iconset to use. See <a href="#/components/Icon">Icon </a> component for more details.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-active</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
@ -111,6 +123,52 @@
</code-block>
</div>
</example-box>
<example-box card-title="Using SVG">
<div slot="demo">
<div class="phone-viewport">
<md-bottom-bar>
<md-bottom-bar-item md-icon-src="assets/icon-home.svg">Recents</md-bottom-bar-item>
<md-bottom-bar-item md-icon-src="assets/icon-home.svg" md-active>Favorites</md-bottom-bar-item>
<md-bottom-bar-item md-icon-src="assets/icon-home.svg">Nearby</md-bottom-bar-item>
</md-bottom-bar>
</div>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-bottom-bar&gt;
&lt;md-bottom-bar-item md-icon-src="assets/icon-home.svg"&gt;Recents&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon-src="assets/icon-home.svg" md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-icon-src="assets/icon-home.svg"&gt;Nearby&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
</code-block>
</div>
</example-box>
<example-box card-title="Using Iconsets">
<div slot="demo">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"/>
<div>This example uses <a href="http://simplelineicons.com/" target="simple_line">Simple Line Icons</a></div>
<div class="phone-viewport">
<md-bottom-bar>
<md-bottom-bar-item md-iconset="icon-speedometer">Recents</md-bottom-bar-item>
<md-bottom-bar-item md-iconset="icon-heart" md-active>Favorites</md-bottom-bar-item>
<md-bottom-bar-item md-iconset="icon-cursor">Nearby</md-bottom-bar-item>
</md-bottom-bar>
</div>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-bottom-bar&gt;
&lt;md-bottom-bar-item md-iconset="icon-speedometer"&gt;Recents&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-iconset="icon-heart" md-active&gt;Favorites&lt;/md-bottom-bar-item&gt;
&lt;md-bottom-bar-item md-iconset="icon-cursor"&gt;Nearby&lt;/md-bottom-bar-item&gt;
&lt;/md-bottom-bar&gt;
</code-block>
</div>
</example-box>
<example-box card-title="Shifting">
<div slot="demo">

8
src/components/mdBottomBar/mdBottomBarItem.vue
View file

@ -1,6 +1,7 @@
<template>
<a :href="href" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-if="href">
<md-icon>{{ mdIcon }}</md-icon>
<md-icon v-if="mdIcon || mdIconSrc || mdIconset" :md-icon-src="mdIconSrc" :md-iconset="mdIconset">{{ mdIcon }}</md-icon>
<md-ink-ripple :md-disabled="disabled" />
@ -10,7 +11,8 @@
</a>
<button type="button" class="md-bottom-bar-item" :class="classes" :disabled="disabled" @click="setActive" v-else>
<md-icon>{{ mdIcon }}</md-icon>
<md-icon v-if="mdIcon || mdIconSrc || mdIconset" :md-src="mdIconSrc" :md-iconset="mdIconset">{{ mdIcon }}</md-icon>
<md-ink-ripple :md-disabled="disabled" />
@ -24,6 +26,8 @@
export default {
props: {
mdIcon: String,
mdIconSrc: String,
mdIconset: String,
mdActive: Boolean,
disabled: String,
href: String