2

Я использую компоненты дизайна углового материала, чтобы иметь постоянный внешний вид на всем моем сайте. (Angular Material Design)Как применить тему пользовательского материала к компоненту Bootstrap

Я создал собственную тему для этого:

 $mdThemingProvider.theme('default') 
     .primaryPalette('red', { 
      'default': '700', 
      'hue-1': '100', 
      'hue-2': '600', 
      'hue-3': 'A100' 
     }) 
     .accentPalette('light-blue'); 

К сожалению, я не могу найти CSS, чтобы определить знак, поэтому я использовал один предоставленный загрузчике. Проблема в том, что моя пользовательская тема не применяется.

Как я могу это достичь? Или, что еще лучше, материальный дизайн CSS предоставляет нечто подобное? (Не удалось найти это).

Это то, что я имею в momement: enter image description here

и HTML для этого есть:

<div class="md-block" layout layout-align="center center"> 
         <div flex="20" layout layout-align="center center"> 
          <span class="md-body-1">Poll interval in days</span> 
         </div> 
         <md-slider class="md-primary" flex ng-model="client.PollIntervalInDays" step="1" min="1" max="100" aria-label="rating"> 
         </md-slider> 
         <div flex="20" layout layout-align="center center"> 
          <h2><span class="label label-pill label-danger">{{client.PollIntervalInDays}}</span></h2> 
         </div> 
        </div> 

Проблема заключается в том, что цвета от мкр-первичного не совпадает с этикетка-опасность. Я попытался применить md-priamry на пролете, но это не сработает.

Любые идеи?

+0

Оформить заказ https://github.com/tilwinjoy/angular-bootstrap-material –

ответ

2

Я бы сделал все возможное, чтобы не смешивать Bootstrap в сайт углового материала. Идея иметь 2 рамки CSS в игре звучит как ничто иное, как горячий беспорядок для меня.

Вот codepen из знака осуществляется в угловом Материале: http://codepen.io/anon/pen/QbXwYq

Они делают это с помощью кнопки и некоторых CSS:

md-badge{ 
    margin: 0 0 0 8px; 
    background-color: #259b24; 
    color: white; 
    padding: 2px 4px; 
    border-radius: 4px; 
} 
.md-warn{ 
    background-color: #F44336; 
} 

Я также использовал одну, только для чтения MD-чип чтобы подделать значок, и все было в порядке с результатами.

+1

Это решает мою проблему. Спасибо! –

Смежные вопросы