Angular 4 Material選項卡 - css不適用於標題模板

我想隱藏Angular Material選項卡的標題（按鈕），因爲我使用自定義導航按鈕在選項卡之間切換。 https://material.angular.io/components/tabs/overview Angular 4 Material選項卡 - css不適用於標題模板

但是，使用css無法隱藏標題。我不知道爲什麼。 md-tab-group是一個角度指令，它被選項卡模板替換。儘管它通常喊這種方式工作...

HTML：

 <div class="tabs"> 
     <md-tab-group> 
      <md-tab label="Tab 1">Content 1</md-tab> 
      <md-tab label="Tab 2">Content 2</md-tab> 
     </md-tab-group> 
    </div>

CSS：

 .tabs md-tab-header, .tabs .mat-tab-header { 
     display: none; 
    }

來源

2017-08-05 btx

爲什麼有一個'代替'逗號？ – Aravind

這樣你可以爲不同的css類聲明一個樣式。但是這不是問題所在，我也是單獨嘗試的。 – btx

在「LESS文件」中，您可以使用它們。你能創造一個重生的重生嗎？如果它可以幫助你，請參考[** answer **]（https://stackoverflow.com/questions/42351202/angular-material-2-md-list-odd-even-style/42597460#42597460） – Aravind

你可以試試下面的CSS：

::ng-deep .tabs .mat-tab-list .mat-tab-labels { 
     display: none; 
}

html：

<md-tab-group class="tabs"> 
    <md-tab label="Tab 1">Content 1</md-tab> 
    <md-tab label="Tab 2">Content 2</md-tab> 
</md-tab-group>

Plunker

來源

2017-08-06 00:31:11 Nehal

thx，working爲了我！你能解釋一下css的參考嗎？ – btx

':: ng-deep'是由角度提供的陰影刺穿組合器，可用於覆蓋預先構建的樣式表的CSS類。你可以閱讀這裏[https://hackernoon.com/the-new-angular-ng-deep-and-the-shadow-piercing-combinators-deep-and-drop-4b088dbe459]。而對於CSS的其餘部分，我從Developer Tools中發現'mat-tab-labels'類需要被覆蓋以隱藏標題按鈕而不是'mat-tab-header'。額外的'.tabs'類是在那裏，所以這種風格只適用於你使用'tabs'類的'md-tab-group'，而不是全部覆蓋所有'md-tab-group'。 – Nehal

這對我來說沒有:: ng-deep對於角度5.謝謝！ – Daryl

Angular4: 

template: 
<mat-tab-group class="tabs"> 
    <mat-tab> 
     <ng-template mat-tab-label>Tasks<ng-template> 
     <app-ongoingtasks></app-ongoingtasks> 
    </mat-tab> 
</mat-tab-group> 

css: 
::ng-deep .tabs .mat-tab-list .mat-tab-labels { 
    margin: auto; 
    width: 60%; 
} 

Perfect!

來源

2018-02-01 17:58:20

Angular 4 Material選項卡 - css不適用於標題模板

回答

相關問題