标签: paper-elements

请帮助我理解Angular Material github和主页中的以下引用:

该项目处于早期预发布阶段.Angular Material既是Material Design的参考实现,也是Polymer项目Paper Elements集合的补充.

---

Angular Material Design项目是一个类似于Polymer项目的Paper元素集合中提供的参考实现工作.该项目提供了一组实现材料设计系统的AngularJS UI元素.

我知道Polymer是Web组件的框架,项目的一部分是纸质元素的集合.我不明白这两者是如何相关的,或者为什么谷歌正在开发两个惊人相似但又不同的项目.

• 角度材料只是纸质元素的端口有角度吗？
• Web开发人员是否在其Web应用程序中使用Angular Material和Paper Elements？
• 这两个最终是否会有效地变得相同？(AngularJS开发人员使用的Angular材料和其他人使用的Paper Elements？)

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

到目前为止,我已经尝试确保我拥有所有必要的导入(包括<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({ …

我试图使用paper-button与type属性设置为submit(作为一个将与做button元素)提交封闭form,但由于某种原因,无法提交表单.这是一个错误或功能吗？

如何paper-button提交表格？

PS:我在飞镖地(不是js).

我使用聚合物文档中的这个例子

 <paper-dialog>
    <h2>Header</h2>
    <paper-dialog-scrollable>
        Lorem ipsum...
    </paper-dialog-scrollable>
    <div class="buttons">
     <paper-button dialog-dismiss>Cancel</paper-button>
     <paper-button dialog-confirm>Accept</paper-button>
   </div>
</paper-dialog>

当我点击不是对话框的地方时,在每个浏览器中关闭对话框,但在iPhone IOS 8.4上它不起作用.我无法关闭对话框.

我怎么解决这个问题？

题:

每当<paper-dialog>元素关闭时如何自动执行函数？

版本:聚合物1.0

码:

<paper-dialog id="paper-id"
              entry-animation="scale-up-animation"
              exit-animation="scale-down-animation">
    <sample-element></sample-element>
</paper-dialog>

我有纸输入元素

<paper-input 
    id="{{ id }}" 
    label="{{ label }}" 
    on-keyup="{{ keypressHandler }}" 
    value="{{ value }}">
</paper-input>

当钥匙被释放时我可以抓住事件.

Polymer("app-input", {
    ready: function() {
        this.value = false;
    },
    keypressHandler: function(event, detail, sender) {
        console.log("inputChanged");
        console.log(this.value);
    }
});

但是只有在从输入字段中删除焦点时才更改this.value,因此我无法在释放按钮时检索元素值.

如何在keypressHandler()中获取元素值？

我有一些简单的代码(Angular2 + Polymer),paper-input用iron-icon一个suffix图标创建一个:

 <paper-input type="text" [control]="email" label="Email">
       <iron-icon suffix icon="mail"></iron-icon>
 </paper-input>

这是完整页面,请注意,实体化网格和行类是我带入项目的唯一实现类:

<div class="section">
    <h1 class="paper-font-headline">Admin Registration</h1>

    <div class="row">
        <div class="col s12 m6 6">
            <p class="paper-font-body2">some stuff here</p>
        </div>

        <div class="col s12 m6 6">
            <paper-card class="stretch">
                <div class="sub-section">
                    <form>
                        <paper-input type="text"
                                     [control]="email"
                                     label="Email">
                            <iron-icon suffix icon="mail"></iron-icon>
                        </paper-input>
                    </form>
                </div>
            </paper-card>
        </div>
    </div>
</div>

这在页面加载上看起来很不错:

但是,当我离开页面并返回时,图标会低于输入:

在html中,您可以清楚地看到图标paper-input-container位于导航之外.

谁看过这个吗？我很茫然.需要注意的一点是,只有webcomponents-lite.js在我的index.html文件中使用时才会发生这种情况.webcomponents.js使用时有其他问题(不应该使用),但这不是其中之一.这是Polymer 1.0.谢谢!

编辑:

这不是 Chrome中的问题,而是在其他主流浏览器中.

以下是我的进口,以防相关:

    <!-- 1. Load libraries --> …

我正在使用Polymer来建立一个网站.我目前在纸张波纹方面遇到了一些问题.现在我遇到的问题是,单击h2或时h3,即使删除<div class='description'>-tag和它的关闭选项卡时也不会出现波纹.看paper-ripple它的大小,它涵盖了整体<div class='album-header'>,所以这不应该是问题.

此外,<div class='description'>在填充区域中点击,也会发生波纹.

<div class="album-header" vertical layout on-tap="{{albumTapped}}">
    <paper-ripple class="recenteringTouch" fit></paper-ripple>
    <content select="img"></content>
    <div class="description">
        <content select="h2"></content>
        <content select="h3"></content>
    </div>
</div>

编辑:

我已经做了一些进一步的测试,我已经缩小了问题范围.看看这个例子.除非您还指定了不透明度,否则将样式应用于子元素不会产生任何问题.在链接中给出的示例中,绿色文本已被赋予不透明度.单击此文本不会为我生成涟漪(在Chrome 36中运行).(绿色的分配与它无关,只是为了更容易发现).单击该<h3>标记周围的任何位置都会发生纹波.

不幸的是,我发现当前的文档/示例中使用的纸张样式有点缺乏.我不是一个经验丰富的CSS人(实际上是相对新手),所以我真的可以使用如何实现Polymer 1.0应用程序范围样式的示例,以便被所​​有自定义元素使用(即通过将类应用于任何标签)那些自定义元素的本地DOM).我在Polymer 0.5中使用核心样式相对容易地做了这种事情,但它在1.0中已经改变得足以让我迷惑,特别是没有完整的文档/示例.似乎可能有几种方法可以实现这一目标.我也想知道纸张样式在1.0中是否仍然被认为是实验性的？在聚合物1.0在线元素目录(https://elements.polymer-project.org/elements/paper-styles)中没有使用文档或示例,尽管我在它的gitHub存储库中遇到了'some'.

我搜索了我的问题并找到了这个

但是,接受的解决方案对我不起作用但是我无法发表评论,因为我只有6个声望 - .-

所以情况是,我想使用纸张列表框中的Polymer框架中的纸质项目,但是当您通过单击选择项目时,背景将变为灰色...文档和问题的答案我联系abvoe建议覆盖--paper-item-selected/--paper-item-focus mixin,但这对我不起作用

我的代码:

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


<dom-module id="cit-literal-item">

<template>
    <!-- scoped CSS for this element -->
    <style is="custom-style">
        .spacer {
            @apply(--layout-flex);
        }
        paper-item {
            --paper-item-selected: {
                background-color: #FFFFFF;
            };

            --paper-item-focused: {
                background-color: #FFFFFF;
            };
        }
    </style>
    <paper-item>Test</paper-item>
</template>
</dom-module>

主要文件代码:

...
<!-- Polymer custom elements -->
<link rel="import" href="lib/internal/dom-modules/literals/cit-literal-item.html">
...
<body>
    <paper-listbox>
        <cit-literal-item></cit-literal-item>
        <cit-literal-item></cit-literal-item>
    </paper-listbox>
</body>