使用前端框架

Question

我正在尝试制作一个播放器卡片类型页面，显示有关流星应用中播放器的各种属性。我正在努力的是找到能够构建类似内容的Web组件和CSS吗？

我正在使用Materialize.css框架，但只考虑preloader类来创建评级栏（强度等）

<div class="progress">
  <div class="determinate" style="width: 70%"></div>
</div>

对此有任何帮助将不胜感激！

Answer 1

假设你的主要问题在于进度条，这应该可以让你开始：

https://jsfiddle.net/L23kwohq/

您可以将其放入您建议的视图的表格中。

CSS

.progress {
  height: 2.6em;
  background-color: white;
}
.progress .determinate {
  background-color: lightblue;
}
.amount {
  font-size: 2em;
  padding-left: 80px;
  // Whatever other styles...
}

HTML

<div class="progress">
  <div class="determinate" style="width: 70%">
    <span class="amount">7</span>
  </div>
</div>