我想将标签栏放在显示标签的位置,这样我就可以在左侧添加一个连接到标签的侧栏。这是我的代码:
<div class="flex-container">
<div class="flex-item1">
<md-tab-group>
<md-tab label="PERSONAL">Personal content</md-tab>
<md-tab label="SOCIAL">Social content</md-tab>
<md-tab label="BUSINESS">Business content
<b-app></b-app>
</md-tab>
</md-tab-group>
</div>
<div class="flex-item2">
<div class="item item-5" fxLayout="column">
<md-input-container class="search-area">
<input mdInput placeholder="search" >
<!--md-icon svgIcon="thumbs-up"></md-icon-->
</md-input-container>
</div>
</div>
答案 0 :(得分:11)
使用ViewEncapsulation(推荐)方法1
:: ng-deep在这种情况下效果很好,但它可能会在未来贬值。推荐的方法是使用ViewEncapsulation。
在您的组件中,添加以下封装:
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
在component.css中添加以下内容:
.mat-tab-labels{
justify-content: center; /* align items in Main Axis */
}
使用ViewEncapsulation.None
使用:: ng-deep
进行方法2
在component.css中添加以下内容:
::ng-deep .mat-tab-labels{
justify-content: center; /* align items in Main Axis */
}
以下是指向PLUNKER DEMO的链接。