Vue-material: [SCSS] gutter

[luckylooke]

md-gutter should be automatic, but I cant see gutter between items

Codepen

[d3radicated]

You have to supply a number for md-gutter to work.

<md-layout :md-gutter="8"></md-layout>

[luckylooke]

Documentation says: "If you want the automatic calculation the engine will set 16px for small screens and then apply 24px for medium to large." How can I achieve this?

[pablohpsilva]

I'll check if it has any bugs.
Thank you @luckylooke :)

[guanzo]

If you need to provide an argument to md-gutter, than the documentation is outdated

Example of code found on the "layout" page

<md-layout md-gutter>
  <md-layout md-flex="33"></md-layout>
  <md-layout></md-layout>
</md-layout>

[anaraqueltomas]

@pablohpsilva I also wen't with the documentation and arrived to the conclusion that md-gutter by itself wasn't working, then I tried to find the problem. I believe that when there are multiple types per prop, in which simultaneously Boolean and String, a simple prop name declaration won't work as true.

from vue-material.debug.js

mdGutter: [String, Number, Boolean]

from vue.js

  // handle boolean props
  if (isType(Boolean, prop.type)) {
    if (absent && !hasOwn(prop, 'default')) {
      value = false;
    } else if (!isType(String, prop.type) && (value === '' || value === hyphenate(key))) {
      value = true;
    }
  }

The initial value of a prop like md-gutter will be an empty string. Since the prop can take a value in the form of a String, the else if condition will resolve to false, not letting the value turn to true.

From the documentation it seems that this prop should only take numbers or true|false so I don't see the need for String as a prop type. Removing 'String' from the prop mdGutter type array would make md-gutter work as the documentation says.

Hope that helped.

[Samuell1]

Closing this issue as our focus is on the new 1.0.0 version.