Как создать метку в md-tab в angularjs - PullRequest
Новая
       0

Как создать метку в md-tab в angularjs

0 голосов
/ 28 сентября 2018

Разметка: 

md-tab label="Current ({{ctrl.ongoing_assignments.length}})"


Требуемый выход:

Ток (1) <===== Я хочу, чтобы число было на красном фоне с круглой формой, как уведомление в Facebook </p>

Ответы [ 2 ]

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

Из вашего вопроса я не знаю, является ли это решение успешным шагом или нет,
, но посмотрите, поможет ли оно, тогда я могу внести изменения для достижения желаемого результата.
В настоящее время отображаются
2 вкладки:
- первая является нормальной вкладкой, а
- вторая меняет цвет фона, будучи активной. 

angular.module('MyApp', ['ngMaterial'])
            .controller('AppCtrl', function ($scope, $mdSidenav) {
                $scope.ButtonText = "Test Button";

                $scope.buttonClick = function() {
                    alert("First Angular Material App");
                };
            });
.other-div md-tabs .md-tab.md-active .md-ripple-container {
  color: rgb(248,187,208);
  background: red;
  z-index: -1;
}
.other-div md-tabs .md-tab.md-active {
    color: green;
}
<html ng-app="MyApp">
<head>
    <title>First App Angular Material</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>
</head>
<body>
    <div ng-controller="AppCtrl">
      <md-tabs md-selected="1" md-stretch-tabs="auto" md-align="bottom" md-dynamic-height md-border-bottom md-center-tab md-swipe-content>
        <md-tab label="tab1">
          <md-tab-body>
            <h1>Welcome to first tab</h1>
            <md-tab-body>
          </md-tab>
            <md-tab label="tab2">
          <md-tab-body>
            <h1>Welcome to Second tab</h1>
            <md-tab-body>
          </md-tab>
            <md-tab label="tab3">
          <md-tab-body>
            <h1>Welcome to Third tab</h1>
            <md-tab-body>
          </md-tab>
      </md-tabs>
    </div>
    
    <div ng-controller="AppCtrl" class='other-div'>
      <md-tabs md-selected="1" md-stretch-tabs="auto" md-align="bottom" md-dynamic-height md-border-bottom md-center-tab md-swipe-content>
        <md-tab label="tab1">
          <md-tab-body>
            <h1>Welcome to first tab</h1>
            <md-tab-body>
          </md-tab>
            <md-tab label="tab2">
          <md-tab-body>
            <h1>Welcome to Second tab</h1>
            <md-tab-body>
          </md-tab>
            <md-tab label="tab3">
          <md-tab-body>
            <h1>Welcome to Third tab</h1>
            <md-tab-body>
          </md-tab>
      </md-tabs>
    </div>
</body>
</html>
0 голосов
/ 28 сентября 2018

Если вы хотите, чтобы этот стиль применялся только к этому элементу, вы можете сделать:

В файле CSS: 

.reference{ 
    background-color: red;
}

Ваш html: 

md-tab class="reference" label="Current ({{ctrl.ongoing_assignments.length}})"

Если вы хотите, чтобы этот стиль применялся ко всем ярлыкам md-tab, вы можете сделать: 

md-tab {
   background-color: red;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...