如何扩展MDL微调器？

Question

如何扩展MDL微调器？

4

有没有办法调整MDL旋转器的大小？我尝试更改其宽度和高度属性，但它变得更细了。看一下：

CSS

width: 150px; 
height: 150px

结果

这是一个展示IT技术相关内容的图片。

- Viktor

你尝试过这个吗：transform: scale(1.5); 例如？ - Aziz

是的，它会带来意料之外的行为。 - Viktor

期望的结果是什么？ - Aziz

只需缩放它，保持比例，仅仅让它变大即可。 - Viktor

边框是固定的，因此如果容器更大，它们自然会看起来“更薄”。您可以更改默认为3px的.mdl-spinner__circle的border-width值。如果我没记错的话。 - Aziz

2个回答

-1

我不得不使用!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>

- Ronnie Royston

这完全是代码片段的问题。如果您在包含MDL样式表之后覆盖样式，则不会在本地环境中获得正确的结果。在CodePen上不使用！important可以正常工作：https://codepen.io/dukeimg/pen/OmWzdG - Viktor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Viktor · Accepted Answer

找到了。

你需要设置新的属性。

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。