web-dev-qa-db-ja.com

角材で選択したタブの下線の色を変更する方法は？

md-tabsを here からmd-toolbarに入れるチュートリアルに従っています。しかし、私の選択したインジケータタブはmd-primaryと同じ色であり、非表示にします。下の画像をご覧ください。

enter image description here

しかし、md-tabsの色をmd-accentに変更すると、インジケーターが表示されます。

enter image description here

選択したインジケータタブの色を変更するにはどうすればよいですか？

コードは次のとおりです。

<md-toolbar class="md-whiteframe-5dp">
    <div class="md-toolbar-tools">
        <h2>Title</h2>
    </div>

    <md-tabs md-selected="tabs.selectedIndex">
        <md-tab id="tab1" aria-controls="tab1-content">Tab #1</md-tab>
        <md-tab id="tab2" aria-controls="tab2-content">Tab #2</md-tab>
        <md-tab id="tab3" aria-controls="tab3-content">Tab #3</md-tab>
    </md-tabs>
</md-toolbar>

<md-content layout-padding flex>
    <ng-switch on="tabs.selectedIndex" class="tabpanel-container">
        <div role="tabpanel" id="tab1-content" aria-labelledby="tab1" ng-switch-when="0" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
            View for Item #1<br />
            data.selectedIndex = 0
        </div>

    <div role="tabpanel" id="tab2-content" aria-labelledby="tab2" ng-switch-when="1" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
        View for Item #2<br />
        data.selectedIndex = 1
    </div>

    <div role="tabpanel" id="tab3-content" aria-labelledby="tab3" ng-switch-when="2" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
        View for Item #3<br />
        data.selectedIndex = 2
    </div>
    </ng-switch>
</md-content>

ところで、すべての色はデフォルトです。

javascriptangularjsangularjs-material
18
Disp Hay

最も簡単な方法は、CSSを使用して変更することです。

md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
    color: red !important;
    background-color:red !important;
}

ただし、ドキュメントでテーマに関する§を確認することもできます： https://material.angularjs.org/latest/Theming/01_introduction

CSSが埋め込まれ、スタイルタグにその場で生成される場合があります。このコードが機能しない場合は、!important。

30
Arnaud Gueras
md-tabs md-ink-bar {
    color: green;
    background-color: green;
}
7
Dhruvdutt Jadhav

カスタムテーマを定義し、md-ink-barに必要なアクセントカラーを設定する必要があります。この例では白です：

var customAccent = {
    '50': '#b3b3b3',
    '100': '#bfbfbf',
    '200': '#cccccc',
    '300': '#d9d9d9',
    '400': '#e6e6e6',
    '500': '#f2f2f2',
    '600': '#ffffff',
    '700': '#ffffff',
    '800': '#ffffff',
    '900': '#ffffff',
    'A100': '#ffffff',
    'A200': '#fff',
    'A400': '#f2f2f2',
    'A700': '#ffffff'
};
$mdThemingProvider
.definePalette('whiteAccent', customAccent);

$mdThemingProvider.theme('whiteAccentTheme')
    .primaryPalette('deep-purple')
    .accentPalette('whiteAccent');

このサイトでアクセントパレットを生成できます。 https://angular-md-color.com/#/

ビューで、mdタブに新しいカスタムテーマを使用します。

<div md-theme="whiteAccentTheme">
  <md-tabs class="md-primary">...</md-tabs>
</div>
2
Martin Cremer

私もこの問題に苦労しました。 CSSを上書きするソリューションが嫌いです。したがって、はるかに便利で簡単なソリューションがあります。

パレットのデフォルトのHUEを設定するだけです：

$mdThemingProvider.theme('default')
            .primaryPalette('amber', { 'default': '600'})
            .accentPalette('Indigo', { 'default': '400'});

タブインクバーであるFABスピーディアルは、パレットのこの色を使用します。

1
Alexander Bering

うまくいかなかった応答を読むことに多くの時間を費やした後、これは私が見つけた解決策です。 CSSが初めてであり、CSSを軽spiする人として、私もCSSを初めて使用し、CSSを軽spする人のために自分のソリューションを投稿しようと思いました。

HTML

<md-tab-group>
    <md-tab>
        <ng-template md-tab-label>
            <span class="mdTab">Tab Label</span>
        </ng-template>
    </md-tab>
</md-tab-group>

CSS

.mdTab{
  color: white;
}
0
mikejones1477