Как я могу добавить изображение заголовка в ящик в сети компонентов материалов Google?

Я создаю веб-сайт с использованием компонентов материалов Google для Интернета. Я добавил ящик на свой веб-сайт и хочу добавить изображение заголовка, но не знаю, как это сделать. Вот раздел ящиков на веб-сайте Material Design:

https://material.io/develop/web/components/drawers/


person DvDv    schedule 03.06.2018    source источник


Ответы (1)


До сих пор нет официального способа добиться этого. Самый простой способ:

сначала оберните заголовки заголовков (не включая тег img),

<div class="mdc-drawer__header">
    <img id="header-image" src="img.jpg">
    <div id="titles-wrapper">
        <h3 class="mdc-drawer__title">Title</h3>
        <h6 class="mdc-drawer__subtitle">Subtitle</h6>
    </div>
<div>

во-вторых, в вашем файле CSS или в теге style,

#header-image, #titles-wrapper {
    display: inline-block;
    vertical-align: middle;
}

#header-image {
    width: 32.5%;
}

#titles-wrapper {
    width: 66.5%;
}

Примечание. Необязательно, чтобы ширина изображения составляла 32,5%, но очень важно иметь допуск 2% от общей ширины. 30% и 68% подойдут.

person Kristian Mark Surat    schedule 30.11.2018