Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add vertical align for layout (#562)

Browse source
This commit is contained in:
Samuell 2017-03-21 01:21:28 +01:00 committed by Marcos Moura
parent 02f58855f2
commit 605ddbceed
3 changed files with 89 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -144,6 +144,18 @@
<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-row>
<md-table-cell>md-vertical-align</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Apply an vertical alignment to the container. Accepts <code>start</code>|<code>center</code>|<code>end</code>|<code>stretch</code> Example: <code>md-vertical-align="end"</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-vertical-align-{type}</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>Apply an vertical alignment to the container on screen sizes less than or equal to given breakpoint. Example: <code>md-vertical-align-xlarge="center"</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
@ -383,6 +395,33 @@
<span>center</span>
</md-layout>
</md-layout>
<md-layout>
<md-layout md-vertical-align="center" md-gutter="16" class="color" :style="{ height: '100px' }">
<md-layout>
<span>vertical center</span>
</md-layout>
</md-layout>
<md-layout md-vertical-align="start" md-gutter="16" class="color" :style="{ height: '100px' }">
<md-layout>
<span>vertical start</span>
</md-layout>
</md-layout>
<md-layout md-vertical-align="end" md-gutter="16" class="color" :style="{ height: '100px' }">
<md-layout>
<span>vertical end</span>
</md-layout>
</md-layout>
<md-layout md-vertical-align="stretch" md-gutter="16" class="color" :style="{ height: '100px' }">
<md-layout>
<span>vertical stretch (default)</span>
</md-layout>
</md-layout>
</md-layout>
</div>
<div slot="code">

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

@ -71,6 +71,41 @@
@include layout-align();
/* Vertical Alignments */
@mixin layout-vertical-align($size: null) {
@if $size == null {
$size : '';
}
@if $size != '' {
$size : '-#{$size}';
}
.md-vertical-align#{$size}-start {
align-items: flex-start;
align-content: flex-start;
}
.md-vertical-align#{$size}-center {
align-items: center;
align-content: center;
}
.md-vertical-align#{$size}-end {
align-items: flex-end;
align-content: flex-end;
}
.md-vertical-align#{$size}-stretch {
align-items: stretch;
align-content: stretch;
}
}
@include layout-vertical-align();
/* Gutter Size */
@mixin layout-gutter($margin: -12px, $padding: 12px) {

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

@ -37,6 +37,12 @@
mdAlignMedium: String,
mdAlignLarge: String,
mdAlignXlarge: String,
mdVerticalAlign: String,
mdVerticalAlignXsmall: String,
mdVerticalAlignSmall: String,
mdVerticalAlignMedium: String,
mdVerticalAlignLarge: String,
mdVerticalAlignXlarge: String,
mdFlex: [String, Number, Boolean],
mdFlexXsmall: [String, Number, Boolean],
mdFlexSmall: [String, Number, Boolean],
@ -101,7 +107,7 @@
this.generatePropClasses('md-flex-offset', 'large', 'mdFlexOffsetLarge', classes);
this.generatePropClasses('md-flex-offset', 'xlarge', 'mdFlexOffsetXlarge', classes);
/* Alignment */
/* Horizontal Alignment */
this.generatePropClasses('md-align', '', 'mdAlign', classes);
this.generatePropClasses('md-align', 'xsmall', 'mdAlignXsmall', classes);
this.generatePropClasses('md-align', 'small', 'mdAlignSmall', classes);
@ -109,6 +115,14 @@
this.generatePropClasses('md-align', 'large', 'mdAlignLarge', classes);
this.generatePropClasses('md-align', 'xlarge', 'mdAlignXlarge', classes);
/* Vertical Alignment */
this.generatePropClasses('md-vertical-align', '', 'mdVerticalAlign', classes);
this.generatePropClasses('md-vertical-align', 'xsmall', 'mdVerticalAlignXsmall', classes);
this.generatePropClasses('md-vertical-align', 'small', 'mdVerticalAlignSmall', classes);
this.generatePropClasses('md-vertical-align', 'medium', 'mdVerticalAlignMedium', classes);
this.generatePropClasses('md-vertical-align', 'large', 'mdVerticalAlignLarge', classes);
this.generatePropClasses('md-vertical-align', 'xlarge', 'mdVerticalAlignXlarge', classes);
return classes;
}
},