material-components-web - 如何将标题图像添加到 Google Material Components Web 的抽屉中？

Question

我正在使用 Google Material Components for web 构建一个网站。我在我的网站上添加了一个抽屉，我想添加一个标题图片，但我不知道该怎么做。这是 Material Design 网站上的抽屉部分：

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

Answer 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% 会起作用。