CODEWITHSUNDEEP
csspolymershadow-dom
SKMTH
SKMTH

Reputation: 622

Styling paper-tab content

I have concerning the content of paper-tab. Is there a way to style them in order to get two lines of content in each tabs? Back in time, I would have created two div, then used::shadow .tab-contentto apply aflex-direction: column``But now ::shadowis deprecated... I've tried to replace it with the full selector as suggested on the chromestatus platform:

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

but it doesn't work either.

I've tried using the mixin, with style is="custom-style"

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

doesn't work either

Any ideas?

Upvotes: 2

Views: 2158

Answers (1)

costrouc
costrouc

Reputation: 3175

Polymer allows element customization through css mixins

Refering to the documentation for 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 we can see that the mixin is applied on the css :host tag.If you want to apply mixin within scope to all elements use :root tag. Otherwise replace :root with any class tag e.g. my-class and apply it to the element.

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

Upvotes: 6

Related Questions