聚合物1.0移動網絡應用程序不是在尋找合適的

你好，我有從CakePHP的鐵清單演示該工作示例：聚合物1.0移動網絡應用程序不是在尋找合適的

<?php 
use Cake\Routing\Router; 
?> 
<!doctype html> 
<html> 
<head> 

    <title>iron-list and paper-scroll-header-panel demo</title> 

    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 
    <meta name="mobile-web-app-capable" content="yes"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 

    <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?> 

    <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-flex-layout/iron-flex-layout.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-icon-button/paper-icon-button.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-ajax/iron-ajax.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-icons/iron-icons.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-list/iron-list.html"> 

<style is="custom-style"> 

    paper-scroll-header-panel { 
    @apply(--layout-fit); 
    @apply(--layout-vertical); 
    @apply(--paper-font-common-base); 
    } 

    paper-toolbar.tall .title { 
     font-size: 40px; 
     margin-left: 60px; 

     -webkit-transform-origin: left center; 
     transform-origin: left center; 
     overflow: visible; 
    } 

    paper-toolbar paper-icon-button { 
     --paper-icon-button-ink-color: white; 
    } 

    iron-list { 
     background-color: var(--paper-grey-200, #eee); 
     padding-bottom: 16px; 
    } 

    .item { 
    @apply(--layout-horizontal); 

     margin: 16px 16px 0 16px; 
     padding: 20px; 
     border-radius: 8px; 
     background-color: white; 
     border: 1px solid #ddd; 
    } 

    .item:focus { 
     outline: 0; 
     border-color: #666; 
    } 

    .avatar { 
     height: 40px; 
     width: 40px; 
     border-radius: 20px; 
     box-sizing: border-box; 
     background-color: #DDD; 
    } 

    .pad { 
     padding: 0 16px; 
    @apply(--layout-flex); 
    @apply(--layout-vertical); 
    } 

    .primary { 
     font-size: 16px; 
     font-weight: bold; 
    } 

    .secondary { 
     font-size: 14px; 
    } 

    .dim { 
     color: gray; 
    } 

</style> 

</head> 
<body unresolved> 

<template is="dom-bind"> 
    <iron-ajax url="<?= $this->Url->build(["controller" => "Users","action" => "test.json"]); ?>" last-response="{{data}}" auto></iron-ajax> 

    <paper-scroll-header-panel class="fit" condenses keep-condensed-header> 
     <paper-toolbar> 
      <paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button> 
      <div class="flex"></div> 
      <paper-icon-button icon="search" alt="Search"></paper-icon-button> 
      <paper-icon-button icon="more-vert" alt="More options"></paper-icon-button> 
      <div class="bottom title">iron-list</div> 
     </paper-toolbar> 
     <iron-list items="[[data.user]]" as="item"> 
      <template> 
       <div> 
        <div class="item" tabindex="0"> 
         <img class="avatar" src="[[item.image]]"> 
         <div class="pad"> 
          <div class="primary">[[item.email]]</div> 
          <div class="secondary">[[item.phone]]</div> 
          <div class="secondary dim">[[item.token]]</div> 
         </div> 
         <iron-icon icon$="[[iconForItem(item)]]"></iron-icon> 
        </div> 
       </div> 
      </template> 
     </iron-list> 
    </paper-scroll-header-panel> 
</template> 

<script> 

    document.querySelector('template[is=dom-bind]').iconForItem = function(item) { 
     return item ? (item.integer < 50 ? 'star-border' : 'star') : ''; 
    }; 

</script> 
</body> 
</html>

這件事是在演示相同的例子，如果鐵的名單，我只是改變了一些基本的東西，使它與我的cakephp架構一起工作。

現在我想把所有這些放在一個自定義的Polymer元素中。所以，我沒有這樣的：

<dom-module id="proto-element"> 
    <template> 

    <style is="custom-style"> 

     paper-scroll-header-panel { 
     @apply(--layout-fit); 
     @apply(--layout-vertical); 
     @apply(--paper-font-common-base); 
     } 

     paper-toolbar.tall .title { 
      font-size: 40px; 
      margin-left: 60px; 

      -webkit-transform-origin: left center; 
      transform-origin: left center; 
      overflow: visible; 
     } 

     paper-toolbar paper-icon-button { 
      --paper-icon-button-ink-color: white; 
     } 

     iron-list { 
      background-color: var(--paper-grey-200, #eee); 
      padding-bottom: 16px; 
     } 

     .item { 
     @apply(--layout-horizontal); 

      margin: 16px 16px 0 16px; 
      padding: 20px; 
      border-radius: 8px; 
      background-color: white; 
      border: 1px solid #ddd; 
     } 

     .item:focus { 
      outline: 0; 
      border-color: #666; 
     } 

     .avatar { 
      height: 40px; 
      width: 40px; 
      border-radius: 20px; 
      box-sizing: border-box; 
      background-color: #DDD; 
     } 

     .pad { 
      padding: 0 16px; 
     @apply(--layout-flex); 
     @apply(--layout-vertical); 
     } 

     .primary { 
      font-size: 16px; 
      font-weight: bold; 
     } 

     .secondary { 
      font-size: 14px; 
     } 

     .dim { 
      color: gray; 
     } 

    </style> 
    <iron-ajax url="<?= $this->Url->build(["controller" => "Users","action" => "test.json"]); ?>" last-response="{{data}}" auto></iron-ajax> 

    <paper-scroll-header-panel class="fit" condenses keep-condensed-header> 
     <paper-toolbar> 
      <paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button> 
      <div class="flex"></div> 
      <paper-icon-button icon="search" alt="Search"></paper-icon-button> 
      <paper-icon-button icon="more-vert" alt="More options"></paper-icon-button> 
      <div class="bottom title">iron-list</div> 
     </paper-toolbar> 
     <iron-list items="[[data.user]]" as="item"> 
      <template> 
       <div> 
        <div class="item" tabindex="0"> 
         <img class="avatar" src="[[item.image]]"> 
         <div class="pad"> 
          <div class="primary">[[item.email]]</div> 
          <div class="secondary">[[item.phone]]</div> 
          <div class="secondary dim">[[item.token]]</div> 
         </div> 
         <iron-icon icon$="[[iconForItem(item)]]"></iron-icon> 
        </div> 
       </div> 
      </template> 
     </iron-list> 
    </paper-scroll-header-panel> 
    </template> 
    <script> 
     // register a new element called proto-element 
     Polymer({ 
      is: "proto-element", 
      iconForItem: function (item) { 
       return item ? (item.integer < 50 ? 'star-border' : 'star') : ''; 
      } 
     }); 
    </script> 
</dom-module>

然後在我的HTML文件我進口所需的聚合物元素/文件和使用這樣的元素：

<?php 
use Cake\Routing\Router; 
?> 
<!DOCTYPE html> 
<html> 
<head> 

    <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?> 

    <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-flex-layout/iron-flex-layout.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-toolbar/paper-toolbar.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/paper-icon-button/paper-icon-button.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-ajax/iron-ajax.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-icons/iron-icons.html"> 
    <link rel="import" href="<?= Router::url('/'); ?>bower_components/iron-list/iron-list.html"> 

    <?= $this->element('Polymer/proto-element');?> 


</head> 

<body unresolved> 
    <proto-element></proto-element> 
</body> 

</html>

當我觀察的結果在我的筆記本電腦結果是完全一樣的。但是，當我從手機打開該頁面時出現問題。第一個選項很好地呈現爲預期：

但第二個選項（當我擠包的自定義元素中的列表）顯示列表縮小，一切微小的，不可用：

我做錯了什麼？我如何在我的自定義聚合物元素中使用這個iron-list示例？

謝謝

來源

2015-10-19 Alejandro

我試着將自定義CSS代碼移動到html文件，但沒有按預期工作...... – Alejandro

我發現了這個問題。那麼簡單...

您需要添加元標記！

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-capable" content="yes">

來源

2015-10-19 18:16:27 Alejandro

聚合物1.0移動網絡應用程序不是在尋找合適的

回答

相關問題