угловой материал mat-tab-nav-bar сделать логотип слева с центрированием вкладок - PullRequest
Новая
       11

угловой материал mat-tab-nav-bar сделать логотип слева с центрированием вкладок

0 голосов
/ 02 мая 2018

У меня есть панель навигации, но я хочу вкладки в центре с логотипом слева 

<nav mat-tab-nav-bar>
  <a mat-tab-link
     [routerLink]="'/'">
    <img src="/assets/logo.jpg">
  </a>
  <a mat-tab-link
     [routerLink]="'/find-property'"
     routerLinkActive #rla1="routerLinkActive"
     [active]="rla1.isActive">
    Find Property
  </a>
  <a mat-tab-link
     [routerLink]="'/manage-property'"
     routerLinkActive #rla2="routerLinkActive"
     [active]="rla2.isActive">
    List a Property
  </a>
</nav>

1 Ответ

0 голосов
/ 02 мая 2018

enter image description here

Добавьте автоматические поля и убедитесь, что положение абсолютное, если вы хотите, чтобы вкладки находились точно посередине. 

nav {
  .logo {
    img {
      height: 1.5em;
    }
    @media only screen and (min-width: 800px) {
      position: absolute;
    }
  }
  /deep/ .mat-tab-links {
    display: flex;
    justify-content: flex-start;
  }
}

и HTML с автоматическими полями: 

<nav mat-tab-nav-bar>
  <a mat-tab-link
     class="logo"
     [routerLink]="'/'">
    <img src="/assets/logo.jpg">
  </a>
  <a mat-tab-link
     style="margin-left: auto"
     [routerLink]="'/find-property'"
     routerLinkActive #rla1="routerLinkActive"
     [active]="rla1.isActive">
    Find Property
  </a>
  <a mat-tab-link
     style="margin-right: auto"
     [routerLink]="'/manage-property'"
     routerLinkActive #rla2="routerLinkActive"
     [active]="rla2.isActive">
    List a Property
  </a>
</nav>
...