0

Trying to use MDL Tabs in my project. But can't get the desired tabs styling.

Component code:

<div class="releases-list-component">

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect" >//***** mdl container

<div class="mdl-tabs__tab-bar">//***** mdl tabs
 <a href="#albums" class="mdl-tabs__tab is-active">Albums</a>
 <a href="#split" class="mdl-tabs__tab">Splits</a>
 <a href="#tributes" class="mdl-tabs__tab">Tributes</a>
</div>


<div class="mdl-tabs__panel is-active" id="albums">//***** mdl tab content
  <div class="release-list-item release_1"></div>
  <div class="release-list-item release_2"></div>
  <div class="release-list-item release_3"></div>
  <div class="release-list-item release_4"></div>
  <div class="release-list-item release_8"></div>
  <div class="release-list-item release_9"></div>
</div>

<div class="mdl-tabs__panel" id="splits">//***** mdl tab content
  <div class="release-list-item release_6"></div>
</div>

<div class="mdl-tabs__panel" id="tributes">//***** mdl tab content
  <div class="release-list-item release_5"></div>
  <div class="release-list-item release_7"></div>
</div>

  </div>
</div>

My index.html

<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- MDL CSS library  -->
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">

<!-- MDL JavaScript library  -->
<script src="/node_modules/material-design-lite/material.min.js"></script>

<!-- Material Design Icons  -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Custom Style  -->
<link rel="stylesheet" href="app/css/styles.css">

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>

<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="systemjs.config.js"></script>

<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>
</head>

My style.css

   #albums {
     display: flex;
     justify-content: space-around;
     flex-wrap: wrap;
   }

   .release-list-item {
     width: 400px;
     height: 400px;
     margin: 15px;
   }

   .release_1 {
      background: url('../images/cover.jpg') center center no-repeat;
      background-size: 100%; 
    }

I am also using other mdl elements (e.g. preloader) and they work fine. But Tabs particularly don't work.

I also copy-pasted some working MDL Tabs examples into my component.html, and they didn't work as well.

Didn't find any suitable solution to me. Please, explain what should be done to make it work.

Alexandr Belov
  • 1,804
  • 9
  • 30
  • 43

1 Answers1

0

The following variable and function must be added to the main.ts (or similar) file which launches the application. Taken from that issue

declare var componentHandler: any;

setTimeout(function() {
  componentHandler.upgradeAllRegistered();

}, 100);
Alexandr Belov
  • 1,804
  • 9
  • 30
  • 43