greenyouse / bottom-nav Goto Github PK

bottom-nav tests should get copied over from app-header. They will need to be tweaked similar to how tests from paper-tabs were adjusted.

The bottom-nav should have a small shadow on the top border. Similar to how app-header has a shadow on its bottom border.

If the show-label attribute is set, the font-size and padding-top should change. Material Design spec

Expected Outcome

When a tab is selected, it should change color, the font-size of the label should increase, and padding-top should change slightly. The label's size change and padding-top will push the icon up.

Actual Outcome

There is no change for the font-size of the label. There is also a transition which increases the spacing between the label and the icon that should not be there.

Hi,

I am planning to move to Polymer 3 soon. Is it bottom-navcompatible or will it be soon?

Thanks!
Tim

Many thanks for this element!

Any plans to port it to hybrid or Polymer 2?

Thanks!

I looked into how to convert this project to be compatible with Polymer 3 and it seems pretty easy for someone with intimate knowledge of how it works (ie: you, @greenyouse)
You just gotta use a polymer tool called Modulizer. I'm fairly new to Polymer, so I have no idea how v2 works, only v3. Obviously this doesn't make me the best candidate for updating this project. I would greatly appreciate this project being made compatible with v3!

Best, Noah

When bottom-nav is visible, it happens it places on-top of other elements and you need to scroll down to make the nav disappear. But when there is not enough content to scroll, there's little you can do.

The bottom-nav should set its current height as bottom-padding of its parent (or scrollable element) and reduce that while disappearing, similarly how app-header does.

According to the design spec, when the bottom-toolbar is fixed, the width of each tab should be the same across each tab.

Width of action = Width of entire view / Number of actions

Expected Outcome

When bottom-nav is fixed, the width of each bottom-tab is constant after selecting a tab.

Actual Outcome

After selecting a tab, the width of the selected tab slightly larger.

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 ?

Some of the examples in the Material Design spec show that the bottom-toolbar's style can change after selecting a new tab. This could be added by attaching a selected CSS class attribute to bottom-tab elements and bubbling it up to bottom-toolbar via an event.

Expected outcome

Background style of bottom-toolbar can change when a new tab is selected.

Actual outcome

Background style never changes after selection.