Как лучше всего добавить заголовок к сетке / строке в MDL - PullRequest
Новая
       22

Как лучше всего добавить заголовок к сетке / строке в MDL

0 голосов
/ 05 мая 2020

Мне интересно, какой рекомендуемый способ - добавить заголовок к строке в Material Design Lite. Ниже у меня есть строка (ie: сетка) с двумя столбцами в ней. Предположим, я хочу добавить к нему название / заголовок. Когда вы запустите приведенный ниже код, вы увидите, что заголовок охватывает левую часть документа (и не имеет того же уровня отступа, что и содержимое). 

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

<h3>My Title</h3>
<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--3-col">
    Content 1
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    Content 2
  </div>
</div>

Я мог бы легко добавить CSS, чтобы добавить отступы / поля слева от <h3>, но мне это кажется немного взломанным и не похоже Я правильно использую MDL, если бы я делал это. 

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


<div class="mdl-grid">
  <h3>My Title</h3>
  <div class="mdl-cell mdl-cell--3-col">
    Content 1
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    Content 2
  </div>
</div>

Единственный способ, который я могу придумать, - это обернуть <h3> его собственным mdl-grid. Это работает, но добавляет ненужные отступы выше и ниже заголовка (из-за того, что он находится в сетке). 

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

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--12-col">
    <h3>My Title</h3>
  </div>
</div>
<div class="mdl-grid">
  
  <div class="mdl-cell mdl-cell--3-col">
    Content 1
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    Content 2
  </div>
</div>

Есть ли способ просто добавить заголовок к строке с помощью mdl?

1 Ответ

1 голос
/ 05 мая 2020

Как это?: 

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

<div class="mdl-layout__title">
  <div class="mdl-cell mdl-cell--12-col">
    <h3>My Title</h3>
  </div>
</div>
<div class="mdl-grid">
  
  <div class="mdl-cell mdl-cell--3-col">
    Content 1
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    Content 2
  </div>
</div>

Я меняю сначала mdl-grid на mdl-layout__title

...