Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

headerPosition="below" does not effect nav mat-tab-nav-bar #14191

Open
jebbench opened this issue Nov 18, 2018 · 1 comment
Open

headerPosition="below" does not effect nav mat-tab-nav-bar #14191

jebbench opened this issue Nov 18, 2018 · 1 comment
Labels
area: material/tabs P4 A relatively minor issue that is not relevant to core functions

Comments

@jebbench
Copy link

Bug, feature request, or proposal:

Bug/Feature - Adding headerPosition="below" does not effect nav mat-tab-nav-bar; I would like it to cause the divider to appear above the labels.

What is the expected behavior?

The divider line should appear above the tab labels as it does for mat-tab-group.

What is the current behavior?

headerPosition="below" has no effect on nav mat-tab-nav-bar.

What are the steps to reproduce?

Add headerPosition="below" to a working mat-tab-nav-bar.

https://stackblitz.com/edit/angular-8lxwwf?file=app/tab-nav-bar-basic-example.html

What is the use-case or motivation for changing an existing behavior?

I'm trying to use the mat-tab-nav-bar as a bottom nav within my app and as such I'd like the tabs to appear below the divider line.

<router-outlet></router-outlet>
<div class="spacer"></div>
<nav mat-tab-nav-bar mat-stretch-tabs headerPosition="below" >
  <a mat-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link.path"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{link.label}}
  </a>
</nav>
nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.spacer {
  padding-bottom: 50px;
}

The headerPosition attribute may not be the way to achieve this as it refers to placing the tab headers below the content; which is being done "manually" in this case; it would be useful to have a way to move the divider above the labels though.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

N/A

Is there anything else we should know?

N/A

@jebbench
Copy link
Author

Adding class="mat-tab-group-inverted-header" to my nav mat-tab-nav-bar works as a workaround.

@crisbeto crisbeto self-assigned this Nov 18, 2018
@crisbeto crisbeto added has pr P4 A relatively minor issue that is not relevant to core functions labels Nov 18, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 18, 2018
Adds the `position` input to the `mat-tab-nav-bar` that allows for it to be inverted, if it's position below its content.

Fixes angular#14191.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 19, 2019
Adds the `position` input to the `mat-tab-nav-bar` that allows for it to be inverted, if it's position below its content.

Fixes angular#14191.
crisbeto added a commit to crisbeto/material2 that referenced this issue May 30, 2019
Adds the `position` input to the `mat-tab-nav-bar` that allows for it to be inverted, if it's position below its content.

Fixes angular#14191.
@mmalerba mmalerba removed the has pr label Dec 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/tabs P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants