Question

有没有办法扩展MDL微调器？我尝试更改它的widht和height属性，但它变得更好。看看：

CSS

width: 150px; 
height: 150px

结果

Answer 1

找到它。

您需要设置新属性。

<强> CSS

.mdl-spinner {
  width: 28px;
  height: 28px;
}

.mdl-spinner__circle {
  border-width: 3px;
}

按比例28/3改变它们。比方说，如果你想让它大3倍，你的代码将会是：

<强> CSS

.mdl-spinner {
  width: 84px;
  height: 84px;
}

.mdl-spinner__circle {
  border-width: 9px;
}

小心！如果缩放超过10次，它确实会影响你的FPS。

Answer 2

我必须使用!important。

.mdl-spinner {
  width: 64px !important;
  height: 64px !important;
}

.mdl-spinner__circle {
  border-width: 6px !important;
}

<html>
  <head>
    <!-- Material Design Lite -->
    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <!-- MDL Spinner Component -->
    <div class="mdl-spinner mdl-js-spinner is-active"></div>

  </body>
</html>

如何扩展MDL微调器？

2 个答案: