search

greenyouse / bottom-nav

Material Design bottom-nav https://material.io/guidelines/components/bottom-navigation.html
MIT License
25 stars 6 forks source link

integration with paper-badge #6

Closed aeon3k closed 7 years ago

aeon3k commented 7 years ago

Hi,

thanks for your component. I tried to integrate it with paper-badge, and doesnt work.

<bottom-tab  selected-class="brown" id="Lbooks" label="Books">
        <paper-badge for="Lbooks" label="4"></paper-badge>
</bottom-tab>

The badge shows almost outside the tab

So I tried the following: 

<bottom-tab  selected-class="brown" label="Books">
        <paper-icon-button noink id="Lbooks" icon="icons:book" alt="inbox"></paper-icon-button>
        <paper-badge for="Lbooks" label="4"></paper-badge>
 </bottom-tab>

It works save the label, when clicked, is on top of the icon... Any idea how to fix it ?

greenyouse commented 7 years ago

I saw someone had a similar problem on Stack Overflow with paper-tab. This is most likely what you're seeing because my bottom-tab is derived from paper-tab .

As they mention on SO, you should be able to have the for attribute point to nothing and then adjust the positioning for paper-badge with some CSS.

I'm having some trouble getting JS Bin to work but here's the code I used locally.

    <style is="custom-style" include="demo-pages-shared-styles">
     bottom-nav {
       background-color: var(--primary-color);
       color: #fff;
     }

     paper-badge {
       --paper-badge-margin-left: 3em;
       --paper-badge-margin-bottom: 3.5em;
     }
    </style>
  </head>
  <body>
    <bottom-nav fixed>
      <bottom-toolbar selected="0">
        <bottom-tab show-label label="Movies & TV" icon="notification:ondemand-video"></bottom-tab>
        <bottom-tab show-label label="Music" icon="image:music-note"></bottom-tab>
        <bottom-tab show-label label="Books" icon="icons:book"></bottom-tab>

        <!-- uses the label + icon attributes on bottom-tab -->
        <bottom-tab show-label label="Stuff" icon="favorite">
          <paper-badge for="_" label="3"></paper-badge>
        </bottom-tab>

      </bottom-toolbar>
    </bottom-nav>

    <sample-content size="10"></sample-content>

  </body>

Does this work for what you're seeing?

aeon3k commented 7 years ago

it does work well with show-label, thanks. Without show-label, it's not as pretty. When you select the tab, the label pushes the icon upward but the badge stays at the same place.

greenyouse commented 7 years ago

OK, with CSS I thought bottom-tab.iron-selected paper-badge would be an easy way to style the badge based on whether the tab was selected. I'm not really sure why but that doesn't seem to work.

Since using a badge in the nav seems like a common use case, I could add a badge feature to bottom-tab. That could be a span with some text that looks similar to paper-badge . Does that sound like a good approach?

greenyouse commented 7 years ago

Does this work better for styling paper-badge?

     bottom-tab.iron-selected paper-badge {
       padding-bottom: 2.4em;
       margin-left: 2em;
     }

     bottom-tab:not(.iron-selected) paper-badge {
       padding-bottom: 1.8em;
       margin-left: 1.8em;
     }
aeon3k commented 7 years ago

Thank you. I ll try that on tuesday at work but it looks better than what I came up with ! ;)

greenyouse commented 7 years ago

Hey, I'm assuming the CSS snippet worked well enough. I'm going to close the issue but feel free to re-open it if you need more help.