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

add themed chips (#498)

Browse source 
* Added theming to mdChips

* Added more examples. Improved API.

* Removed classes from docs.
This commit is contained in:
Fergardi 2017-02-15 21:14:24 +01:00 committed by Marcos Moura
parent a241ddc00f
commit 0a8b6735d4
2 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
docs/src/pages/components/Chips.vue
View file

@ -223,6 +223,32 @@
</code-block>
</div>
</example-box>
<example-box card-title="Themed Chips">
<div slot="demo">
<md-chip >Default</md-chip>
<md-chip md-deletable>Default</md-chip>
<md-chip class="md-primary">Primary</md-chip>
<md-chip md-deletable class="md-primary">Primary</md-chip>
<md-chip class="md-accent">Accent</md-chip>
<md-chip md-deletable class="md-accent">Accent</md-chip>
<md-chip class="md-warn">Warn</md-chip>
<md-chip md-deletable class="md-warn">Warn</md-chip>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-chip&gt;Default&lt;/md-chip&gt;
&lt;md-chip md-deletable&gt;Default&lt;/md-chip&gt;
&lt;md-chip class=&quot;md-primary&quot;&gt;Primary&lt;/md-chip&gt;
&lt;md-chip md-deletable class=&quot;md-primary&quot;&gt;Primary&lt;/md-chip&gt;
&lt;md-chip class=&quot;md-accent&quot;&gt;Accent&lt;/md-chip&gt;
&lt;md-chip md-deletable class=&quot;md-accent&quot;&gt;Accent&lt;/md-chip&gt;
&lt;md-chip class=&quot;md-warn&quot;&gt;Warn&lt;/md-chip&gt;
&lt;md-chip md-deletable class=&quot;md-warn&quot;&gt;Warn&lt;/md-chip&gt;
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>

15
src/components/mdChips/mdChips.theme
View file

@ -21,5 +21,20 @@
color: #{'BACKGROUND-COLOR'};
}
}
&.md-primary {
color: #{'PRIMARY-CONTRAST'};
background-color: #{'PRIMARY-COLOR'};
}
&.md-accent {
color: #{'ACCENT-CONTRAST'};
background-color: #{'ACCENT-COLOR'};
}
&.md-warn {
color: #{'WARN-CONTRAST'};
background-color: #{'WARN-COLOR'};
}
}
}