Dart / Polygon – Using Paper tabs in a core-toolbar

Issue

I’m trying to use the paper tabs inside of a core toolbar. The code for the tabs work outside of the toolbar but I want it in it at the top of the app. Is it possible to do this?

This only shows a tool bar, doesn’t show the tabs

<core-toolbar>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
</core-toolbar> 

But if I put

<core-toolbar>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
</core-toolbar>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>

then it shows tabs UNDER the toolbar and still doesn’t show the tabs IN the toolbar.

Here is a screenshot: https://drive.google.com/file/d/0B7Hf9K5d9C3TNEltTmg5RWVFY2M/edit?usp=sharing

Any help would be amazing! Thank you!

Solution

You have to set a specific width to make the tabs show up.

Add CSS like

* /deep/ paper-tabs, 
* paper-tabs /* for browsers without native shadowDOM support */
{
  width: 200px;
}

to your page and the tabs will show up.

Answered By – Günter Zöchbauer

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.