Question

我对mdl lite不太好但是我想创建一个mdl卡，看起来和下面的图像完全一样？我是怎么做的？

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

＆＃13;

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;
}

＆＃13;

<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> $600</h4>
          <p>Remaing Amount</p>
        </div>

        <div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
          <h4> $600</h4>
          <p>Remaing Amount</p>
        </div>
      </div>
    </div>

  </div>
  </div>
  </div>

</body>

＆＃13;

] 1] 1

Answer 1

在mdl-grid中使用mdl-card是有道理的，但不会给你很大的灵活性（例如分隔符/分隔符的位置）。我提出了一个flex的解决方案。

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

＆＃13;

@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);
}

＆＃13;

<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> $600</h4>
        <p>Remaing Amount</p>
      </div>
      <span class="card-divider"></span>
      <div class="card-cell">
        <h4> $600</h4>
        <p>Remaing Amount</p>
      </div>
    </div>

  </div>
</div>

＆＃13;

我如何创建一个像这样的MDL精简卡，中间有一个分隔线

1 个答案: