Question

我关注paper-tab的内容。有没有办法设计它们以便在每个标签中获得两行内容？回到过去，我会创建两个div, then used :: shadow .tab-content to apply a flex-direction：column``But now ::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的文档，我们可以看到paper-tabs有一个名为--paper-tabs的css mixin。事实上，大多数聚合物元素都有一个以custom元素命名的mixin，这是推荐的方法。查看source，我们可以看到mixin应用于css :host标记。如果要将范围内的mixin应用于所有元素，请使用:root标记。否则，将:root替换为任何类标记，例如my-class并将其应用于元素。

＆＃13;

<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>

＆＃13;

样式纸标签内容

1 个答案: