Clever Geek Handbook

Polymer 1.0: Is there a way to use "layout" as an attribute instead of a CSS class, or by serializing the attributes in the class attribute?

I have created my application in polymer 0.5.

I have now updated it to polymer 1.0.

For a responsive layout, I used the layout attribute using the custom layout attributes logic in Polymer 0.5.

See the code below:

<template is="auto-binding">
<core-media-query query="max-width: 767px" queryMatches="{{smallScreen}}"></core-media-query>
<section layout vertical?="{{smallScreen}}" horizontal?="{{!smallScreen}}">
    <section flex four?="{{!smallScreen}}" auto?="{{smallScreen}}">
        <paper-input-decorator label="First name" floatingLabel>
            <input type="text" is="paper-input" id="fname" name="fname">
        </paper-input-decorator>
    </section>
    <section flex four?="{{!smallScreen}}" auto?="{{smallScreen}}">
        <paper-input-decorator label="Last name" floatingLabel>
            <input type="text" is="paper-input" id="lname" name="lname">
        </paper-input-decorator>
    </section>
</section>
</template>

Now polymer 1.0 introduces one element "iron-layout-flex", and all the signs are that now instead of attributes we have to work with classes ".layout", ". Horizontal", ".vertical"? It is very difficult to figure out how I should configure it according to my layout attribute logic.

So my question is, is there a way to use "layout" as an attribute instead of a CSS class, or by serializing the attributes in the class attribute?

+3


source to share


2 answers


Well, in theory, you could translate attributes into new css layout properties. Something like this (untested, so no guarantee it will actually work)



<style is="custom-style">
  html /deep/ [layout][vertical] {
    @apply(--layout-vertical);
  }

  html /deep/ [layout][horizontal] {
    @apply(--layout-horizontal);
  }

  html /deep/ [flex][four] {
    @apply(--layout-flex-4);
  }

  html /deep/ [flex][auto] {
    @apply(--layout-flex-auto);
  }
</style>
+2


source


As with Polymer 1.2, you can now use compound binding

see the Polymer blog .

Meaning, you should now do the following:



<div class="someOtherClass [[addClassIf('horizontal', smallScreen)]] [[addClassIf('vertical', !smallScreen)]]" >
</div>

..
smallScreen: {
   type: Boolean,
   value: false,
}
..

addClassIf: function(classToAdd, shouldAdd)
{
   if(shouldAdd)
      return classToAdd;
}

There might be another (better) way to do this when it works compound binding

. But it does show the concept of how it can be done.

+1


source






More articles:


All Articles