Polymer：< core-submenu>的样式问题 [英] Polymer: Trouble styling the <core-submenu>

问题描述

我使用< paper-item> < core-drawer-panel> 元素内创建了一个简单菜单c $ c>与以下内容：

I've created a simple menu inside a <core-drawer-panel> element using <paper-item> with the following:

<paper-item noink>
    <div class="core-menu-item">
        <core-icon icon="maps:beenhere"></core-icon>
        My Places 
    </div>
</paper-item>

正如您所看到的，我用< div> 来调整图标和文字样式+定位。
实现此效果：

As you can see, I've wrapped the insides with a <div> to adjust the icon and text style + positioning. Achieving this effect:

所以我的问题是，我怎样才能以类似的方式设计< core-submenu> 来达到相同的效果结果？

So my question is, how can I style a <core-submenu> in a similar way to achieve the same results?

我试着按照文档，但在DOM中，样式似乎非常有限;我似乎只能在整个项目中添加填充，而不是特定的图标（我想添加更多填充）。

I've tried following the documentation but styling seems to be very limited in the light DOM; I can only seem to add padding around the whole item, not specifically the icon (for which I'd like to add more padding).

有什么建议吗？
谢谢。

Any suggestions? Thank you.

推荐答案

核心子菜单页面描述了解决方案的一部分。每个核心子菜单在其影子DOM中包含一个核心项目，用于显示子菜单的标题和图标。您可以使用以下样式设置它：

The core-submenu page describes part of the solution. Each core-submenu includes a core-item in its shadow DOM, which is used to display the title and icon for the submenu. You can style this using:

core-submenu::shadow #submenuItem {
  color: red;
}

该项目本身包含一个核心图标 code>在它的影子根目录中，并带有图标ID，因此您可以使用以下命令访问该文件：



The item itself contains a core-icon in its shadow root, with an ID of icon, so you can access that using:

core-submenu::shadow #submenuItem::shadow #icon {
  color: blue;
}

这篇关于Polymer：< core-submenu>的样式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！