聚合物1.0:有没有办法使用' layout'作为属性而不是CSS类或在类属性中使用属性序列化?

时间:2015-06-05 10:25:58

标签: javascript html polymer web-component polymer-1.0

我用聚合物0.5制作了我的应用程序。

现在我已将其更新为聚合物1.0。

对于响应式布局,我在Polymer 0.5中使用了布局属性的自定义逻辑布局属性。

请参阅以下代码:

<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>

现在在聚合物1.0中引入了一种元素&#34; iron-layout-flex&#34;并且所有迹象都表明现在我们必须使用类和#34; .layout&#34;,&#34; .horizo​​ntal&#34;,&#34; .vertical&#34;?我应该如何根据布局属性的逻辑进行调整,这是非常令人困惑的。

所以,我的问题是,有没有办法使用&#39; layout&#39;作为属性而不是CSS类或在类属性中使用属性序列化?

2 个答案:

答案 0 :(得分:2)

好吧,理论上你可以将属性转换为新的布局css属性。像这样的东西(未经测试,所以不保证这实际上会起作用)

<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>

答案 1 :(得分:1)

从Polymer 1.2开始,现在可以使用compound binding查看Polymer Blog

意思是,您现在应该可以执行以下操作:

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

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

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

现在compound binding可以使用其他(更好)方法。但这显示了如何实现它的概念。