标签: polymer

我在Polymer和Angular Material中看到了很多材料元素.据我所知,这两款产品都是google关于Material design的产品,它们之间有什么关系吗？有关Angular 2.0材质的计划吗？

我想知道为什么Polymer元素需要在自定义元素名称中使用破折号,就像<my-component>Angular组件不需要这样,特别是Angular组件也使用ShadowDOM.

**编辑**它似乎甚至没有被建议在Angular中做好.

通常

core-animated-pages当我有一个滚动页面的很长的列表时,我发现很难使用Polymer元素来实现芯片列表到卡片类型模式.我认为困难在于,一旦转换完成,隐藏部分就会从布局中取出,我很难找到解决方法.

简单的插图

JSFiddle:http://jsfiddle.net/hmknv3jh/

在输出上,滚动到底部并单击芯片,问题应该是显而易见的.

细节

确保您必须滚动才能到达底部的芯片并单击一个.芯片从屏幕飞到顶部,然后突然卡片显示在中央,后面的列表消失了(连同滚动条).单击该卡后,它会从底部的屏幕飞出,然后再次显示列表,但您位于页面顶部,而不是您单击的底部.

救命？

有谁知道解决这个问题的最佳方法？理想情况下,我希望该卡的行为类似于模式对话框,后面的列表中没有移动,但仍然有芯片和卡之间的好英雄过渡.

自发布以来,我一直在使用Polymer 1.0,我遇到了一个用例,其中一个选择列表是不够的(选择的选项太多).我真正需要的是一个自动完成文本框.

是否有内置或计划在纸张或铁聚合物控制？或者我应该关注其他框架的自动完成解决方案？到目前为止,我已经能够保持我的应用程序轻量级,如果我可以帮助它,我宁愿避免使用其他框架.

谢谢,

瑞安

编辑:我看到提出第一方开发的自动完成的最佳位置是GitHub上的PolymerElements/paper-elements repo.我将在https://github.com/PolymerElements/paper-elements/issues/26上讨论.

有没有人有任何建议来解决背景背后出现的模态问题？

到目前为止,我已经尝试确保我拥有所有必要的导入(包括<paper-dialog-scrollable>).

我还尝试了一个"hack-fix"(由某人建议)涉及设置z-index: autocss paper-header-panel.两者都不起作用.

值得注意的是<paper-dialog>标签工作得很好.直到我添加modal属性.

有任何想法吗？

出现在互联网上的是此问题报告和此Stackoverflow问题.

<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">

<dom-module id="example-element">
  <template>
    <!-- Dialog -->
    <paper-dialog id="contactDialog" modal>
      <h2>Login</h2>
      <paper-dialog-scrollable>
        <form id="contact-form" autofocus>
          <paper-input autofocus id="name" label="Your Name"></paper-input>
          <paper-input id="email" label="Email Address"></paper-input>
        </form>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm>Accept</paper-button>
      </div>
    </paper-dialog>
    <!-- Button -->
    <paper-button id="login"
                  data-dialog="contactDialog"
                  on-tap="openDialog">Login</paper-button>
  </template>
</dom-module>
<script>
  (function() {
    Polymer({ …

Polymer Starter Kit和Polymer App Toolbox有什么区别？

两者都是Web组件,构建和测试工具以及用于使用Polymer构建Progressive Web Apps的Material Design模板的集合.

我应该以新项目为基础的哪一个？

我正在使用Polymer 2开发一个Web组件,并且希望使用第三方JavaScript库,该库不是专门为Web组件设计的.据我所知,唯一的方法是<script>在我的Web组件的HTML文件中包含引用该库的标记.

我可以看到这样做的几个问题,并想知道是否有任何解决方法,实际上是否以这种方式包含第三方库被认为是不好的做法.

1. 外部库可能设置全局变量,这些变量对页面上的其他组件可见,允许Web组件相互分离,或者破坏它们所托管的页面.由于封装经常被吹捧为使用Web组件的一大优势,这似乎是一个问题.

2. 外部库可能执行DOM查询或更新,这些查询或更新无法访问正在使用它们的Web组件的影子,因此外部库可能根本不工作,或者可能再次更新托管页面的DOM,从而破坏封装.

所以,我错过了什么或这是否意味着在Web组件中包含外部库是一个非常糟糕的主意？如果是这样,这似乎是这项技术的一个巨大限制,因为我们无法利用大量已有的JS库.

我在聚合物组件中有一个元素,并希望有条件地添加一个css类.

<div class="bottom {{completed: item.completed}}">

如果item.isCompleted为true,则添加.completed类.

但是,我有以下错误:

表达式语法无效:已完成？:item.completed

我不想将孔子树放在模板条件中.是否可以在html标签内使用表达式？我正在使用最后一个聚合物版本,这种功能是否以任何方式迁移或替换？

我是Polymer的新手.我开始编写一个简单的webapp,其中1.用户首先登陆登录页面2.如果用户通过登录,则将用户引导至内容页面

我写了一个元素"登录"

<dom-module id="login">
  <template>
    <!-- local DOM for your element -->
    <p>Username</p>
    <input class="paper-font-body2" value="{{email::change}}" type="email">
    <br/>
    <p>Password</p>
    <input class="paper-font-body2" value="{{password::change}}" type="password">
    <p>{{errorMessage}}</p>

    <iron-ajax
      id="ajax"
      url=""
      method="POST"
      on-response="signInResponse"
      debounce-duration="300">
    </iron-ajax>

    <button on-click="signIn">Signin</button>
  </template>
</dom-module>

<script>
  // element registration
  Polymer({
    is: "login",

    // add properties and methods on the element's prototype
    properties: {
      // declare properties for the element's public API
      email: {
        type: String,
        value: "username"
      },
      password: {
        type: String,
        value: "password"
      },
      errorMessage: {
        type: String,
        value: …

燮!后退按钮有时不适用于我的聚合物项目.当我点击后退按钮page变量是钢当前页面,我需要按两次或三次按钮才能使它工作,例如我/#/rules从页面进入页面,/#/home但它不会回到/#/home一次我按下后退按钮第二次或第三次它回到主页面的方式.这是我的观察者和路由器:

properties: {
    page: {
        type: String,
        reflectToAttribute: true,
        observer: '_pageChanged',
    },
},

observers: [
    '_routePageChanged(routeData.page)',
],

_routePageChanged: function (page) {
        this.page = page || 'home';
        this.set('route.path', `/${this.page}`);
},

_pageChanged: function (page) {
    // Load page import on demand. Show 404 page if fails
    var resolvedPageUrl = this.resolveUrl(page + '.html');
    this.importHref(resolvedPageUrl, null, this._showPage404, true);
    window.history.pushState({}, null, `#/${this.page}`);
},

这是我的app-route要素:

<app-route route="{{route}}" pattern="/:page" data="{{routeData}}" tail="{{subroute}}"></app-route>

只是无法弄清楚为什么它第一次不起作用.感谢任何帮助,我已经搜索了很多没有结果.