容器调整大小时，mat-ink-bar 位置不会更新 [英] mat-ink-bar location not update when container resizes

问题描述

我使用角材料 mat-tab-nav-bar

我在屏幕右侧有侧边菜单，点击它改变侧边菜单的宽度，中心屏幕宽度根据菜单宽度变化.

问题是 mat-ink-bar 的左右位置没有改变.

有什么想法吗?

解决方案

您可以通过在 mat-tab-group 上调用 realignInkBar() 来强制墨条重新对齐，请查看 StackBlitz

要进一步了解错误，请查看此线程

示例:(TabsComponent)

import { Component, OnInit, ViewChild } from '@angular/core';@成分({选择器:'应用程序标签'，templateUrl: './tabs.component.html',styleUrls: ['./tabs.component.css']})导出类 TabsComponent 实现 OnInit {@ViewChild('tabs', {static: false}) 标签；selectedIndex:数字；isHidden: boolean = true;构造函数(){}ngOnInit() {}切换扩展卡(){this.tabs.realignInkBar();//删除此行以中断"示例this.isHidden = !this.isHidden;}}

示例:(tabs.component.html)

<button type="button"(click)="toggleExpandCard()">点击这里 {{isHidden ?'show' : '隐藏'}} 个标签！
<div class="wrapper"><div class="tabs-wrapper";[隐藏]=isHidden"><mat-tab-group [(selectedIndex)]=selectedIndex"#标签><mat-tab label="地球"><p>...是圆的</p></mat-tab><mat-tab label="Wind"><p>...可能会很痛苦</p></mat-tab><mat-tab label="Fire"><p>...需要注意</p></mat-tab></mat-tab-group>

I using angular-material mat-tab-nav-bar

I have side menu on the right side of the screen, click on it change the width of the side menu, and the center screen width change according to the menu width.

the problem is that the mat-ink-bar right/left position not changed.

Any idea?

解决方案

You can force the ink bar to re-align by calling realignInkBar() on mat-tab-group,check out this example on StackBlitz

To read further on the bug check out this thread

Example: (TabsComponent)

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {

  @ViewChild('tabs', {static: false}) tabs;
  selectedIndex: number;

  isHidden: boolean = true;

  constructor() { }

  ngOnInit() {
  }

  toggleExpandCard() {
    this.tabs.realignInkBar(); // Remove this line to 'break' the example
    this.isHidden = !this.isHidden;
  }

}

Example: (tabs.component.html)

<div class="header">
  <button type="button"(click)="toggleExpandCard()">
    Click here to {{isHidden ? 'show' : 'hide'}} tabs!
  </button>
</div>
<div class="wrapper">
  <div class="tabs-wrapper" [hidden]="isHidden">
  <mat-tab-group [(selectedIndex)]="selectedIndex" #tabs>
    <mat-tab label="Earth">
      <p>...is round</p>
    </mat-tab>
    <mat-tab label="Wind">
      <p>...can be painful</p>
    </mat-tab>
    <mat-tab label="Fire">
      <p>...requires attention</p>
    </mat-tab>
  </mat-tab-group>
  </div>
</div>

这篇关于容器调整大小时，mat-ink-bar 位置不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！