升级到Polymer 0.5.1和样式纸对话框的问题 [英] Issue with upgrade to Polymer 0.5.1 and styling paper-dialog

问题描述

因此，我刚刚将项目从Polymer库的Polymer v0.4.2更新到了v0.5.1.似乎已发生变化的一件事是 paper-dialog 元素的实现方式.

So I just updated my project from Polymer v0.4.2 to v0.5.1 of the Polymer library. One thing that seemed to have changed is how the paper-dialog element is implemented.

在v0.4.2中，当我的自定义元素中包含一个 paper-dialog 时，我可以使用 core-style 元素在CSS中对其进行自定义

In v0.4.2, when I had a paper-dialog inside of my custom element, I could customize it with CSS inside of my element using core-style elements.

在v0.5.1中，如果我理解正确，那么 paper-dialog 不再在我的组件内部实现，而是在 core-overlay-layer 中实现元素，该元素位于我组件的外部的html页面中.

In v0.5.1, if I understand correctly, the paper-dialog is no longer implemented inside my component, but instead it's implemented in the core-overlay-layer element which is in the html page outside of my component.

那么这是否意味着我现在必须向包含我的组件的html页面添加CSS样式表?如果是这样，那么我将无法再使用 core-style 和 CoreStyle.g 对象的优点.这也意味着与我的组件有关的所有内容都不再全部封装在我的组件中.

So does that mean that I now have to add a CSS style sheet to the html page that contains my component? If so, then I can no longer use core-style along with the benefits of the CoreStyle.g object. It also means that everything related to my component is no long all encapsulated inside of my component.

请告诉我我错了，我有一种方法可以在组件内部直接设置纸张对话框的样式.

Please tell me that I am wrong and that there is a way for me to style the paper-dialog from within my component still.

谢谢！

推荐答案

在Polymer 0.5.1中，layered属性(文档:

In Polymer 0.5.1 the layered property (doc: https://www.polymer-project.org/docs/elements/core-elements.html#core-overlay) defaults to true which allows it to always display above page content. If layered is false, the dialog may not display on top if there is something after it in DOM with a higher stacking context.

但是，由于layered将对话框替代为全局core-overlay-layer，因此无法从外部作用域设置其样式.有两种样式选择:

However because layered reparents the dialog to a global core-overlay-layer it's not possible to style it from an outer scope. There are a couple options for styling:

1. 如果您知道没有比对话框高堆栈上下文的DOM，请将layered="false"设置为获取非分层行为，然后可以从外部范围设置样式.

1. If you know you don't have any DOM with a higher stacking context than the dialog, set layered="false" to get the non-layered behavior and you can style it from the outer scope.

使用/deep/规则以全局样式设置对话框的样式.您仍然可以通过引用全局范围中的样式来使用core-style.您还可以将其包含在与元素定义相同的文件中，例如

Style the dialog with a /deep/ rule in a global style. You can still use core-style by referencing the style in the global scope. You can also include it in the same file as your element definition, e.g.

<core-style id="x-dialog">
  html /deep/ #dialog {
    color: red;
  }
</core-style>
<core-style ref="x-dialog"></core-style>
<polymer-element name="my-element" noscript>
<template>
  <paper-dialog id="dialog"></paper-dialog>
</template>
</polymer-element>

1. 扩展paper-dialog并设置新元素的样式:

1. Extend paper-dialog and style the new element:

<polymer-element name="my-paper-dialog" extends="paper-dialog" noscript>
<template>
  <!-- or use core-style -->
  <style>
    :host {
      color: red;
    }
  </style>
</template>
</polymer-element>

实时示例: http://jsbin.com/subanakuna/1/edit?html ，输出

这篇关于升级到Polymer 0.5.1和样式纸对话框的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！