mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-26 17:44:48 +00:00
create layout base
This commit is contained in:
Marcos Moura
parent
892d0a57e3
commit
bf749d885e
3 changed files with 268 additions and 3 deletions
|
|
@ -6,10 +6,111 @@
|
|||
</div>
|
||||
|
||||
<div slot="example">
|
||||
<example-box card-title="Default">
|
||||
<div class="demo" slot="demo">
|
||||
<md-layout>
|
||||
<example-box card-title="Gutters">
|
||||
<div class="layout-demo grid" slot="demo">
|
||||
<md-layout class="no-gutter color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="8" class="color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="16" class="color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="24" class="color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="40" class="color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Sizes">
|
||||
<div class="layout-demo grid" slot="demo">
|
||||
<md-layout :md-gutter="16" class="color">
|
||||
<md-layout :md-flex="50"></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="16" class="color">
|
||||
<md-layout :md-flex="33"></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="16" class="color">
|
||||
<md-layout></md-layout>
|
||||
<md-layout :md-flex="66"></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="16" class="color">
|
||||
<md-layout :md-flex="75"></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout :md-gutter="16" class="color">
|
||||
<md-layout :md-flex="50"></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Direction">
|
||||
<div class="layout-demo grid" slot="demo">
|
||||
<md-layout class="column-size" :md-gutter="16">
|
||||
<md-layout md-column :md-gutter="16" class="color">
|
||||
<md-layout :md-flex="20"></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout md-column :md-gutter="16" class="color">
|
||||
<md-layout :md-flex="50"></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout class="column-size" :md-gutter="24">
|
||||
<md-layout md-column :md-gutter="24" class="color">
|
||||
<md-layout :md-flex="25"></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout md-column :md-gutter="24" class="color">
|
||||
<md-layout :md-flex="25"></md-layout>
|
||||
<md-layout :md-flex="50"></md-layout>
|
||||
<md-layout></md-layout>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
</div>
|
||||
|
||||
|
|
@ -25,5 +126,61 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout-demo {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.no-gutter > .md-layout:last-child:after {
|
||||
background-color: rgba(#000, .2) !important;
|
||||
}
|
||||
|
||||
.grid {
|
||||
.md-layout:not(.md-column) {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
> .md-layout:not(.md-column) + .md-layout {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.color {
|
||||
$sizes: (8, 16, 24, 40);
|
||||
|
||||
@each $item in $sizes {
|
||||
$size: $item / 2 + px;
|
||||
|
||||
&:not(.md-column).md-gutter-#{$item} > .md-layout:after {
|
||||
right: $size;
|
||||
left: $size;
|
||||
}
|
||||
|
||||
&.md-column.md-gutter-#{$item} > .md-layout:after {
|
||||
top: $size;
|
||||
bottom: $size;
|
||||
}
|
||||
}
|
||||
|
||||
> .md-layout {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(#000, .12);
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-size {
|
||||
height: 250px !important;
|
||||
|
||||
+ .column-size {
|
||||
margin-top: 48px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,5 +2,63 @@
|
|||
|
||||
.md-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.md-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
/* Gutter Size */
|
||||
|
||||
$sizes: (8, 16, 24, 40);
|
||||
|
||||
@each $item in $sizes {
|
||||
$padding: $item / 2 + px;
|
||||
$margin: -$item / 2 + px;
|
||||
|
||||
.md-gutter-#{$item}:not(.md-column) {
|
||||
margin-right: $margin;
|
||||
margin-left: $margin;
|
||||
|
||||
> .md-layout {
|
||||
padding-right: $padding;
|
||||
padding-left: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.md-column.md-gutter-#{$item} {
|
||||
margin-top: $margin;
|
||||
margin-bottom: $margin;
|
||||
|
||||
> .md-layout {
|
||||
padding-top: $padding;
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Flex Size */
|
||||
|
||||
.md-flex {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.md-flex-33 {
|
||||
flex: 0 1 33.33333%;
|
||||
}
|
||||
|
||||
.md-flex-66 {
|
||||
flex: 0 1 66.66666%;
|
||||
}
|
||||
|
||||
@for $i from 0 through 20 {
|
||||
$counter: $i * 5;
|
||||
|
||||
.md-flex-#{$counter} {
|
||||
flex: 0 1 #{$counter + '%'};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,56 @@
|
|||
mdTag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
},
|
||||
mdRow: Boolean,
|
||||
mdRowXsmall: Boolean,
|
||||
mdRowSmall: Boolean,
|
||||
mdRowMedium: Boolean,
|
||||
mdRowLarge: Boolean,
|
||||
mdRowXlarge: Boolean,
|
||||
mdColumn: Boolean,
|
||||
mdColumnXsmall: Boolean,
|
||||
mdColumnSmall: Boolean,
|
||||
mdColumnMedium: Boolean,
|
||||
mdColumnLarge: Boolean,
|
||||
mdColumnXlarge: Boolean,
|
||||
mdGutter: [Number, Boolean],
|
||||
mdFlex: [Number, Boolean]
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
let classes = {
|
||||
'md-row': this.mdRow,
|
||||
'md-row-xsmall': this.mdRowXsmall,
|
||||
'md-row-small': this.mdRowSmall,
|
||||
'md-row-medium': this.mdRowMedium,
|
||||
'md-row-large': this.mdRowLarge,
|
||||
'md-row-xlarge': this.mdRowXlarge,
|
||||
'md-column': this.mdColumn,
|
||||
'md-column-xsmall': this.mdColumnXsmall,
|
||||
'md-column-small': this.mdColumnSmall,
|
||||
'md-column-medium': this.mdColumnMedium,
|
||||
'md-column-large': this.mdColumnLarge,
|
||||
'md-column-xlarge': this.mdColumnXlarge
|
||||
};
|
||||
|
||||
if (this.mdGutter) {
|
||||
if (typeof this.mdGutter === 'boolean') {
|
||||
classes['md-gutter-8'] = true;
|
||||
} else {
|
||||
classes['md-gutter-' + this.mdGutter] = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.mdFlex) {
|
||||
if (typeof this.mdFlex === 'boolean') {
|
||||
classes['md-flex'] = true;
|
||||
} else {
|
||||
classes['md-flex-' + this.mdFlex] = true;
|
||||
}
|
||||
}
|
||||
|
||||
return classes;
|
||||
}
|
||||
},
|
||||
render(createElement) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue