mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-16 19:21:07 +00:00
add alignment props to mdLayout #224
This commit is contained in:
Marcos Moura
parent
8e6182b065
commit
e67ca9cd0d
3 changed files with 153 additions and 17 deletions
|
|
@ -126,6 +126,18 @@
|
|||
<md-table-cell><code>Number</code></md-table-cell>
|
||||
<md-table-cell>Create a empty space before the actual child on screen sizes less than or equal to given breakpoint. Example: <code>md-flex-offset-small="20"</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-align-{type}</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>Apply an alignment to the container. Accepts <code>start</code>|<code>center</code>|<code>end</code> Example: <code>md-align="end"</code></md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-align-{type}</md-table-cell>
|
||||
<md-table-cell><code>Number</code></md-table-cell>
|
||||
<md-table-cell>Apply an alignment to the container on screen sizes less than or equal to given breakpoint. Example: <code>md-align-xlarge="center"</code></md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
|
|
@ -300,13 +312,13 @@
|
|||
|
||||
<example-box card-title="Direction">
|
||||
<div class="layout-demo grid" slot="demo">
|
||||
<md-layout class="column-size" md-gutter>
|
||||
<md-layout md-column md-gutter class="color">
|
||||
<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 class="color">
|
||||
<md-layout md-column md-gutter="16" class="color">
|
||||
<md-layout md-flex="50"></md-layout>
|
||||
<md-layout></md-layout>
|
||||
<md-layout></md-layout>
|
||||
|
|
@ -332,6 +344,78 @@
|
|||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Alignment">
|
||||
<div class="layout-demo grid gutter" slot="demo">
|
||||
<md-layout md-gutter="16" class="color">
|
||||
<md-layout md-flex="50">
|
||||
<span>start</span>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout md-align="end" md-gutter="16" class="color">
|
||||
<md-layout md-flex="33">
|
||||
<span>end</span>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout md-align="end" md-gutter="16" class="color">
|
||||
<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" class="color">
|
||||
<md-layout md-flex="35">
|
||||
<span>center</span>
|
||||
</md-layout>
|
||||
|
||||
<md-layout md-flex="35">
|
||||
<span>center</span>
|
||||
</md-layout>
|
||||
</md-layout>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<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>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Gutters">
|
||||
<div class="layout-demo grid gutter" slot="demo">
|
||||
<md-layout class="no-gutter color">
|
||||
|
|
@ -419,7 +503,7 @@
|
|||
</md-layout>
|
||||
</md-layout>
|
||||
|
||||
<md-layout md-gutter class="color">
|
||||
<md-layout :md-gutter="true" class="color">
|
||||
<md-layout>
|
||||
<span>Automatic</span>
|
||||
</md-layout>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue