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

create responsive grid

Browse source
This commit is contained in:
Marcos Moura 2016-12-14 02:35:10 -02:00
parent 9199d55538
commit 8dce9f960a
5 changed files with 168 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
docs/src/pages/ui-elements/Layout.vue
View file

@ -6,6 +6,64 @@
</div>
<div slot="example">
<example-box card-title="Responsive">
<div class="layout-demo grid" slot="demo">
<md-layout class="color" md-gutter>
<md-layout class="color-red" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
<div class="grid-content">
md-flex-xsmall <br>
md-flex-small="50" <br>
md-flex-medium="33"
</div>
</md-layout>
<md-layout class="color-blue" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
<div class="grid-content">
md-flex-xsmall <br>
md-flex-small="50" <br>
md-flex-medium="33"
</div>
</md-layout>
<md-layout class="color-pink" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
<div class="grid-content">
md-flex-xsmall <br>
md-flex-small="50" <br>
md-flex-medium="33"
</div>
</md-layout>
<md-layout class="color-teal" md-flex-xsmall="100" md-flex-small="50" md-flex-medium="33">
<div class="grid-content">
md-flex-xsmall <br>
md-flex-small="50" <br>
md-flex-medium="33"
</div>
</md-layout>
<md-layout class="color-green" md-flex-small="100" md-flex-medium="33" md-hide-xsmall>
<div class="grid-content">
md-flex-medium="33" <br>
md-hide-xsmall
</div>
</md-layout>
<md-layout class="color-yellow" md-flex md-flex-medium="33" md-hide-small>
<div class="grid-content">
md-flex-medium="33" <br>
md-hide-small
</div>
</md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
</code-block>
</div>
</example-box>
<example-box card-title="Gutters">
<div class="layout-demo grid" slot="demo">
<md-layout class="no-gutter color">
@ -21,7 +79,7 @@
<md-layout></md-layout>
</md-layout>
<md-layout :md-gutter="16" class="color">
<md-layout md-gutter="16" class="color">
<md-layout></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
@ -49,30 +107,30 @@
<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-gutter 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-gutter 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-gutter class="color">
<md-layout></md-layout>
<md-layout :md-flex="66"></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-gutter 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-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
@ -87,14 +145,14 @@
<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 class="column-size" md-gutter>
<md-layout md-column md-gutter 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-column md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
@ -114,21 +172,22 @@
<style lang="scss" scoped>
.layout-demo {
min-height: 200px;
min-height: 100px;
}
.no-gutter > .md-layout:last-child:after {
.no-gutter > .md-layout:last-child:before {
background-color: rgba(#000, .2) !important;
}
.grid {
.md-layout:not(.md-column) {
height: 40px;
.grid > .md-layout {
> .md-layout:not(.md-column) {
min-height: 40px;
margin-bottom: 16px;
}
}
> .md-layout:not(.md-column) + .md-layout {
margin-top: 16px;
}
.grid-content {
padding: 16px;
}
.color {
@ -137,12 +196,12 @@
@each $item in $sizes {
$size: $item / 2 + px;
&:not(.md-column).md-gutter-#{$item} > .md-layout:after {
&:not(.md-column).md-gutter-#{$item} > .md-layout:before {
right: $size;
left: $size;
}
&.md-column.md-gutter-#{$item} > .md-layout:after {
&.md-column.md-gutter-#{$item} > .md-layout:before {
top: $size;
bottom: $size;
}
@ -151,12 +210,12 @@
> .md-layout {
position: relative;
&:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&:before {
width: 100%;
height: 100%;
margin-bottom: -200%;
display: block;
pointer-events: none;
background-color: rgba(#000, .12);
content: " ";
}
@ -170,4 +229,36 @@
margin-top: 48px !important;
}
}
.color-red:before {
background-color: #F44336 !important;
}
.color-blue:before {
background-color: #2196F3 !important;
}
.color-yellow:before {
background-color: #FFEB3B !important;
}
.color-green:before {
background-color: #4CAF50 !important;
}
.color-purple:before {
background-color: #9C27B0 !important;
}
.color-pink:before {
background-color: #E91E63 !important;
}
.color-teal:before {
background-color: #009688 !important;
}
.color-orange:before {
background-color: #FF9800 !important;
}
</style>

39
src/components/mdLayout/mdLayout.scss
View file

@ -7,6 +7,7 @@
.md-layout {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
@ -33,13 +34,8 @@
/* 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) {
@mixin layout-gutter($margin: -12px, $padding: 12px) {
&:not(.md-column) {
margin-right: $margin;
margin-left: $margin;
@ -49,7 +45,7 @@ $sizes: (8, 16, 24, 40);
}
}
.md-column.md-gutter-#{$item} {
.md-column {
margin-top: $margin;
margin-bottom: $margin;
@ -60,6 +56,25 @@ $sizes: (8, 16, 24, 40);
}
}
.md-gutter {
@include layout-gutter();
@include layout-small {
@include layout-gutter(-8px, 8px);
}
}
$sizes: (8, 16, 24, 40);
@each $item in $sizes {
$margin: -$item / 2 + px;
$padding: $item / 2 + px;
.md-gutter-#{$item} {
@include layout-gutter($margin, $padding);
}
}
/* Flex Size */
@ -73,14 +88,18 @@ $sizes: (8, 16, 24, 40);
}
.md-flex#{$size} {
flex: 1;
flex: 1 1;
}
.md-flex#{$size}-33 {
min-width: 33.33333%;
max-width: 33.33333%;
flex: 0 1 33.33333%;
}
.md-flex#{$size}-66 {
min-width: 33.33333%;
max-width: 33.33333%;
flex: 0 1 66.66666%;
}
@ -88,6 +107,8 @@ $sizes: (8, 16, 24, 40);
$counter: $i * 5;
.md-flex#{$size}-#{$counter} {
min-width: #{$counter + '%'};
max-width: #{$counter + '%'};
flex: 0 1 #{$counter + '%'};
}
}

27
src/components/mdLayout/mdLayout.vue
View file

@ -24,13 +24,13 @@
mdHideMedium: Boolean,
mdHideLarge: Boolean,
mdHideXlarge: Boolean,
mdGutter: [Number, Boolean],
mdFlex: [Number, Boolean],
mdFlexXsmall: Number,
mdFlexSmall: Number,
mdFlexMedium: Number,
mdFlexLarge: Number,
mdFlexXlarge: Number
mdGutter: [String, Number, Boolean],
mdFlex: [String, Number, Boolean],
mdFlexXsmall: [String, Number, Boolean],
mdFlexSmall: [String, Number, Boolean],
mdFlexMedium: [String, Number, Boolean],
mdFlexLarge: [String, Number, Boolean],
mdFlexXlarge: [String, Number, Boolean]
},
computed: {
classes() {
@ -51,18 +51,13 @@
'md-hide-small': this.mdHideSmall,
'md-hide-medium': this.mdHideMedium,
'md-hide-large': this.mdHideLarge,
'md-hide-xlarge': this.mdHideXlarge,
'md-flex-xsmall': this.mdFlexXsmall,
'md-flex-small': this.mdFlexSmall,
'md-flex-medium': this.mdFlexMedium,
'md-flex-large': this.mdFlexLarge,
'md-flex-xlarge': this.mdFlexXlarge
'md-hide-xlarge': this.mdHideXlarge
};
if (this.mdGutter) {
if (typeof this.mdGutter === 'boolean') {
classes['md-gutter-8'] = true;
} else {
classes['md-gutter'] = true;
} else if (this.mdGutter) {
classes['md-gutter-' + this.mdGutter] = true;
}
}
@ -87,7 +82,7 @@
if (typeof this[name] === 'boolean') {
object['md-flex' + size] = true;
} else {
object['md-flex-' + size + this[name]] = true;
object['md-flex' + size + '-' + this[name]] = true;
}
}
}

2
src/components/mdTable/mdTablePagination.vue
View file

@ -48,7 +48,7 @@
subTotal: 0,
currentSize: parseInt(this.mdSize, 10),
currentPage: parseInt(this.mdPage, 10),
totalItems: isNaN(this.mdTotal)?Number.MAX_SAFE_INTEGER:parseInt(this.mdTotal, 10)
totalItems: isNaN(this.mdTotal) ? Number.MAX_SAFE_INTEGER : parseInt(this.mdTotal, 10)
};
},
computed: {

7
src/core/stylesheets/variables.scss
View file

@ -6,10 +6,9 @@ $font-roboto: Roboto, Lato, sans-serif;
/* Responsive Breakpoints */
$breakpoint-xsmall: 600px !default;
$breakpoint-small: 1024px !default;
$breakpoint-medium: 1440px !default;
$breakpoint-large: 1600px !default;
$breakpoint-xlarge: 1920px !default;
$breakpoint-small: 960px !default;
$breakpoint-medium: 1280px !default;
$breakpoint-large: 1920px !default;
/* Transitions - Based on Angular Material */