标签: paper-elements

我正在为移动设备编写一个Web应用程序polymer,它将被打包使用phonegap以在Android设备上运行.我正在使用聚合物paper-tabs并core-animated-pages显示切换效果.在设备上,除了ripple effect标签触摸外,一切运行良好.它使整个事物看起来很丑陋而且很迟钝.如何在纸张标签(以及最终每个其他纸张元素)中禁用涟漪效果？

我尝试将noink属性设置true为纸质标签源,如下所示,但它无法正常工作.

 Polymer('paper-tabs', {

/**
 * If true, ink ripple effect is disabled.
 *
 * @attribute noink
 * @type boolean
 * @default false
 */
noink: true,

Polymer 1.0:如何在纸张下拉菜单中获取所选项目的值？

我正在使用iron-ajax提交一些信息,而且我不能从纸张下拉菜单中获得价值(我不想要标签).我的纸张下拉菜单的ID是'mymenu'.我试过这些:

this.$.mymenu.selectedItem.value

core-icons包含不同的图标集

• 图标
• AV-图标
• 通信图标
• 设备图标
• 硬件图标
• 图像图标
• 地图,图标
• 通知-图标
• PNG-图标
• 社会图标

如何使用它们并不明显.

从聚合物连接核心元素和纸元素的最佳方法是什么？作为一个大文件？两个单独的(核心和纸)？一个较小的师(5 +或10 +或20 +)？

我试图减少网络应用程序的每个网页的导入数量,并且无法决定如何组织聚合物网络组件导入.有什么建议？/使用硫化的最佳方法？

在我的聚合物应用程序中,当我使用iPhone打开纸质对话框时,它不会居中,而不是使用桌面Mac或PC使用Chrome或Safari打开它.

我正在动态构建paper-dialog元素并使用javascript将其放在DOM模板中,然后调用open():

var d = document.createElement('paper-dialog');
d.innerHTML = "<h2>Dialog Title</h2>"
         "<p>some content</p>"+
         '<div class="buttons">'+
         "<paper-button >More Info...</paper-button>"+
         "<paper-button dialog-dismiss>Decline</paper-button>"+
         "<paper-button dialog-confirm autofocus>Accept</paper-button>"+
         "</div>";
var b = Polymer.dom(this.root).appendChild(d);
b.open();

我没有使用任何特殊的样式或媒体查询.我以编程方式添加对话框的原因是因为我在不同的时间显示了大量不同的对话框消息和不同的内容,并且每个都应该在不同的屏幕上调用回调,具体取决于添加对话框的人.换句话说,我需要在angular-material的$ mdDialog中添加我的对话框,我知道聚合物不是那么微不足道,也许不是预期用途,但对于我的情况,这就是我需要的,除非有更好的方法.

请参阅下面问题的屏幕截图

苹果手机:

铬:

我正在尝试在我的Polymer 1.0应用程序中创建一个浮动添加按钮,其功能与Google Inbox的浮动添加按钮非常相似.第一个问题:

为了实现类似的功能,我目前正在使用paper-fab元素onmouseover和onmouseoutjs函数,如下所示:

<paper-fab id="addBtn" icon="add" class="fab red" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"></paper-fab>

<script>

    hoverOver = function(srcElement) {
        srcElement.querySelector("paper-material").elevation = 4;
    };

    hoverOut = function(srcElement) {
        srcElement.querySelector("paper-material").elevation = 0;
    };

</script>

这是推荐的方法,还是有一种更加"聚合"的方式来实现这一目标？

我有一个自定义元素,iron-list用于显示一个对象数组.每个项目都通过模板生成,如下所示:

<iron-list id="projectList" 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)">

                   <!-- I use a paper-menu-button to display a list of available actions here -->

                   <!-- list item object content here such as: [[projLI.desc]] etc. -->

               </div>
           </paper-material>
        </div>
    </template>
</iron-list>

什么是最好的聚合物友好方法来检测铁列表项目本身的点击事件(理想情况下知道哪个项目实际上是通过点击projLI._id),还能够以paper-menu-button不同的方式处理内部点击事件？

我是一个眼球聚合物1.0的新事件听众(https://www.polymer-project.org/1.0/docs/devguide/events.html),作为一种可能的方法,试图听取不同的元素点击事件(如该页面上的示例1所示),但我不确定这是否可行.我还考虑过以iron-selector某种方式使用铁列表吗？那可行吗？我不确定它是否会起作用,因为铁选择器只有一个孩子(即铁列表元素,而不是它的模板儿童).

我觉得我错过了一个非常简单的方法来实现这一目标.有人可以给我看灯吗？

我有以下代码:

<paper-toolbar id="mainToolbar">
    <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
    <div class="app-name">Dashbord</div>
    <span class="flex"></span>
    <paper-menu-button horizontalAlign="right" horizontalOffset="20" verticalAlign="top" verticalOffset="50">
        <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
        <paper-menu class="dropdown-content">
            <paper-item>Share</paper-item>
            <paper-item>Settings</paper-item>
            <paper-item>Help</paper-item>
        </paper-menu>
   </paper-menu-button>
</paper-toolbar>

菜单按钮按预期工作,但下拉列表horizontalAlign和horizontalOffset属性不会生效.

我让下拉菜单工作的唯一方法是对元素定义中的值进行硬编码:

<iron-dropdown
  id="dropdown"
  opened="{{opened}}"
  horizontal-align="right"
  vertical-align="top"
  horizontal-offset="50"
  vertical-offset="20"
  open-animation-config="[[openAnimationConfig]]"
  close-animation-config="[[closeAnimationConfig]]"
  no-animations="[[noAnimations]]"
  focus-target="[[_dropdownContent]]">
  <paper-material class="dropdown-content">
    <content id="content" select=".dropdown-content"></content>
  </paper-material>
</iron-dropdown> 

paper-input仅在用户键入第一个字符时才浮动其标签.用户点击标签后是否可以浮动标签？例如,请参阅https://unacademy.in/登录屏幕输入字段.

我有一个纸质列表框,里面有纸质物品.

我将selected设置为等于对象的ID,在本例中为2.(这不是索引).

它似乎没有选择具有该值的项目.

有没有我在列表框的实现上做错了什么？

这是我的样本

<paper-dropdown-menu label="Type" no-animations="true" >
  <paper-listbox id="paperListbox" class="dropdown-content" selected="{{type}}">
    <paper-item value="1">Internal</paper-item>
    <paper-item value="2">External</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

所以,{{type}}将设置为2,但它不会选择第二项.我该如何解决这个问题？

在Firefox 39.0和Chrome 43.0上使用Polymer 1.0

聚合物入门套件

我基本上有:

<body unresolved class="fullbleed layout vertical"> <template is="dom-bind" id="app"> <paper-drawer-panel id="paperDrawerPanel" narrow="true"> <div drawer> Drawer </div> <div main> Main </div> </paper-drawer-panel> </template> </body>

这是来自Polymer Starter Kit.

我从中删除了forceNarrow属性paper-drawer-panel,甚至尝试添加属性narrow="false",但是当我在笔记本电脑上浏览器中查看网站(15"屏幕)时,面板始终处于窄模式.当我narrow在控制台中查看属性时,它被设置为true.

据我所知,当窗口大于时,抽屉和主要内容并排出现responsiveWidth.那么为什么我没有看到这种行为？