位于另一个元素

时间：2016-12-14 17:29:41

标签： html polymer web-component

嗨我的纸质图标按钮有问题。当元素位于另一个元素内时，图标不会显示。以下是重要的代码段：

    <paper-dialog>
        <iron-pages>
            <login-view name="login"></login-view>
            <passreset-view name="passreset"></passreset-view>
        </iron-pages>
        <iron-icon icon="close"></iron-icon> // Shows okay
        <paper-icon-button dialog-dismiss icon="close" id="closeBtn"></paper-icon-button> // doesn't show
    </paper-dialog>

我确保所有导入都没问题，我在其他地方成功使用了该元素。如果我将元素从纸张对话框中取出，那么它就会显示出来。

我认为纸质对话框的轻型DOM存在一些问题，所以我试图将铁图标放在里面，如上图所示，铁图标正确显示。

我的想法不会得到任何建议。

编辑：完整代码

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

<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="/bower_components/neon-animation/animations/fade-out-animation.html">


<dom-module id="main-dialog">
    <template>
        <style>
            @media only screen and (min-width: 767px) {
                #dialogID {
                    max-width: 500px;
                    padding: 30px 50px 0 50px;
                }
            }

            @media only screen and (max-width: 767px) {
                #dialogID {
                    position: fixed;
                    margin: 0;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;

                    width: 100%;
                }
            }

            #closeBtn {
                position: absolute;
                right: 5px;
                top: 5px;
            }
        </style>

        <paper-dialog id="dialogID" with-backdrop entry-animation="scale-up-animation"
                      exit-animation="fade-out-animation">
            <iron-pages id="main_pages" selected="{{viewName}}" attr-for-selected="name">
                <login-view name="login"></login-view>
                <registration-view name="registration"></registration-view>
                <emaildialog-view name="emaildialog"></emaildialog-view>
                <actionerror-view name="actionerror"></actionerror-view>
                <actionconfirm-view name="actionconfirm"></actionconfirm-view>
                <passreset-view name="passreset"></passreset-view>
                <emailinput-view name="emailinput"></emailinput-view>
            </iron-pages>
            <iron-icon icon="close"></iron-icon>
            <paper-icon-button dialog-dismiss icon="close" id="closeBtn"></paper-icon-button>
        </paper-dialog>
    </template>

    <script>
        Polymer({
            is: 'main-dialog',

            properties: {
                viewName: {
                    type: String,
                    value: "login",
                }
            },

            listeners: {
                'dialog-confirm': '_dialogConfirm',
            },

            _showDialog: function (event) {
                this.viewName = event.detail.viewName;
                this.importHref("/views/dialog_views/" + event.detail.path + event.detail.viewName + "-view.html", function () {
                    if (event.detail.open) {
                        this.$.dialogID.toggle();
                    }
                }.bind(this), null, true);
            },

            _dialogConfirm: function (event) {
                this.$.dialogID.close();
                event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
            }

        });
    </script>
</dom-module>

3 个答案:

答案 0 :(得分：0)

添加 iron-icons.html 组件以加载图标字体。

	PD.open()
<base href="http://polygit.org/components/">
<link rel=import href="iron-icons/iron-icons.html">
<link rel=import href="iron-icon/iron-icon.html">
<link rel=import href="paper-dialog/paper-dialog.html">
<link rel=import href="paper-icon-button/paper-icon-button.html">

<paper-dialog id=PD>
  <iron-icon icon="close"></iron-icon>
  <paper-icon-button dialog-dismiss icon="close" id="closeBtn"></paper-icon-button>
</paper-dialog>

完整示例也有效：

var dialog = document.querySelector('#dialogID')
dialog.open()
<base href="http://polygit.org/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-pages/iron-pages.html">
<link rel="import" href="neon-animation/animations/scale-up-animation.html">
<link rel="import" href="neon-animation/animations/fade-out-animation.html">
<link rel=import href="iron-icons/iron-icons.html">
<link rel=import href="iron-icon/iron-icon.html">
<link rel=import href="paper-dialog/paper-dialog.html">
<link rel=import href="paper-icon-button/paper-icon-button.html">

<dom-module id="main-dialog">
  <template>
    <style>
      @media only screen and (min-width: 767px) {
        #dialogID {
          max-width: 500px;
          padding: 30px 50px 0 50px;
        }
      }
      @media only screen and (max-width: 767px) {
        #dialogID {
          position: fixed;
          margin: 0;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
        }
      }
      #closeBtn {
        position: absolute;
        right: 5px;
        top: 5px;
      }
    </style>

    <paper-dialog id="dialogID" with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation">
      <iron-pages id="main_pages" selected="{{viewName}}" attr-for-selected="name">
        <login-view name="login"></login-view>
        <registration-view name="registration"></registration-view>
        <emaildialog-view name="emaildialog"></emaildialog-view>
        <actionerror-view name="actionerror"></actionerror-view>
        <actionconfirm-view name="actionconfirm"></actionconfirm-view>
        <passreset-view name="passreset"></passreset-view>
        <emailinput-view name="emailinput"></emailinput-view>
      </iron-pages>
      <iron-icon icon="close"></iron-icon>
      <paper-icon-button dialog-dismiss icon="close" id="closeBtn"></paper-icon-button>
    </paper-dialog>
  </template>

  <script>
    Polymer({
      is: 'main-dialog',

      properties: {
        viewName: {
          type: String,
          value: "login",
        }
      },

      listeners: {
        'dialog-confirm': '_dialogConfirm',
      },

      _showDialog: function(event) {
        this.viewName = event.detail.viewName;
        this.importHref("/views/dialog_views/" + event.detail.path + event.detail.viewName + "-view.html", function() {
          if (event.detail.open) {
            this.$.dialogID.toggle();
          }
        }.bind(this), null, true);
      },
      _dialogConfirm: function(event) {
        this.$.dialogID.close();
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
      }
    });
  </script>
</dom-module>
<main-dialog></main-dialog>

答案 1 :(得分：0)

我通过直接在我的元素中使用Polymer.PaperDialogBehavior，Polymer.NeonAnimationRunnerBehavior行为删除了纸张对话框来解决了这个问题。

以下是代码：

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

<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="/bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">

<link rel="import" href="/bower_components/neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="/bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="/bower_components/paper-dialog-behavior/paper-dialog-shared-styles.html">


<dom-module id="custom-dialog">
    <template>
        <style>
            :host {
                display: block;
                background: white;
            }

            #closeBtn {
                position: absolute;
                right: 5px;
                top: 5px;
            }

            @media only screen and (min-width: 767px) {
                :host {
                    max-width: 500px;
                    padding: 30px 50px 30px 50px;
                }
            }

            @media only screen and (max-width: 767px) {
                :host {
                    position: fixed;
                    margin: 0;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;

                    padding-left: 5%;
                    padding-right: 5%;
                    padding-top: 2%;

                    width: 100%;
                }
            }
        </style>

        <paper-icon-button dialog-dismiss icon="close" id="closeBtn"></paper-icon-button>

        <iron-pages id="main-pages" selected="{{viewName}}" attr-for-selected="name">
            <login-view name="login"></login-view>
            <registration-view name="registration"></registration-view>
            <emaildialog-view name="emaildialog"></emaildialog-view>
            <actionerror-view name="actionerror"></actionerror-view>
            <actionconfirm-view name="actionconfirm"></actionconfirm-view>
            <passreset-view name="passreset"></passreset-view>
            <emailinput-view name="emailinput"></emailinput-view>
        </iron-pages>
    </template>

    <script>
        Polymer({
            is: 'custom-dialog',

            behaviors: [
                Polymer.PaperDialogBehavior,
                Polymer.NeonAnimationRunnerBehavior
            ],

            properties: {
                viewName: {
                    type: String,
                    value: "login"
                }
            },

            listeners: {
                'dialog-confirm': '_dialogConfirm',
                'neon-animation-finish': '_onNeonAnimationFinish'
            },

            _renderOpened: function () {
                this.cancelAnimation();
                this.playAnimation('entry');
            },

            _renderClosed: function () {
                this.cancelAnimation();
                this.playAnimation('exit');
            },

            _onNeonAnimationFinish: function () {
                if (this.opened) {
                    this._finishRenderOpened();
                } else {
                    this._finishRenderClosed();
                }
            },

            // Custom

            _showDialog: function (event) {
                this.viewName = event.detail.viewName;
                this.importHref("/views/dialog_views/" + event.detail.path + event.detail.viewName + "-view.html", function () {
                    if (event.detail.open) {
                        this.toggle();
                    } else {
                        this.notifyResize();
                    }
                }.bind(this), null, true);
            },

            _dialogConfirm: function (event) {
                this.close();
                event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
            }

        });
    </script>
</dom-module>

答案 2 :(得分：0)

我发现只有将它包装在某个容器元素中才会出现该图标：

<paper-dialog>
  <div>
    <paper-icon-button dialog-dismiss icon="close" id="closeBtn"></paper-icon-button>
  </div>
</paper-dialog>

实例：

https://jsbin.com/hehovisoso/edit?html,console,output

相关问题
最新问题