标签: paper-elements

我正在使用Polymer Project中的Paper Elements来构建表单,并且使用paper-radio-group标签及其子项遇到了问题paper-radio-button.使用正常的单选按钮列表,我会执行以下操作:

<input type="radio" name="myFieldName" value="MyFirstOption" />
<input type="radio" name="myFieldName" value="MySecondOption" />
<input type="radio" name="myFieldName" value="MyThirdOption" />

请注意,name属性是相同的,将单选按钮分组并为myFieldName字段生成单个值.但是以paper-radio-group相同的方式使用元素不起作用:

<paper-radio-group label="My Field">
  <paper-radio-button name="myFieldName" label="First"></paper-radio-button>
  <paper-radio-button name="myFieldName" label="Second"></paper-radio-button>
  <paper-radio-button name="myFieldName" label="Third"></paper-radio-button>
</paper-radio-group>

这会产生三个单选按钮,但选择一个不会取消选择其他按钮.如果我给每个人一个唯一的名称,那么它从UI的角度来看,但不同于标准的单选按钮行为.

除此之外,我在哪里指定每个单选按钮的值？有一个标签属性,但没有任何价值.我是否必须将隐藏的字段连接到change事件paper-radio-button或core-select事件上paper-radio-group？这似乎都不是一个特别优雅的解决方案.

所以我试图动态生成一个从 AJAX 数据源填充的纸下拉菜单，使用下面的代码效果很好：

<polymer-element name="my-element" attributes="selected">
  <template>

    <core-ajax auto url="/api/items/" response="{{items}}" handleAs="json"></core-ajax>
    <paper-dropdown-menu selected="{{selected}}">
      <template repeat="{{items}}">
        <paper-item name="{{id}}" label="{{name}}"></paper-item>
      </template>
    </paper-dropdown-menu>

  </template>

但是，如果我将初始选定项设置为已发布属性的值，或者我在“就绪”回调中设置的值，则加载项时不会选择下拉菜单项：

  <script>
  Polymer({
    publish: {
      selected: null
    }
  });
  </script>
</polymer-element>

我知道发生这种情况是因为在绑定下拉列表中的模板之前设置了“selected”属性，但我的问题是是否有办法 1) 将“selected”属性更改推迟到模板绑定之后或 2) 否则可靠地为下拉菜单设置初始选择的值？

如何在JSFiddle中导入核心元素和纸质元素.

我通过这些陈述进口聚合物:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.4.2/polymer.js"></script>

如何导入例如core-input或paper-input？

我正试图在我的应用程序中为卡片创建简单的涟漪效果.它工作得很好,但它也响应其容器外的鼠标事件:

代码如下所示:

<dom-module>
    ...
    <template>
        ...
        <paper-material>
            <div class="wrapper">...</div>
            <paper-ripple></paper-ripple>
        </paper-material>
        ...
    </template>
</dom-module>

我不太清楚它为什么会这样.任何的想法？

添加

整个页面是独立的dom-module.显然paper-ripple以这种方式使用会导致这种情况发生.我该如何解决？

我遇到了使用聚合物1.0的问题paper-menu-button.它的下拉菜单不会覆盖相邻iron-list元素.

我正在构建一个显示项目使用的元素,iron-list每个项目都有一个可以在该特定iron-list项目上执行的选项下拉菜单.然而,paper-menu-button的paper-menu下拉列表中没有出现对邻国的顶部iron-list的物品,只有在它自己的列表项的顶部.

我已经尝试检查Chrome中的项目,并使用z-index和溢出CSS设置无济于事.任何人都可以帮我解决我的叠加问题吗？

这是我的自定义元素的本地DOM模板的摘录(并在下面进一步查看截图):

更新: jsbin演示了这个问题:

http://jsbin.com/kuyovuh/1/edit?html,output

更新#2: 另请注意,在移动设备(Android)上的Chrome 44中,纸张菜单按钮在上述jsbin情况下根本不显示下拉列表.

<div id="projectsVertBoundary" class="layout vertical">

    <div id="projectsHorBoundary" class="layout horizontal center-center">

         <iron-list items="[[projects]]" indexAs="_id" as="projLI" class="layout flex">

             <template>

                    <div>
                        <paper-material id="itemShadow" animated elevation="1">

                            <div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)">

                                <paper-menu-button id="projOptionsBtn" vertical-align="top" horizontal-align="right" class="layout fixed-right">
                                    <paper-icon-button id="projOptionsButtonIcon" icon="menu" class="dropdown-trigger"></paper-icon-button>
                                    <paper-menu id="projOptionsSelMenu" class="dropdown-content">
                                        <paper-icon-item id="projEdit"> 
                                            <iron-icon icon="create"></iron-icon> Edit Project
                                        </paper-icon-item>
                                        <paper-icon-item id="projCopy">
                                            <iron-icon icon="content-copy"></iron-icon> Copy Project
                                        </paper-icon-item>
                                        <paper-icon-item id="projDelete"> …

所以我基本上paper-slider用自定义元素包装标准元素,并希望包含一些样式.以下是我目前的情况:

<dom-module id="my-slider">
<template>
    <style>
      /* Works */
      paper-slider {
        --paper-slider-active-color: red;
        --paper-slider-knob-color: red;
        --paper-slider-height: 3px;
      }

      /* Doesn't work */
      paper-slider #sliderContainer.paper-slider {
        margin-left: 0;
      }

      /* Also doesn't work */
      .slider-input {
        width: 100px;
      }
    </style>

    <div>
        <paper-slider editable$="[[editable]]" disabled$="[[disabled]]" value="{{value}}" min="{{min}}" max="{{max}}"></paper-slider>
    </div>
</template>

<script>
    Polymer({
        is: "my-slider",
        properties: {
            value: {
                type: Number,
                value: 0,
                reflectToAttribute: true
            },
            min: {
                type: Number,
                value: 0
            },
            max: {
                type: Number,
                value: 100
            },
            editable: Boolean, …

我可以paper-radio-button通过让按钮成为a的直接子节点来关联组内的多个s paper-radio-group.

<paper-radio-group selected="{{someProperty}}">
  <paper-radio-button name="foo">Foo</paper-radio-button>
  <paper-radio-button name="bar">Bar</paper-radio-button>
  <paper-radio-button name="baz">Baz</paper-radio-button>
</paper-radio-group>

但是,如果我paper-radio-button用这样的div 包装其中一个s,它将失去与该组的关联(因此可以选择该包装按钮和其他一个).这是一个问题,因为我想给该按钮一个工具提示.

<paper-radio-group selected="{{someProperty}}">
  <paper-radio-button name="foo">Foo</paper-radio-button>
  <paper-radio-button name="bar">Bar</paper-radio-button>
  <div>
    <paper-radio-button name="baz">Baz</paper-radio-button>
    <paper-tooltip>Tooltip text for baz.</paper-tooltip>
  </div>
</paper-radio-group>

我尝试使用forpaper-tooltip 的属性,但这并不会使工具提示仅在该特定按钮悬停时出现.

如果没有按钮成为直接孩子,我怎么能把a关联paper-radio-button起来paper-radio-group？

当我运行我的代码时,我只能看到STANDARD TEST纸张标题面板.纸抽屉面板内的所有东西似乎都被隐藏了.

如果我将初始paper-header-panel(class = blue)设置为1000px,则会显示其余内容.

有什么我需要设置所以最初的纸标题面板将根据内容自动改变它的高度？

谢谢

<link rel="import" href="/apps/polymer-chat/js/bower_components/polymer/polymer.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-item/paper-item.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/apps/polymer-chat/js/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/apps/polymer-chat/css/app-theme.html">

<dom-module id="main-component">
    <link rel="import" type="css" href="/apps/polymer-chat/css/main-component.css">
    
    <template>
        <paper-header-panel class="blue">
            <div class="paper-header">STANDARD TEST</div>
            <paper-drawer-panel 
                id="mainDrawerPanel" 
                class="main-drawer-panel" 
                responsive-width="600px"
                drawer-width="[[_computeListWidth(_isMobile)]]"
                drawer-toggle-attribute="list-toggle"
                narrow="{{_isMobile}}"
            >
                <paper-header-panel class="list-panel" drawer>
                    <paper-menu class="list" on-iron-activate="_listTap">
                        <paper-item>1</paper-item>
                        <paper-item>2</paper-item>
                        <paper-item>3</paper-item>
                        <paper-item>4</paper-item>
                    </paper-menu>
                </paper-header-panel>
                <paper-header-panel class="content-panel" main>
                    <paper-toolbar responsive-width="600px">
                        <paper-icon-button icon="menu" list-toggle></paper-icon-button>
                        <span class="flex">CHAT PERSON …

我已经正在使用paper-button点击事件,并试图增加on-click="angularComponent.function"在那里angularComponent.function是内正在使用本文按钮在angular.dart的组件的功能,但点击也不会触发函数调用.然而,有了on-click="angularComponent.function('a','b','c')"它,它确实触发了点击功能(由angular_node_bind模块提供).这意味着我无法获取事件对象,否则将传递给纯dart/polymer元素函数.怎么解决这个问题？

我下载了Polymer入门套件(Polymer 1.0),并且一直在尝试在我的网页上添加一个简单的纸质按钮,但它无法正确渲染.这是相关代码:

<section data-route="home">
      <paper-material elevation="1">

        <paper-button raisedButton
          id='rendered'
          label='patient'
          on-click='{{clickHandler}}'></paper-button>

        <button>Try Me</button>

        <paper-icon-button icon="refresh" label="label"></paper-icon-button>
        <paper-button raisedButton>search!</paper-button>

      </paper-material>

    </section>

第一个按钮根本没有显示,第二个按钮没有显示,第三个按钮工作,但标签没有显示,最后一个按钮呈现为文本,不可点击