文章/答案/技术大牛

发布

社区首页 >问答首页 >Polymer2.0 -尝试通过绑定来自纸张输入的值来更改from组件属性值

问Polymer2.0 -尝试通过绑定来自纸张输入的值来更改from组件属性值
EN

Stack Overflow用户

提问于 2017-07-29 00:37:23

回答 1查看 89关注 0票数 0

我正在尝试从聚合物纸张输入控制webcomponent的属性值。

我可以使用纸张输入的两个绑定来更改值，但不能控制属性值

我创建了以下示例，并尝试将可调整大小的面板属性更改为垂直

 <resizable-panels [[text]]>

至

 <resizable-panels vertical>

使用纸张输入

参考https://codepen.io/nagasai/pen/QMjjQw的代码

HTML：

  <head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="resizable-panels/resizable-panels.html">
  <link rel="import" href="paper-input/paper-input.html" 
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
<style>
.panel { padding: 20px; color: white; font-family: sans-serif; width: 50%; }
      .p1 { background-color: #673AB7; }
      .p2 { background-color: #E91E63; }
      .p3 { background-color: #00BCD4; }
      .p4 { background-color: #FB8C00; }
      .p5 { background-color: #607D8B; }
      .p6 { background-color: #4CAF50; }
</style>
   <paper-input value="{{text::input}}"></paper-input>   
  <resizable-panels id="rp-2">
      <div class="panel p1">Lorem ipsum dolor…</div>
      <div class="panel p2">Second panel</div>
    </resizable-panels>
      <br>
         <resizable-panels [[text]]>
      <div class="panel p1">Lorem ipsum dolor…</div>
      <div class="panel p1">Second panel</div>
      <div class="panel p1">Third panel</div>
    </resizable-panels>
    </template>
  </dom-module>
</body>

JS：

  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {};

    }
       toggle() {
  this.$.collapse.toggle();
}

  }
  customElements.define(XFoo.is, XFoo);

polymer-2.0

web-component

回答 1

Stack Overflow用户

发布于 2017-07-29 05:14:40

这不是它应该如何工作的方式，你不能仅仅拍一个像这样的标签，然后期望它能工作-因为这不是服务器端构建-你不应该这样对待你的模板。

下面是一个有效的演示：https://codepen.io/anon/pen/rzOgQX

您应该在true/false之间切换布尔属性vertical以获取您想要的内容。希望这能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45378488

复制

相似问题

问Polymer2.0 -尝试通过绑定来自纸张输入的值来更改from组件属性值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Polymer2.0 -尝试通过绑定来自纸张输入的值来更改from组件属性值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Polymer2.0 -尝试通过绑定来自纸张输入的值来更改from组件属性值
EN