From 94d275baa1c2104b6e0b859f5cf026ce396f3ef9 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 26 Dec 2016 14:32:28 -0200 Subject: [PATCH] add alignment props to mdLayout #224 --- docs/src/pages/ui-elements/Layout.vue | 92 +++++++++++++++++++++++++-- src/components/mdLayout/mdLayout.scss | 28 ++++++++ src/components/mdLayout/mdLayout.vue | 50 +++++++++++---- 3 files changed, 153 insertions(+), 17 deletions(-) diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue index 6309537..8dd90c6 100644 --- a/docs/src/pages/ui-elements/Layout.vue +++ b/docs/src/pages/ui-elements/Layout.vue @@ -126,6 +126,18 @@ Number Create a empty space before the actual child on screen sizes less than or equal to given breakpoint. Example: md-flex-offset-small="20" + + + md-align-{type} + String + Apply an alignment to the container. Accepts start|center|end Example: md-align="end" + + + + md-align-{type} + Number + Apply an alignment to the container on screen sizes less than or equal to given breakpoint. Example: md-align-xlarge="center" + @@ -300,13 +312,13 @@
- - + + - + @@ -332,6 +344,78 @@
+ +
+ + + start + + + + + + end + + + + + + end + + + + end + + + + + + center + + + + center + + +
+ +
+ + <md-layout md-gutter="16"> + <md-layout md-flex="50"> + <span>start</span> + </md-layout> + </md-layout> + + <md-layout md-align="end" md-gutter="16"> + <md-layout md-flex="33"> + <span>end</span> + </md-layout> + </md-layout> + + <md-layout md-align="end" md-gutter="16"> + <md-layout md-flex="20"> + <span>end</span> + </md-layout> + + <md-layout md-flex="20"> + <span>end</span> + </md-layout> + </md-layout> + + <md-layout md-align="center" md-gutter="16"> + <md-layout md-flex="35"> + <span>center</span> + </md-layout> + + <md-layout md-flex="35"> + <span>center</span> + </md-layout> + </md-layout> + +
+ +
@@ -419,7 +503,7 @@ - + Automatic diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss index 5e48a6f..0ac3f36 100644 --- a/src/components/mdLayout/mdLayout.scss +++ b/src/components/mdLayout/mdLayout.scss @@ -44,6 +44,33 @@ } +/* Alignments */ + +@mixin layout-align($size: null) { + @if $size == null { + $size : ''; + } + + @if $size != '' { + $size : '-#{$size}'; + } + + .md-align#{$size}-start { + justify-content: flex-start; + } + + .md-align#{$size}-center { + justify-content: center; + } + + .md-align#{$size}-end { + justify-content: flex-end; + } +} + +@include layout-align(); + + /* Gutter Size */ @mixin layout-gutter($margin: -12px, $padding: 12px) { @@ -143,6 +170,7 @@ $sizes: (8, 16, 24, 40); @mixin breakpoint-layout($size) { @include layout($size); @include layout-flex($size); + @include layout-align($size); .md-hide-#{$size} { display: none; diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue index 098266c..cef20ac 100644 --- a/src/components/mdLayout/mdLayout.vue +++ b/src/components/mdLayout/mdLayout.vue @@ -25,13 +25,24 @@ mdHideLarge: Boolean, mdHideXlarge: Boolean, mdGutter: [String, Number, Boolean], + mdAlign: String, + mdAlignXsmall: String, + mdAlignSmall: String, + mdAlignMedium: String, + mdAlignLarge: String, + mdAlignXlarge: String, mdFlex: [String, Number, Boolean], mdFlexXsmall: [String, Number, Boolean], mdFlexSmall: [String, Number, Boolean], mdFlexMedium: [String, Number, Boolean], mdFlexLarge: [String, Number, Boolean], mdFlexXlarge: [String, Number, Boolean], - mdFlexOffset: [String, Number] + mdFlexOffset: [String, Number, Boolean], + mdFlexOffsetXsmall: [String, Number, Boolean], + mdFlexOffsetSmall: [String, Number, Boolean], + mdFlexOffsetMedium: [String, Number, Boolean], + mdFlexOffsetLarge: [String, Number, Boolean], + mdFlexOffsetXlarge: [String, Number, Boolean] }, computed: { classes() { @@ -63,31 +74,44 @@ } } - if (this.mdFlexOffset) { - classes['md-flex-offset-' + this.mdFlexOffset] = true; - } + /* Flex */ + this.generatePropClasses('md-flex', '', 'mdFlex', classes); + this.generatePropClasses('md-flex', 'xsmall', 'mdFlexXsmall', classes); + this.generatePropClasses('md-flex', 'small', 'mdFlexSmall', classes); + this.generatePropClasses('md-flex', 'medium', 'mdFlexMedium', classes); + this.generatePropClasses('md-flex', 'large', 'mdFlexLarge', classes); + this.generatePropClasses('md-flex', 'xlarge', 'mdFlexXlarge', classes); - this.generateFlexClasses('', 'mdFlex', classes); - this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes); - this.generateFlexClasses('small', 'mdFlexSmall', classes); - this.generateFlexClasses('medium', 'mdFlexMedium', classes); - this.generateFlexClasses('large', 'mdFlexLarge', classes); - this.generateFlexClasses('xlarge', 'mdFlexXlarge', classes); + /* Flex Offset */ + this.generatePropClasses('md-flex-offset', '', 'mdFlexOffset', classes); + this.generatePropClasses('md-flex-offset', 'xsmall', 'mdFlexOffsetXsmall', classes); + this.generatePropClasses('md-flex-offset', 'small', 'mdFlexOffsetSmall', classes); + this.generatePropClasses('md-flex-offset', 'medium', 'mdFlexOffsetMedium', classes); + this.generatePropClasses('md-flex-offset', 'large', 'mdFlexOffsetLarge', classes); + this.generatePropClasses('md-flex-offset', 'xlarge', 'mdFlexOffsetXlarge', classes); + + /* Alignment */ + this.generatePropClasses('md-align', '', 'mdAlign', classes); + this.generatePropClasses('md-align', 'xsmall', 'mdAlignXsmall', classes); + this.generatePropClasses('md-align', 'small', 'mdAlignSmall', classes); + this.generatePropClasses('md-align', 'medium', 'mdAlignMedium', classes); + this.generatePropClasses('md-align', 'large', 'mdAlignLarge', classes); + this.generatePropClasses('md-align', 'xlarge', 'mdAlignXlarge', classes); return classes; } }, methods: { - generateFlexClasses(size, name, object) { + generatePropClasses(prop, size, name, object) { if (size) { size = '-' + size; } if (this[name]) { if (typeof this[name] === 'boolean') { - object['md-flex' + size] = true; + object[prop + size] = true; } else { - object['md-flex' + size + '-' + this[name]] = true; + object[prop + size + '-' + this[name]] = true; } } }