Добавить значок на карту MDC

Мне нужно добавить значок перед названием карты MDC, как показано на диаграмме (метка 2). Однако я не знаю правильного HTML для этого в соответствии с дизайном MDC. Это 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>

КАРТА MDC

Может ли кто-нибудь указать мне правильный HTML для добавления? Документация MDC не очень ясна.


material-design html material-components material-components-web mdc-components
person M.K.    schedule 13.08.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Согласно документации по компонентам карты Material Design на самом деле нет никаких «стандартных» макетов для содержимого карточек. Вы можете выполнить макет, подобный изображенному на вашем изображении, различными способами. Ниже приведен рабочий пример, похожий на изображение дизайна в вашем вопросе.

.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>

person benvc    schedule 14.08.2018
comment
Как он подбирает значок Android? Когда я запускаю этот код в автономном режиме, он работает нормально - значок подбирается. Но когда я помещаю этот код в свою веб-инфраструктуру (Scala Play), он не отображает значок Android. Если вы сообщите мне, как этот код выбирает значок, я смогу его отладить. Спасибо - person M.K.; 14.08.2018
comment
Значок Android является частью набора значков материалов. Вы можете включить <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> в заголовок вашего HTML-кода или разместить шрифты самостоятельно. - person benvc; 14.08.2018
comment
Это не сработало. Это как-то связано с Play, чего я еще не понял. В конце концов я взял SVG для изображения, которое хотел, и поместил его прямо в свой HTML. - person M.K.; 14.08.2018
comment
Я мало что знаю о платформе Play, но если вы сами размещаете шрифт значков, вам может потребоваться убедиться, что статические маршруты к вашим ресурсам шрифта определены правильно. - person benvc; 14.08.2018