样式纸标签内容

Question

我有关于paper-tab的内容。有没有办法设置它们的样式以便在每个选项卡中获得两行内容？回到过去，我会创建两个 div, then used::shadow .tab-contentto apply aflex-direction: column``但现在 ::shadow 已被弃用......我试过将其替换为 chromestatus 平台上建议的完整选择器：

paper-tabs.tabs paper-tab #shadow-root div.tab-content
{
flex-direction: column;
}

但是也没用。

我试过使用 mixin，style is="custom-style"

.tabs{
--paper-tab-content: {flex-direction: column;};
}

也不行

有什么想法吗？

Answer 1

Polymer 允许通过 css mixins

自定义元素

参考 paper-tabs we can see that paper-tabs has a css mixin called --paper-tabs. In fact most polymer elements have a mixin named after the custom-element and this is the recommended way. Looking at the source 的文档，我们可以看到 mixin 应用于 css :host tag.If 你想在范围内将 mixin 应用于所有元素使用 :root 标签。否则将 :root 替换为任何 class 标签，例如my-class 并将其应用于元素。

<html>
    <head>
        <base href="http://polygit.org/polymer+:master/components/">
        <script src="components/webcomponentsjs/webcomponents-lite.js"></script>
        <link href="polymer/polymer.html" rel="import">
        <link href="paper-tabs/paper-tabs.html" rel="import">
      
        <style is="custom-style">
          :root {
             /* Set custom property (variables) */
             --paper-tabs-selection-bar-color: red;
             /* Set mixin */
             --paper-tabs: {
                 height: 200px;
                 background: teal;
                 color: rebeccapurple;
             };
           }
          
          /* Apply mixin via class */
          .my-class {
             --paper-tabs-selection-bar: {
                 height: 20px;
             }
          }
        </style>
    </head>
    <body>
           <paper-tabs selected="0">
                <paper-tab>TAB 1</paper-tab>
                <paper-tab>TAB 2</paper-tab>
                <paper-tab>TAB 3</paper-tab>
           </paper-tabs>   
      
           <paper-tabs class="my-class" selected="0">
                <paper-tab>TAB 1</paper-tab>
                <paper-tab>TAB 2</paper-tab>
                <paper-tab>TAB 3</paper-tab>
           </paper-tabs>   
    </body>
</html>

样式纸标签内容

Styling paper-tab content

css

shadow-dom

polymer