SKMTH SKMTH - 29 days ago 14
CSS Question

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-content
to apply a
flex-direction: column``But now
::shadow
is 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?

Answer

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. It is important that the mixin is created on the :root tag.

<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;
             };
           }
        </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>                                       
    </body>
</html>

Comments