将图标添加到 MDC 卡

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，卡片内容实际上没有任何 "standard" 布局。您可以通过多种不同的方式完成类似于图像中的布局。请参阅下面与您问题中的设计图像相似的工作示例。

.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: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px), url(https://via.placeholder.com/100)
}

.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 href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

  <div class="mdc-card">
    <div class="mdc-card__primary-action" tabindex="0">
      <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">Placeholder Image</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">
          <span class="mdc-button__label">Action 1</span>
        </button>
        <button class="mdc-button mdc-card__action mdc-card__action--button">
          <span class="mdc-button__label">Action 2</span>
        </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>

</body>

</html>

将图标添加到 MDC 卡

Add Icon to an MDC Card

html

material-design

material-components

mdc-components

material-components-web