css - 使用前端框架从 CSS 创建玩家记分卡

Question

我正在尝试制作一个球员卡片类型的页面，以显示有关 meteor 应用程序中球员的各种属性。我正在苦苦挣扎的是找到能够让我构建这样的东西的网络组件和 css？

我正在使用 Materialize.css 框架，但只想到预加载器类来创建评级条(强度等)

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

如有任何帮助，我们将不胜感激!

Answer 1

假设您的主要问题是进度条，这应该让您开始:

https://jsfiddle.net/L23kwohq/

您可以将其放入您提出的 View 的表格中。

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>