Не могу изменить цвет индикатора вкладки - PullRequest
Новая
       7

Не могу изменить цвет индикатора вкладки

0 голосов
/ 22 октября 2018

Я использую materializecss с Angular 6. Я не использую ng2-materilize, просто библиотеку materializecss.

Проблема заключается в том, что я пытаюсь изменить цвет фона индикатора вкладки, модифицируя CSS компонента.Я также использую! Важно, но это то же самое. 

<div class="row">
<div class="col s12 m12 l12 xl12">
  <ul class="tabs tabs-fixed-width" id="chartstabs">
    <li class="tab" *ngFor="let view of views">
      <a href="#tab{{view.id}}" (click)="loadTab(view)">{{view.name}}</a>
    </li>
  </ul>
</div>

И это мой css. 

.tabs {
    overflow-x: hidden !important;
}
.tabs .indicator {
    background-color: blue !important;
}

Спасибо.

Ответы [ 3 ]

0 голосов
/ 22 октября 2018

Используйте /deep/ для перезаписи существующих стилей 

/deep/ .tabs {
    overflow-x: hidden !important;
}
/deep/ .tabs .indicator {
    background-color: blue !important;
}
0 голосов
/ 23 февраля 2019

Мне понравился ответ @Sunil Singh, но вы правы, эти селекторы устарели, поэтому вот мой обходной путь:

Просто поместите правила css в корневой файл styles.css, прикрепленный к index.html,так что там индикатор будет затронут.Если вы хотите управлять определенной страницей для этого правила, вы можете использовать идентификаторы в каждом компоненте вкладок.

0 голосов
/ 22 октября 2018

это изменение цвета.я просто использую вкладки без angularjs

  $(document).ready(function(){
    $('.tabs').tabs();
  });
  
  
      
 .tabs {
    overflow-x: hidden !important;
}
.tabs .indicator {
    background-color: blue !important;
} 
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


</head>
<body>
<div class="row">
<div class="col s12 m12 l12 xl12">
  <!-- <ul class="tabs tabs-fixed-width" id="chartstabs">
    <li class="tab">
      <a href="#tab" (click)="loadTab(view)">okkk</a>
    </li>
  </ul> -->
  
  
<ul class="tabs tabs-fixed-width tab-demo z-depth-1" id="chartstabs">
    <li class="tab"><a href="#test1">Test 1</a></li>
    <li class="tab"><a class="active" href="#test2">Test 2</a></li>
    <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab"><a href="#test4">Test 4</a></li>
    <li class="tab"><a href="#test0">Test 5</a></li>
  </ul>
  <div id="test1" class="col s12"><p>Test 1</p></div>
  <div id="test2" class="col s12"><p>Test 2</p></div>
  <div id="test3" class="col s12"><p>Test 3</p></div>
  <div id="test4" class="col s12"><p>Test 4</p></div>
  <div id="test0" class="col s12"><p>Test 5</p></div>
  
  
</div>

</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...