mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-30 19:44:46 +00:00
Add expansion card and media examples
This commit is contained in:
Marcos Moura
parent
4a749272df
commit
7fc01a5602
12 changed files with 370 additions and 32 deletions
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/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 |
|
|
@ -22,6 +22,28 @@
|
|||
</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-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-card-media>
|
||||
<img src="assets/card-image-2.jpg" alt="People">
|
||||
|
|
@ -148,6 +170,130 @@
|
|||
</md-card-media-cover>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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 class="card-example" v-md-theme="'blue'">
|
||||
<md-card-area md-inset>
|
||||
<md-card-media md-ratio="16:9">
|
||||
|
|
@ -198,15 +344,14 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.md-card {
|
||||
width: 300px;
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
margin: 0 4px 16px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.card-example {
|
||||
width: 340px;
|
||||
|
||||
.md-subhead {
|
||||
.md-icon {
|
||||
$size: 16px;
|
||||
|
|
|
|||
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",
|
||||
|
|
|
|||
|
|
@ -1,20 +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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,6 +54,11 @@ $card-radius: 2px;
|
|||
.md-card-header {
|
||||
padding: 16px;
|
||||
|
||||
&.md-card-header-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
+ .md-card-content {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
|
@ -76,6 +81,47 @@ $card-radius: 2px;
|
|||
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,
|
||||
|
|
@ -98,6 +144,30 @@ $card-radius: 2px;
|
|||
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;
|
||||
|
|
@ -134,22 +204,24 @@ $card-radius: 2px;
|
|||
position: relative;
|
||||
}
|
||||
|
||||
> .md-card-area {
|
||||
&:not(.md-inset) {
|
||||
border-bottom: 1px solid;
|
||||
> .md-card-area:not(:last-child) {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
&.md-inset {
|
||||
position: relative;
|
||||
&:not(.md-inset):after {
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 0;
|
||||
left: 16px;
|
||||
content: " ";
|
||||
}
|
||||
&.md-inset:after {
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -184,4 +256,36 @@ $card-radius: 2px;
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
transform: translate3D(0, 0, 0);
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
.THEME_NAME {
|
||||
.md-card,
|
||||
&.md-card {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
||||
.md-icon-button {
|
||||
.md-icon {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
|
@ -8,14 +10,8 @@
|
|||
}
|
||||
|
||||
> .md-card-area {
|
||||
&:not(.md-inset) {
|
||||
border-bottom-color: #{'BACKGROUND-CONTRAST-0.12'};
|
||||
}
|
||||
|
||||
&.md-inset {
|
||||
&:after {
|
||||
background-color: #{'BACKGROUND-CONTRAST-0.12'};
|
||||
}
|
||||
&:after {
|
||||
background-color: #{'BACKGROUND-CONTRAST-0.12'};
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,5 +28,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-card-expand {
|
||||
.md-card-actions {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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>
|
||||
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>
|
||||
|
|
@ -7,15 +7,26 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdRatio: String
|
||||
mdRatio: String,
|
||||
mdMedium: Boolean,
|
||||
mdBig: Boolean
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
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>
|
||||
Loading…
Reference in a new issue