聚合物1.0:有没有办法使用'layout'作为一个属性，而不是作为一个CSS类，或者在类属性中使用at

Polymer 1.0: Is there any way to use 'layout' as an attribute instead of as a CSS class or using Attribute serialization in the class attribute?

本文关键字：一个 属性 at CSS 或者 聚合物 layout 有没有      更新时间：2023-09-26

我已经在聚合物0.5中构建了我的应用程序。

现在我已经更新到polymer 1.0。

对于响应式布局，我使用了一个布局属性，使用自定义逻辑的布局属性在聚合物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中引入了一个元素"iron-layout-flex"，所有的迹象都表明，现在我们必须使用类来代替属性。布局"、"。水平"、".vertical"?这是非常令人困惑的，我应该如何调整我的布局属性的逻辑。

所以，我的问题是，有没有办法使用'布局'作为一个属性，而不是作为一个CSS类或使用属性序列化在类属性?

理论上，你可以将属性转换为新的布局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>

从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工作。但是这里展示了如何实现的概念

相关文章：