Question

我创建了一个包含JQuery-Knob的简单自定义元素，并将其放置在core-scaffold布局中。与它交互时，我注意到原点不正确。它表现得好像脚手架不在那里。

另一件事是，当data-width属性设置为高于200时，旋钮的底部会被切断。

造成这种情况的原因是什么？如何解决？

enter image description here

fancy_knob.html：

<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="fancy-knob">
  <template>
      <input type="text" value="90" id="dial" data-width="400">
  </template>
  <script type="application/javascript">
    Polymer({
        ready: function() {
            $(this.$.dial).knob();
        }
    })
  </script>
</polymer-element>

的index.html：

<!doctype html>
<html>
    <head>
        <script src="bower_components/platform/platform.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://rawgit.com/aterrien/jQuery-Knob/master/dist/jquery.knob.min.js"></script>

        <link rel="import" href="bower_components/core-scaffold/core-scaffold.html">

        <link rel="import" href="fancy_knob.html">

        <style>
            html,body {
                height: 100%;
                margin: 0;
            }
        </style>

    </head>
    <body unresolved>
        <core-scaffold>
            <fancy-knob></fancy-knob>
        </core-scaffold>
    </body>
</html>

Answer 1

聚合物核 - 支架

要使用core-scaffold，mandatory使用导航器，例如core-header-panel，导航等

<body unresolved>
    <core-scaffold>
        <core-header-panel></core-header-panel>
        <fancy-knob></fancy-knob>
    </core-scaffold>
</body>

如果您仍想隐藏侧边栏，请按以下方式应用：

core-scaffold /deep/ core-drawer-panel /deep/ core-selector #main {
    left: 0 !important;
}
core-scaffold /deep/ core-drawer-panel /deep/ core-selector #drawer {
    width: 0 !important;
}

jQuery Knob

请同时指定data-height=400（默认为200）。

聚合物 - 可触摸的自定义元素

1 个答案:

聚合物核 - 支架

jQuery Knob