Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-22 07:34:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add support for theming on Cards (#173)

Browse source 
* #148 - Support for theming on Card Component

* #148 - Updating the docs

* #148 - Removing theming for card's internal components

* #148 - Updating the docs
This commit is contained in:
Mateus Cerqueira Gonçalves 2016-12-08 14:04:59 -02:00 committed by Marcos Moura
parent 33af65eb45
commit 3e5f930fa7
2 changed files with 170 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
docs/src/pages/components/Card.vue
View file

@ -6,6 +6,11 @@
<p>The card components are very granular. Every single part of a card is a component. You can combine them in any order that you want, following the same logic of the examples.</p>
<p>You can also use other Material components inside the card, like the "Complete Example".</p>
<p>The following classes can be applied to change the color palette:</p>
<ul class="md-body-2">
<li><code>md-primary</code></li>
<li><code>md-accent</code></li>
<li><code>md-warn</code></li>
</ul>
</div>
<div slot="api">
@ -818,6 +823,156 @@
</div>
</example-box>
<example-box card-title="Themed Cards">
<div class="card-holder" slot="demo">
<md-card class="md-primary">
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card>
<md-card class="md-accent">
<md-card-header>
<md-card-header-text>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header-text>
<md-menu md-size="4" md-direction="bottom left">
<md-button class="md-icon-button" md-menu-trigger>
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<span>Call</span>
<md-icon>phone</md-icon>
</md-menu-item>
<md-menu-item>
<span>Send a message</span>
<md-icon>message</md-icon>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-header>
<md-card-media>
<img src="assets/card-image-1.jpg" alt="People">
</md-card-media>
<md-card-content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
</md-card-content>
</md-card>
<md-card class="md-warn">
<md-card-media>
<img src="assets/card-image-2.jpg" alt="People">
</md-card-media>
<md-card-header>
<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
</md-card-header>
<md-card-actions>
<md-button>Action</md-button>
<md-button>Action</md-button>
</md-card-actions>
</md-card>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-card class="md-primary"&gt;
&lt;md-card-media&gt;
&lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;md-card-header&gt;
&lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
&lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
&lt;/md-card-header&gt;
&lt;md-card-actions&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;/md-card-actions&gt;
&lt;md-card-content&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
&lt;/md-card-content&gt;
&lt;/md-card&gt;
&lt;md-card class="md-accent"&gt;
&lt;md-card-header&gt;
&lt;md-card-header-text&gt;
&lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
&lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
&lt;/md-card-header-text&gt;
&lt;md-menu md-size=&quot;4&quot; md-direction=&quot;bottom left&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger&gt;
&lt;md-icon&gt;more_vert&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;
&lt;span&gt;Call&lt;/span&gt;
&lt;md-icon&gt;phone&lt;/md-icon&gt;
&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;
&lt;span&gt;Send a message&lt;/span&gt;
&lt;md-icon&gt;message&lt;/md-icon&gt;
&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;/md-card-header&gt;
&lt;md-card-media&gt;
&lt;img src=&quot;assets/card-image-1.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;md-card-content&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non, voluptas eius illo quas, saepe voluptate pariatur in deleniti minus sint. Excepturi.
&lt;/md-card-content&gt;
&lt;/md-card&gt;
&lt;md-card class="md-warn"&gt;
&lt;md-card-media&gt;
&lt;img src=&quot;assets/card-image-2.jpg&quot; alt=&quot;People&quot;&gt;
&lt;/md-card-media&gt;
&lt;md-card-header&gt;
&lt;div class=&quot;md-title&quot;&gt;Title goes here&lt;/div&gt;
&lt;div class=&quot;md-subhead&quot;&gt;Subtitle here&lt;/div&gt;
&lt;/md-card-header&gt;
&lt;md-card-actions &gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;md-button&gt;Action&lt;/md-button&gt;
&lt;/md-card-actions&gt;
&lt;/md-card&gt;
</code-block>
</div>
</example-box>
<example-box card-title="Complete Example">
<div class="card-holder" slot="demo">
<md-card class="card-example" v-md-theme="'blue'">

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

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