javascript - Polymer 1.0 移动网络应用程序看起来不正确

标签 javascript css mobile polymer

你好，我有这个使用 cakephp 的 iron-list 演示中的工作示例:

<?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>

这与 iron-list 演示中的示例相同，我只是更改了一些基本内容以使其适用于我的 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 文件中，我导入了所需的 polymer 元素/文件并使用如下元素:

<?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>

当我在笔记本电脑上查看结果时，结果完全相同。但是当我从手机打开页面时，问题就来了。第一个选项按预期呈现得很好:

Capture from phone

但第二个选项(当我将列表包装在自定义元素中时)显示列表缩小，所有内容都很小且不可用:

Capture from phone not usable

我做错了什么吗？我如何在我的自定义 Polymer 元素中使用这个 iron-list 示例？

谢谢

最佳答案

我发现了问题。如此简单...

您需要添加元标记!

<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">

关于javascript - Polymer 1.0 移动网络应用程序看起来不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33206451/

上一篇：css - 隐藏自动宽度和溢出的中间跨度元素

下一篇：javascript - 如何在 Bootstrap 中使 Instagram.js 提要响应？

相关文章：

html - 有没有办法在 <select> 表单中的 <option> 标签之间使用 CSS 设置间距或边距？

javascript - Cordova平台ios错误

javascript - ajax 中的实际请求类型 'HEAD' 是什么？

java - 将动态网络元素值传递给 Javascript 方法以在 HTML5 中执行拖放操作

css - 使用 bgstretcher 降低轮播高度

html - Flexbox 粘性页脚 - 'Flex: 1' 无法填充高度

css - 移动 Css 和桌面 Css 设置

html - 手机浏览器支持24位PNG透明度吗？

javascript - 如何在 Deno 中写入文件？

javascript - 你能在javascript中指定一个引用表达式吗？

©2024 IT工具网  联系我们