Skip to content

Commit e67ca9c

Browse files
marcosmouramarcosmoura
committed
add alignment props to mdLayout #224 
1 parent 8e6182b commit e67ca9c

File tree

3 files changed

+153
-17
lines changed

3 files changed

+153
-17
lines changed

‎docs/src/pages/ui-elements/Layout.vue‎

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,18 @@
126126
<md-table-cell><code>Number</code></md-table-cell>
127127
<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>
128128
</md-table-row>
129+
130+
<md-table-row>
131+
<md-table-cell>md-align-{type}</md-table-cell>
132+
<md-table-cell><code>String</code></md-table-cell>
133+
<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>
134+
</md-table-row>
135+
136+
<md-table-row>
137+
<md-table-cell>md-align-{type}</md-table-cell>
138+
<md-table-cell><code>Number</code></md-table-cell>
139+
<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>
140+
</md-table-row>
129141
</md-table-body>
130142
</md-table>
131143
</api-table>
@@ -300,13 +312,13 @@
300312

301313
<example-box card-title="Direction">
302314
<div class="layout-demo grid" slot="demo">
303-
<md-layout class="column-size" md-gutter>
304-
<md-layout md-column md-gutter class="color">
315+
<md-layout class="column-size" md-gutter="16">
316+
<md-layout md-column md-gutter="16" class="color">
305317
<md-layout md-flex="20"></md-layout>
306318
<md-layout></md-layout>
307319
</md-layout>
308320

309-
<md-layout md-column md-gutter class="color">
321+
<md-layout md-column md-gutter="16" class="color">
310322
<md-layout md-flex="50"></md-layout>
311323
<md-layout></md-layout>
312324
<md-layout></md-layout>
@@ -332,6 +344,78 @@
332344
</div>
333345
</example-box>
334346

347+
<example-box card-title="Alignment">
348+
<div class="layout-demo grid gutter" slot="demo">
349+
<md-layout md-gutter="16" class="color">
350+
<md-layout md-flex="50">
351+
<span>start</span>
352+
</md-layout>
353+
</md-layout>
354+
355+
<md-layout md-align="end" md-gutter="16" class="color">
356+
<md-layout md-flex="33">
357+
<span>end</span>
358+
</md-layout>
359+
</md-layout>
360+
361+
<md-layout md-align="end" md-gutter="16" class="color">
362+
<md-layout md-flex="20">
363+
<span>end</span>
364+
</md-layout>
365+
366+
<md-layout md-flex="20">
367+
<span>end</span>
368+
</md-layout>
369+
</md-layout>
370+
371+
<md-layout md-align="center" md-gutter="16" class="color">
372+
<md-layout md-flex="35">
373+
<span>center</span>
374+
</md-layout>
375+
376+
<md-layout md-flex="35">
377+
<span>center</span>
378+
</md-layout>
379+
</md-layout>
380+
</div>
381+
382+
<div slot="code">
383+
<code-block lang="xml">
384+
&lt;md-layout md-gutter=&quot;16&quot;&gt;
385+
&lt;md-layout md-flex=&quot;50&quot;&gt;
386+
&lt;span&gt;start&lt;/span&gt;
387+
&lt;/md-layout&gt;
388+
&lt;/md-layout&gt;
389+
390+
&lt;md-layout md-align=&quot;end&quot; md-gutter=&quot;16&quot;&gt;
391+
&lt;md-layout md-flex=&quot;33&quot;&gt;
392+
&lt;span&gt;end&lt;/span&gt;
393+
&lt;/md-layout&gt;
394+
&lt;/md-layout&gt;
395+
396+
&lt;md-layout md-align=&quot;end&quot; md-gutter=&quot;16&quot;&gt;
397+
&lt;md-layout md-flex=&quot;20&quot;&gt;
398+
&lt;span&gt;end&lt;/span&gt;
399+
&lt;/md-layout&gt;
400+
401+
&lt;md-layout md-flex=&quot;20&quot;&gt;
402+
&lt;span&gt;end&lt;/span&gt;
403+
&lt;/md-layout&gt;
404+
&lt;/md-layout&gt;
405+
406+
&lt;md-layout md-align=&quot;center&quot; md-gutter=&quot;16&quot;&gt;
407+
&lt;md-layout md-flex=&quot;35&quot;&gt;
408+
&lt;span&gt;center&lt;/span&gt;
409+
&lt;/md-layout&gt;
410+
411+
&lt;md-layout md-flex=&quot;35&quot;&gt;
412+
&lt;span&gt;center&lt;/span&gt;
413+
&lt;/md-layout&gt;
414+
&lt;/md-layout&gt;
415+
</code-block>
416+
</div>
417+
</example-box>
418+
335419
<example-box card-title="Gutters">
336420
<div class="layout-demo grid gutter" slot="demo">
337421
<md-layout class="no-gutter color">
@@ -419,7 +503,7 @@
419503
</md-layout>
420504
</md-layout>
421505

422-
<md-layout md-gutter class="color">
506+
<md-layout :md-gutter="true" class="color">
423507
<md-layout>
424508
<span>Automatic</span>
425509
</md-layout>

‎src/components/mdLayout/mdLayout.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,33 @@
4444
}
4545

4646

47+
/* Alignments */
48+
49+
@mixin layout-align($size: null) {
50+
@if $size == null {
51+
$size : '';
52+
}
53+
54+
@if $size != '' {
55+
$size : '-#{$size}';
56+
}
57+
58+
.md-align#{$size}-start {
59+
justify-content: flex-start;
60+
}
61+
62+
.md-align#{$size}-center {
63+
justify-content: center;
64+
}
65+
66+
.md-align#{$size}-end {
67+
justify-content: flex-end;
68+
}
69+
}
70+
71+
@include layout-align();
72+
73+
4774
/* Gutter Size */
4875

4976
@mixin layout-gutter($margin: -12px, $padding: 12px) {
@@ -143,6 +170,7 @@ $sizes: (8, 16, 24, 40);
143170
@mixin breakpoint-layout($size) {
144171
@include layout($size);
145172
@include layout-flex($size);
173+
@include layout-align($size);
146174

147175
.md-hide-#{$size} {
148176
display: none;

‎src/components/mdLayout/mdLayout.vue‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,24 @@
2525
mdHideLarge: Boolean,
2626
mdHideXlarge: Boolean,
2727
mdGutter: [String, Number, Boolean],
28+
mdAlign: String,
29+
mdAlignXsmall: String,
30+
mdAlignSmall: String,
31+
mdAlignMedium: String,
32+
mdAlignLarge: String,
33+
mdAlignXlarge: String,
2834
mdFlex: [String, Number, Boolean],
2935
mdFlexXsmall: [String, Number, Boolean],
3036
mdFlexSmall: [String, Number, Boolean],
3137
mdFlexMedium: [String, Number, Boolean],
3238
mdFlexLarge: [String, Number, Boolean],
3339
mdFlexXlarge: [String, Number, Boolean],
34-
mdFlexOffset: [String, Number]
40+
mdFlexOffset: [String, Number, Boolean],
41+
mdFlexOffsetXsmall: [String, Number, Boolean],
42+
mdFlexOffsetSmall: [String, Number, Boolean],
43+
mdFlexOffsetMedium: [String, Number, Boolean],
44+
mdFlexOffsetLarge: [String, Number, Boolean],
45+
mdFlexOffsetXlarge: [String, Number, Boolean]
3546
},
3647
computed: {
3748
classes() {
@@ -63,31 +74,44 @@
6374
}
6475
}
6576
66-
if (this.mdFlexOffset) {
67-
classes['md-flex-offset-' + this.mdFlexOffset] = true;
68-
}
77+
/* Flex */
78+
this.generatePropClasses('md-flex', '', 'mdFlex', classes);
79+
this.generatePropClasses('md-flex', 'xsmall', 'mdFlexXsmall', classes);
80+
this.generatePropClasses('md-flex', 'small', 'mdFlexSmall', classes);
81+
this.generatePropClasses('md-flex', 'medium', 'mdFlexMedium', classes);
82+
this.generatePropClasses('md-flex', 'large', 'mdFlexLarge', classes);
83+
this.generatePropClasses('md-flex', 'xlarge', 'mdFlexXlarge', classes);
84+
85+
/* Flex Offset */
86+
this.generatePropClasses('md-flex-offset', '', 'mdFlexOffset', classes);
87+
this.generatePropClasses('md-flex-offset', 'xsmall', 'mdFlexOffsetXsmall', classes);
88+
this.generatePropClasses('md-flex-offset', 'small', 'mdFlexOffsetSmall', classes);
89+
this.generatePropClasses('md-flex-offset', 'medium', 'mdFlexOffsetMedium', classes);
90+
this.generatePropClasses('md-flex-offset', 'large', 'mdFlexOffsetLarge', classes);
91+
this.generatePropClasses('md-flex-offset', 'xlarge', 'mdFlexOffsetXlarge', classes);
6992
70-
this.generateFlexClasses('', 'mdFlex', classes);
71-
this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes);
72-
this.generateFlexClasses('small', 'mdFlexSmall', classes);
73-
this.generateFlexClasses('medium', 'mdFlexMedium', classes);
74-
this.generateFlexClasses('large', 'mdFlexLarge', classes);
75-
this.generateFlexClasses('xlarge', 'mdFlexXlarge', classes);
93+
/* Alignment */
94+
this.generatePropClasses('md-align', '', 'mdAlign', classes);
95+
this.generatePropClasses('md-align', 'xsmall', 'mdAlignXsmall', classes);
96+
this.generatePropClasses('md-align', 'small', 'mdAlignSmall', classes);
97+
this.generatePropClasses('md-align', 'medium', 'mdAlignMedium', classes);
98+
this.generatePropClasses('md-align', 'large', 'mdAlignLarge', classes);
99+
this.generatePropClasses('md-align', 'xlarge', 'mdAlignXlarge', classes);
76100
77101
return classes;
78102
}
79103
},
80104
methods: {
81-
generateFlexClasses(size, name, object) {
105+
generatePropClasses(prop, size, name, object) {
82106
if (size) {
83107
size = '-' + size;
84108
}
85109
86110
if (this[name]) {
87111
if (typeof this[name] === 'boolean') {
88-
object['md-flex' + size] = true;
112+
object[prop + size] = true;
89113
} else {
90-
object['md-flex' + size + '-' + this[name]] = true;
114+
object[prop + size + '-' + this[name]] = true;
91115
}
92116
}
93117
}

0 commit comments

Comments
 (0)