我怎样才能创建一张像这样的 MDL 精简卡，中间有一个分隔线

Question

我不擅长 mdl lite，但我想创建一张看起来与下图完全一样的 mdl 卡，我该怎么做？

阅读文档后，这就是我想出的。但它看起来不太好。

body {
  padding: 0px;
}

.header {
  color: #666;
}

.container {
  margin: 0 auto;
  width: auto;
}

.demo-card-wide>.mdl-card__title {
  color: #fff;
  height: 60px;
  background: black
}

.demo-card-wide.mdl-card {
  width: 350px;
}

<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" rel="stylesheet" />

<body>
  <div class="container">

    <div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">

      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">Account</h2>
      </div>
      <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
          <h4> 0</h4>
          <p>Remaing Amount</p>
        </div>

        <div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
          <h4> 0</h4>
          <p>Remaing Amount</p>
        </div>
      </div>
    </div>

  </div>
  </div>
  </div>

</body>

]1]1

Answer 1

在 mdl-card 中使用 mdl-grid 是有道理的，但不会给您太多灵活性（例如 separator/divider 的位置）。我建议改用 flex 的解决方案。

对于右对齐的菜单按钮，我使用了 card component 中的 mdl-card__menu。剩下的，我留给你 ;) 请记住，你给出的例子没有使用默认的 Roboto 字体。

@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
  padding: 0px;
}

.header {
  color: #666;
}

.container {
  margin: 0 auto;
  width: auto;
}

.demo-card-wide>.mdl-card__title {
  color: #fff;
/*   height: 50px; */
  background: black
}

.demo-card-wide.mdl-card {
  width: 350px;
}


/* Additional css below */

.mdl-card {
  min-height: 0;
}

.mdl-card__menu {
  color: white;
}

/* .mdl-card__title {
  padding: 12px 32px;
  align-items: center;
} */

/* .mdl-card__title-text {
  font-size: 20px !important;
  font-weight: 400;
} */


.card-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card-cell {
  text-align: center;
}

.card-cell h4 {
  margin: 8px 0;
  font-weight: 400;
}

.card-divider {
  display: block;
  height: 50px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.3);
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>

<div class="container">

  <div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">

    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">Account</h2>
    </div>
    
    <div class="mdl-card__menu">
      <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
        <i class="material-icons">more_vert</i>
      </button>
    </div>
    
    <div class="mdl-card__supporting-text card-content">
      <div class="card-cell">
        <h4> 0</h4>
        <p>Remaing Amount</p>
      </div>
      <span class="card-divider"></span>
      <div class="card-cell">
        <h4> 0</h4>
        <p>Remaing Amount</p>
      </div>
    </div>

  </div>
</div>

我怎样才能创建一张像这样的 MDL 精简卡，中间有一个分隔线

How can i create a MDL lite card like this one with a divider in between

css

material-design-lite