mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-12 09:13:11 +00:00
Merge pull request #12 from marcosmoura/components/mdCard
Components > md-card
This commit is contained in:
Marcos Moura
GitHub
commit
88b5157199
30 changed files with 1431 additions and 9 deletions
|
|
@ -39,6 +39,10 @@
|
|||
<router-link exact to="/components/button-toggle">Button Toggle</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/card">Card</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/checkbox">Checkbox</router-link>
|
||||
</md-list-item>
|
||||
|
|
|
|||
BIN
docs/src/assets/avatar-2.jpg
Normal file
BIN
docs/src/assets/avatar-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/src/assets/avatar.png
Normal file
BIN
docs/src/assets/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
docs/src/assets/card-example.jpg
Normal file
BIN
docs/src/assets/card-example.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
docs/src/assets/card-image-1.jpg
Normal file
BIN
docs/src/assets/card-image-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
docs/src/assets/card-image-2.jpg
Normal file
BIN
docs/src/assets/card-image-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
docs/src/assets/card-image-3.jpg
Normal file
BIN
docs/src/assets/card-image-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
docs/src/assets/card-sky.jpg
Normal file
BIN
docs/src/assets/card-sky.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
docs/src/assets/card-weather.png
Normal file
BIN
docs/src/assets/card-weather.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
docs/src/assets/cover.png
Normal file
BIN
docs/src/assets/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
|
|
@ -2,6 +2,14 @@
|
|||
<single-page class="single-page-home" label="Changelog">
|
||||
<single-page-banner label="Changelog"></single-page-banner>
|
||||
|
||||
<section>
|
||||
<h2 class="md-headline">v0.2.0 - New components</h2>
|
||||
<h3 class="md-title">New Components:</h3>
|
||||
<ul>
|
||||
<li>Cards</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="md-headline">v0.1.2 - Minor Fixes</h2>
|
||||
<ul>
|
||||
|
|
@ -47,7 +55,7 @@
|
|||
<h3 class="md-title">UI Elements:</h3>
|
||||
<ul>
|
||||
<li>Themes</li>
|
||||
<li>Tipography</li>
|
||||
<li>Typography</li>
|
||||
<li>Fluid Media</li>
|
||||
<li>Custom Scrollbar</li>
|
||||
<li>Selection Styles</li>
|
||||
|
|
|
|||
761
docs/src/pages/components/Card.vue
Normal file
761
docs/src/pages/components/Card.vue
Normal file
|
|
@ -0,0 +1,761 @@
|
|||
<template>
|
||||
<demo-page label="Components - Card">
|
||||
<div slot="examples">
|
||||
<demo-example label="Regular Cards">
|
||||
<md-card>
|
||||
<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>
|
||||
<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-button class="md-icon-button">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
</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>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-2.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<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>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Hover Effect">
|
||||
<md-card md-with-hover>
|
||||
<md-card-header>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header>
|
||||
|
||||
<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-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card md-with-hover>
|
||||
<md-card-media v-md-ink-ripple>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card md-with-hover>
|
||||
<md-card-header>
|
||||
<md-avatar>
|
||||
<img src="assets/avatar.png" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</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.
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Image cover with predefined aspect ratio">
|
||||
<md-card>
|
||||
<md-card-media-cover md-text-scrim>
|
||||
<md-card-media md-ratio="16:9">
|
||||
<img src="assets/card-sky.jpg" alt="Skyscraper">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-area>
|
||||
<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-area>
|
||||
</md-card-media-cover>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<md-card-media-cover md-solid>
|
||||
<md-card-media md-ratio="1:1">
|
||||
<img src="assets/card-sky.jpg" alt="Skyscraper">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-area>
|
||||
<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-area>
|
||||
</md-card-media-cover>
|
||||
</md-card>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Media">
|
||||
<md-card>
|
||||
<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-card-media>
|
||||
<img src="assets/avatar-2.jpg" alt="People">
|
||||
</md-card-media>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<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-card-media md-medium>
|
||||
<img src="assets/card-weather.png" alt="People">
|
||||
</md-card-media>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-header-text>
|
||||
<div class="md-title">Title goes</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header-text>
|
||||
|
||||
<md-card-media md-big>
|
||||
<img src="assets/card-weather.png" alt="People">
|
||||
</md-card-media>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<md-card-media-actions>
|
||||
<md-card-media>
|
||||
<img src="assets/cover.png" alt="Cover">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card-media-actions>
|
||||
</md-card>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Full control">
|
||||
<md-card>
|
||||
<md-card-area>
|
||||
<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-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-area>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
|
||||
<md-card>
|
||||
<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-expand>
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
<span style="flex: 1"></span>
|
||||
<md-button class="md-icon-button" md-expand-trigger>
|
||||
<md-icon>keyboard_arrow_down</md-icon>
|
||||
</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-expand>
|
||||
</md-card>
|
||||
|
||||
<md-card class="card-example" v-md-theme="'blue'">
|
||||
<md-card-area md-inset>
|
||||
<md-card-media md-ratio="16:9">
|
||||
<img src="assets/card-example.jpg" alt="Coffee House">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-header>
|
||||
<h2 class="md-title">Coffee House</h2>
|
||||
<div class="md-subhead">
|
||||
<md-icon>location_on</md-icon>
|
||||
<span>2 miles</span>
|
||||
</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-content>
|
||||
Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.
|
||||
</md-card-content>
|
||||
</md-card-area>
|
||||
|
||||
<md-card-content>
|
||||
<h3 class="md-subheading">Today's availability</h3>
|
||||
<div class="card-reservation">
|
||||
<md-icon>access_time</md-icon>
|
||||
<md-button-toggle type="radio" class="md-button-group">
|
||||
<md-button>5:30PM</md-button>
|
||||
<md-button>7:30PM</md-button>
|
||||
<md-button>9:00PM</md-button>
|
||||
</md-button-toggle>
|
||||
</div>
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-primary">Reserve</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<demo-example label="Regular Cards">
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<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>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<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-button class="md-icon-button">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</md-button>
|
||||
</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>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<md-card-media>
|
||||
<img src="assets/card-image-2.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-content>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea nostrum.
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<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>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Hover Effect">
|
||||
<code-block lang="xml">
|
||||
<md-card md-with-hover>
|
||||
<md-card-header>
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header>
|
||||
|
||||
<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-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card md-with-hover>
|
||||
<md-card-media v-md-ink-ripple>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card md-with-hover>
|
||||
<md-card-header>
|
||||
<md-avatar>
|
||||
<img src="assets/avatar.png" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-title">Title goes here</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</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.
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Image cover with predefined aspect ratio">
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<md-card-media-cover md-text-scrim>
|
||||
<md-card-media md-ratio="16:9">
|
||||
<img src="assets/card-sky.jpg" alt="Skyscraper">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-area>
|
||||
<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-area>
|
||||
</md-card-media-cover>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<md-card-media-cover md-solid>
|
||||
<md-card-media md-ratio="1:1">
|
||||
<img src="assets/card-sky.jpg" alt="Skyscraper">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-area>
|
||||
<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-area>
|
||||
</md-card-media-cover>
|
||||
</md-card>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Media">
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<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-card-media>
|
||||
<img src="assets/avatar-2.jpg" alt="People">
|
||||
</md-card-media>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<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-card-media md-medium>
|
||||
<img src="assets/card-weather.png" alt="People">
|
||||
</md-card-media>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-header-text>
|
||||
<div class="md-title">Title goes</div>
|
||||
<div class="md-subhead">Subtitle here</div>
|
||||
</md-card-header-text>
|
||||
|
||||
<md-card-media md-big>
|
||||
<img src="assets/card-weather.png" alt="People">
|
||||
</md-card-media>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<md-card-media-actions>
|
||||
<md-card-media>
|
||||
<img src="assets/cover.png" alt="Cover">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card-media-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Full control">
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<md-card-area>
|
||||
<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-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-area>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card>
|
||||
<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-expand>
|
||||
<md-card-actions>
|
||||
<md-button>Action</md-button>
|
||||
<md-button>Action</md-button>
|
||||
<span style="flex: 1"></span>
|
||||
<md-button class="md-icon-button" md-expand-trigger>
|
||||
<md-icon>keyboard_arrow_down</md-icon>
|
||||
</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-expand>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-card class="card-example" v-md-theme="'blue'">
|
||||
<md-card-area md-inset>
|
||||
<md-card-media md-ratio="16:9">
|
||||
<img src="assets/card-example.jpg" alt="Coffee House">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-header>
|
||||
<h2 class="md-title">Coffee House</h2>
|
||||
<div class="md-subhead">
|
||||
<md-icon>location_on</md-icon>
|
||||
<span>2 miles</span>
|
||||
</div>
|
||||
</md-card-header>
|
||||
|
||||
<md-card-content>
|
||||
Illy Coffee served with a complimentary Leonidas Belgian Chocolate with all beverages.
|
||||
</md-card-content>
|
||||
</md-card-area>
|
||||
|
||||
<md-card-content>
|
||||
<h3 class="md-subheading">Today's availability</h3>
|
||||
<div class="card-reservation">
|
||||
<md-icon>access_time</md-icon>
|
||||
<md-button-toggle type="radio" class="md-button-group">
|
||||
<md-button>5:30PM</md-button>
|
||||
<md-button>7:30PM</md-button>
|
||||
<md-button>9:00PM</md-button>
|
||||
</md-button-toggle>
|
||||
</div>
|
||||
</md-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-primary">Reserve</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.md-card {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
margin: 0 4px 16px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.card-example {
|
||||
.md-subhead {
|
||||
.md-icon {
|
||||
$size: 16px;
|
||||
|
||||
width: $size;
|
||||
min-width: $size;
|
||||
height: $size;
|
||||
min-height: $size;
|
||||
font-size: $size;
|
||||
line-height: $size;
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.card-reservation {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
.md-icon {
|
||||
color: rgba(#000, .54) !important;
|
||||
}
|
||||
|
||||
.md-button {
|
||||
border-radius: 2px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,6 +10,7 @@ import Avatar from './pages/components/Avatar';
|
|||
import BottomBar from './pages/components/BottomBar';
|
||||
import Buttons from './pages/components/Buttons';
|
||||
import ButtonToggle from './pages/components/ButtonToggle';
|
||||
import Card from './pages/components/Card';
|
||||
import Checkbox from './pages/components/Checkbox';
|
||||
import Icon from './pages/components/Icon';
|
||||
import Input from './pages/components/Input';
|
||||
|
|
@ -82,6 +83,11 @@ const components = [
|
|||
name: 'components:button-toggle',
|
||||
component: ButtonToggle
|
||||
},
|
||||
{
|
||||
path: '/components/card',
|
||||
name: 'components:card',
|
||||
component: Card
|
||||
},
|
||||
{
|
||||
path: '/components/checkbox',
|
||||
name: 'components:checkbox',
|
||||
|
|
|
|||
18
package.json
18
package.json
|
|
@ -3,20 +3,27 @@
|
|||
"description": "Material Design for Vue.js",
|
||||
"version": "0.1.2",
|
||||
"author": "Marcos Moura <marcosvmmoura@gmail.com>",
|
||||
"homepage": "https://marcosmoura.github.io/vue-material",
|
||||
"license": "MIT",
|
||||
"registry": "github",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/marcosmoura/vue-material.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/marcosmoura/vue-material/issues"
|
||||
},
|
||||
"keywords": [
|
||||
"browser",
|
||||
"vue",
|
||||
"vue 2",
|
||||
"vue2",
|
||||
"vuejs",
|
||||
"material design",
|
||||
"material",
|
||||
"angular-material",
|
||||
"components"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/marcosmoura/vue-material.git"
|
||||
},
|
||||
"main": "dist/vue-material.js",
|
||||
"files": [
|
||||
"dist",
|
||||
|
|
@ -31,8 +38,7 @@
|
|||
"build:lib": "babel-node build/server/build-lib.js --presets es2015,stage-0",
|
||||
"build": "rm -rf dist && npm run build:docs && npm run build:lib",
|
||||
"lint": "eslint --ext .js,.vue --fix src",
|
||||
"deploy-docs": "git push origin `git subtree split --prefix dist/docs master`:gh-pages --force",
|
||||
"publish": "npm run deploy-docs && npm publish"
|
||||
"deploy-docs": "git push origin `git subtree split --prefix dist/docs master`:gh-pages --force"
|
||||
},
|
||||
"dependencies": {
|
||||
"autosize": "^3.0.17",
|
||||
|
|
|
|||
26
src/components/mdCard/index.js
Normal file
26
src/components/mdCard/index.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import mdCard from './mdCard.vue';
|
||||
import mdCardMedia from './mdCardMedia.vue';
|
||||
import mdCardMediaCover from './mdCardMediaCover.vue';
|
||||
import mdCardMediaActions from './mdCardMediaActions.vue';
|
||||
import mdCardHeader from './mdCardHeader.vue';
|
||||
import mdCardHeaderText from './mdCardHeaderText.vue';
|
||||
import mdCardContent from './mdCardContent.vue';
|
||||
import mdCardActions from './mdCardActions.vue';
|
||||
import mdCardArea from './mdCardArea.vue';
|
||||
import mdCardExpand from './mdCardExpand.vue';
|
||||
import mdCardTheme from './mdCard.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-card', Vue.extend(mdCard));
|
||||
Vue.component('md-card-media', Vue.extend(mdCardMedia));
|
||||
Vue.component('md-card-media-cover', Vue.extend(mdCardMediaCover));
|
||||
Vue.component('md-card-media-actions', Vue.extend(mdCardMediaActions));
|
||||
Vue.component('md-card-header', Vue.extend(mdCardHeader));
|
||||
Vue.component('md-card-header-text', Vue.extend(mdCardHeaderText));
|
||||
Vue.component('md-card-content', Vue.extend(mdCardContent));
|
||||
Vue.component('md-card-actions', Vue.extend(mdCardActions));
|
||||
Vue.component('md-card-area', Vue.extend(mdCardArea));
|
||||
Vue.component('md-card-expand', Vue.extend(mdCardExpand));
|
||||
|
||||
Vue.material.styles.push(mdCardTheme);
|
||||
}
|
||||
297
src/components/mdCard/mdCard.scss
Normal file
297
src/components/mdCard/mdCard.scss
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
@import '../../core/stylesheets/mixins.scss';
|
||||
|
||||
$card-radius: 2px;
|
||||
|
||||
.md-card {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: $card-radius;
|
||||
box-shadow: $material-shadow-2dp;
|
||||
|
||||
&.md-with-hover {
|
||||
cursor: pointer;
|
||||
transition: $swift-ease-out;
|
||||
transition-property: box-shadow;
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
box-shadow: $material-shadow-8dp;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-media {
|
||||
position: relative;
|
||||
|
||||
&.md-16-9 {
|
||||
@include image-aspect-ratio(16, 9);
|
||||
}
|
||||
|
||||
&.md-4-3 {
|
||||
@include image-aspect-ratio(4, 3);
|
||||
}
|
||||
|
||||
&.md-1-1 {
|
||||
@include image-aspect-ratio(1, 1);
|
||||
}
|
||||
|
||||
+ .md-card-header {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
+ .md-card-content:last-child {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-header {
|
||||
padding: 16px;
|
||||
|
||||
&.md-card-header-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
+ .md-card-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
+ .md-card-actions:not(:last-child) {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.md-avatar {
|
||||
margin-right: 16px;
|
||||
float: left;
|
||||
|
||||
~ .md-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
~ .md-title,
|
||||
~ .md-subhead {
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-button {
|
||||
margin: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
+ .md-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-header-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.md-card-media {
|
||||
$size: 80px;
|
||||
|
||||
width: $size;
|
||||
flex: 0 0 $size;
|
||||
height: $size;
|
||||
margin-left: 16px;
|
||||
|
||||
&.md-medium {
|
||||
$size: 120px;
|
||||
|
||||
width: $size;
|
||||
flex: 0 0 $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
&.md-big {
|
||||
$size: 160px;
|
||||
|
||||
width: $size;
|
||||
flex: 0 0 $size;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-subhead,
|
||||
.md-title,
|
||||
.md-subheading {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.md-subhead {
|
||||
opacity: .54;
|
||||
font-size: 14px;
|
||||
letter-spacing: .01em;
|
||||
line-height: 20px;
|
||||
|
||||
+ .md-title {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-title {
|
||||
font-size: 24px;
|
||||
letter-spacing: 0;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.md-card-media-actions {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.md-card-media {
|
||||
$size: 240px;
|
||||
|
||||
width: $size;
|
||||
flex: 0 0 $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.md-card-actions {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.md-button + .md-button {
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-content {
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-actions {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.md-button {
|
||||
margin: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
+ .md-button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-area {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> .md-card-area:not(:last-child) {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
&:not(.md-inset):after {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.md-inset:after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-media-cover {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
|
||||
&.md-text-scrim {
|
||||
.md-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-area {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.md-card-header + .md-card-actions {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.md-subhead {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-expand {
|
||||
overflow: hidden;
|
||||
|
||||
&.md-active {
|
||||
[md-expand-trigger] {
|
||||
transform: rotateZ(180deg) translate3D(0, 0, 0);
|
||||
}
|
||||
|
||||
.md-card-content {
|
||||
margin-top: 0 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-actions {
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
[md-expand-trigger] {
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
|
||||
.md-card-content {
|
||||
padding-top: 4px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transform: translate3D(0, 0, 0);
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
src/components/mdCard/mdCard.theme
Normal file
38
src/components/mdCard/mdCard.theme
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.THEME_NAME {
|
||||
.md-card,
|
||||
&.md-card {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
||||
.md-icon-button {
|
||||
.md-icon {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
}
|
||||
}
|
||||
|
||||
> .md-card-area {
|
||||
&:after {
|
||||
background-color: #{'BACKGROUND-CONTRAST-0.12'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-media-cover {
|
||||
&.md-text-scrim {
|
||||
.md-backdrop {
|
||||
background: linear-gradient(to bottom, #{'BACKGROUND-CONTRAST-0.0'} 20%, #{'BACKGROUND-CONTRAST-0.275'} 66%, #{'BACKGROUND-CONTRAST-0.55'} 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-solid {
|
||||
.md-card-area {
|
||||
background-color: #{'BACKGROUND-CONTRAST-0.4'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-expand {
|
||||
.md-card-actions {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
src/components/mdCard/mdCard.vue
Normal file
22
src/components/mdCard/mdCard.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div class="md-card" :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdCard.scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdWithHover: Boolean
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
'md-with-hover': this.mdWithHover
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
5
src/components/mdCard/mdCardActions.vue
Normal file
5
src/components/mdCard/mdCardActions.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="md-card-actions">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
20
src/components/mdCard/mdCardArea.vue
Normal file
20
src/components/mdCard/mdCardArea.vue
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="md-card-area" :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdInset: Boolean
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
'md-inset': this.mdInset
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
5
src/components/mdCard/mdCardContent.vue
Normal file
5
src/components/mdCard/mdCardContent.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="md-card-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
38
src/components/mdCard/mdCardExpand.vue
Normal file
38
src/components/mdCard/mdCardExpand.vue
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div class="md-card-expand" ref="expand">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
setContentMargin() {
|
||||
this.content.style.marginTop = -this.content.offsetHeight + 'px';
|
||||
},
|
||||
toggle() {
|
||||
this.$refs.expand.classList.toggle('md-active');
|
||||
},
|
||||
onWindowResize() {
|
||||
window.requestAnimationFrame(this.setContentMargin);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.trigger = this.$el.querySelector('[md-expand-trigger]');
|
||||
this.content = this.$el.querySelector('.md-card-content');
|
||||
|
||||
if (this.content) {
|
||||
this.setContentMargin();
|
||||
|
||||
this.trigger.addEventListener('click', this.toggle);
|
||||
window.addEventListener('resize', this.onWindowResize);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
if (this.content) {
|
||||
this.trigger.removeEventListener('click', this.toggle);
|
||||
window.removeEventListener('resize', this.onWindowResize);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
5
src/components/mdCard/mdCardHeader.vue
Normal file
5
src/components/mdCard/mdCardHeader.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="md-card-header">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
21
src/components/mdCard/mdCardHeaderText.vue
Normal file
21
src/components/mdCard/mdCardHeaderText.vue
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="md-card-header-text">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.parentClasses = this.$parent.$el.classList;
|
||||
|
||||
if (this.parentClasses.contains('md-card-header')) {
|
||||
this.insideParent = true;
|
||||
this.parentClasses.add('md-card-header-flex');
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.parentClasses.remove('md-card-header-flex');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
33
src/components/mdCard/mdCardMedia.vue
Normal file
33
src/components/mdCard/mdCardMedia.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="md-card-media" :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdRatio: String,
|
||||
mdMedium: Boolean,
|
||||
mdBig: Boolean
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
let classes = {
|
||||
'md-16-9': this.mdRatio === '16:9' || this.mdRatio === '16/9',
|
||||
'md-4-3': this.mdRatio === '4:3' || this.mdRatio === '4/3',
|
||||
'md-1-1': this.mdRatio === '1:1' || this.mdRatio === '1/1'
|
||||
};
|
||||
|
||||
if (this.mdMedium || this.mdBig) {
|
||||
classes = {
|
||||
'md-medium': this.mdMedium,
|
||||
'md-big': this.mdBig
|
||||
};
|
||||
}
|
||||
|
||||
return classes;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
5
src/components/mdCard/mdCardMediaActions.vue
Normal file
5
src/components/mdCard/mdCardMediaActions.vue
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="md-card-media-actions">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
102
src/components/mdCard/mdCardMediaCover.vue
Normal file
102
src/components/mdCard/mdCardMediaCover.vue
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<div class="md-card-media-cover" :class="classes">
|
||||
<slot></slot>
|
||||
<div class="md-backdrop" :style="styles" v-if="mdTextScrim" ref="backdrop"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const getImageAlpha = (image, onLoad) => {
|
||||
let canvas = document.createElement('canvas');
|
||||
|
||||
image.onload = function() {
|
||||
let colorSum = 0;
|
||||
let ctx;
|
||||
let imageData;
|
||||
let imageMetadata;
|
||||
let r;
|
||||
let g;
|
||||
let b;
|
||||
let average;
|
||||
|
||||
canvas.width = this.width;
|
||||
canvas.height = this.height;
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.drawImage(this, 0, 0);
|
||||
|
||||
imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||||
imageMetadata = imageData.data;
|
||||
|
||||
for (let x = 0, len = imageMetadata.length; x < len; x += 4) {
|
||||
r = imageMetadata[x];
|
||||
g = imageMetadata[x + 1];
|
||||
b = imageMetadata[x + 2];
|
||||
|
||||
average = Math.floor((r + g + b) / 3);
|
||||
colorSum += average;
|
||||
}
|
||||
|
||||
onLoad(Math.floor(colorSum / (this.width * this.height)));
|
||||
};
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
mdTextScrim: Boolean,
|
||||
mdSolid: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
backdropBg: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
'md-text-scrim': this.mdTextScrim,
|
||||
'md-solid': this.mdSolid
|
||||
};
|
||||
},
|
||||
styles() {
|
||||
return {
|
||||
background: this.backdropBg
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
applyScrimColor(darkness) {
|
||||
if (this.$refs.backdrop) {
|
||||
this.backdropBg = `linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, ${darkness / 2}) 66%, rgba(0, 0, 0, ${darkness}) 100%)`;
|
||||
}
|
||||
},
|
||||
applySolidColor(darkness) {
|
||||
let area = this.$el.querySelector('.md-card-area');
|
||||
|
||||
if (area) {
|
||||
area.style.background = `rgba(0, 0, 0, ${darkness})`;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let image = this.$el.querySelector('img');
|
||||
|
||||
if (image && (this.mdTextScrim || this.mdSolid)) {
|
||||
getImageAlpha(image, (lightness) => {
|
||||
let limit = 256;
|
||||
let darkness = Math.abs(limit - lightness) * 100 / limit;
|
||||
|
||||
if (darkness > 30) {
|
||||
darkness = 30;
|
||||
}
|
||||
|
||||
if (this.mdTextScrim) {
|
||||
this.applyScrimColor((darkness + 35) / 100);
|
||||
} else if (this.mdSolid) {
|
||||
this.applySolidColor((darkness + 30) / 100);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
18
src/core/stylesheets/mixins.scss
Normal file
18
src/core/stylesheets/mixins.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@mixin image-aspect-ratio($width, $height) {
|
||||
overflow: hidden;
|
||||
|
||||
&:before{
|
||||
width: 100%;
|
||||
padding-top: ($height / $width) * 100%;
|
||||
display: block;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ $font-roboto: Roboto, Lato, sans-serif;
|
|||
|
||||
|
||||
|
||||
/* Transitions
|
||||
/* Transitions - Based on Angular Material
|
||||
========================================================================== */
|
||||
|
||||
$swift-ease-out-duration: .4s !default;
|
||||
|
|
@ -34,7 +34,7 @@ $material-leave: all $material-leave-duration $material-leave-timing-function;
|
|||
|
||||
|
||||
|
||||
/* Elevation
|
||||
/* Elevation - Based on Angular Material
|
||||
========================================================================== */
|
||||
|
||||
$shadow-key-umbra-opacity: .2 !default;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import mdBottomBar from './components/mdBottomBar';
|
|||
import mdButton from './components/mdButton';
|
||||
import mdButtonToggle from './components/mdButtonToggle';
|
||||
import mdCheckbox from './components/mdCheckbox';
|
||||
import mdCard from './components/mdCard';
|
||||
import mdDivider from './components/mdDivider';
|
||||
import mdIcon from './components/mdIcon';
|
||||
import mdInputContainer from './components/mdInputContainer';
|
||||
|
|
@ -25,6 +26,7 @@ let options = {
|
|||
mdButton,
|
||||
mdButtonToggle,
|
||||
mdCheckbox,
|
||||
mdCard,
|
||||
mdDivider,
|
||||
mdIcon,
|
||||
mdInputContainer,
|
||||
|
|
|
|||
Loading…
Reference in a new issue