polymer 1.0 如何集中对齐 paper-card 标题？

Question

我正在尝试这样做以集中证明纸质卡片标题的合理性：

paper-card [heading]{
      @apply(--center-justified);
    }

但这似乎没有帮助。好心推荐

Answer 1

heading 不是 attribute 所以你不能那样写。

您基本上需要在阴影 dom 内设置 .title-text 元素的样式，所以改用它 -

paper-card::shadow #shadow .header .title-text {
    display: flex;
    justify-content: center;
}

或使用聚合物 iron-flex-layout -

paper-card::shadow #shadow .header .title-text {
    @apply(--layout-vertical);
    @apply(--layout-center);
}

---

更新

感谢@sfeast 指出。由于 shadow 选择器将被弃用，因此需要像这样将上述样式应用于 mixins -

paper-card {
    --paper-card-header: {
        @apply(--layout-vertical);
        @apply(--layout-center);
    };
}

Answer 2

自从影子选择器 is/has 已经被弃用以来，公认的答案将被打破。

--paper-card-header mixin 可用于您想要执行的操作。请参阅此处使用混合的示例 - https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins