Question

我需要在MDC卡标题之前添加一个图标，如图所示（标签2）。但是，根据MDC设计，我不知道正确的HTML。到目前为止，这是该卡的HTML代码：

<div class="mdc-card demo-card undefined">
    <div class="demo-card__primary">
        <h1 class="demo-card__title mdc-typography--headline6">Some Title</h1>
        <div class="mdc-card__actions">
            <div class="mdc-card__action-buttons">
                <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
                    Button 1
                </button>
                <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
                    Button 2
                </button>
            </div>
        </div>
    </div>
</div>

有人可以指出我要添加的正确HTML吗？ MDC文档不是很清楚。

Answer 1

根据Material Design card component documentation，卡内容没有标准布局。因此，您可以通过多种不同方式完成图像中的布局。请参见下面的工作示例，该示例与您问题中的设计图像相似。

.mdc-card {
  height: 350px;
  width: 350px;
}

.card-header {
  margin: 1.25rem 0;
  padding: 16px;
  display: flex;
  align-items: center;
}

  .card-header h2,
  .card-header h3 {
    margin: 0;
  }

.card-icon {
  padding-right: 8px;
}

.mdc-card__media {
  background-image: url(https://via.placeholder.com/100x100)
}

.card-body {
  padding: 16px;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Card Example</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
  </head>

  <body>

    <div class="mdc-card">
      <div class="mdc-card__primary-action">
        <div class="card-header">
          <div class="card-icon material-icons">android</div>
          <div class="card-title">
            <h2 class="mdc-typography--headline6">Title</h2>
            <h3 class="mdc-typography--subtitle2">Secondary text</h3>
          </div>
        </div>
        <div class="mdc-card__media mdc-card__media--square">
          <div class="mdc-card__media-content"></div>
        </div>
      </div>
      <div class="card-body mdc-typography--body2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      <div class="mdc-card__actions">
        <div class="mdc-card__action-buttons">
          <button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
          <button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
        </div>
        <div class="mdc-card__action-icons">
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="Share">share</button>
          <button class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon" title="More options">more_vert</button>
        </div>
      </div>
    </div>

    <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

  </body>

</html>

将图标添加到MDC卡

1 个答案: