html - Top App Bar和Drawer如何结合?
问题描述
我正在尝试将Top App Bar放置在Drawer旁边,例如Drawer 和 Top App Bar演示,它看起来不像预期的那样:
代码看起来像(我正在使用反应):
<div className="content">
<aside className="mdc-drawer mdc-drawer--permanent mdc-typography">
<nav className="mdc-drawer__drawer">
<header className="mdc-drawer__header">
<div className="mdc-drawer__header-content">
{ReasonReact.string("Header")}
</div>
</header>
<nav id="icon-with-text-demo" className="mdc-drawer__content mdc-list">
<a className="mdc-list-item mdc-list-item--activated" href="#">
<i className="material-icons mdc-list-item__graphic" ariaHidden=true>{ReasonReact.string("inbox")}</i>{ReasonReact.string("Inbox")}
</a>
<a className="mdc-list-item" href="#">
<i className="material-icons mdc-list-item__graphic" ariaHidden=true>{ReasonReact.string("star")}</i>{ReasonReact.string("Star")}
</a>
</nav>
</nav>
</aside>
<div className="mdc-top-app-bar mdc-top-app-bar--fixed">
<div className="mdc-top-app-bar__row">
<section className="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" className="material-icons mdc-top-app-bar__navigation-icon">{ReasonReact.string("menu")}</a>
<span className="mdc-top-app-bar__title">{ReasonReact.string("Title")}</span>
</section>
</div>
</div>
</div>
课堂风格content
:
@import "~material-design-icons/iconfont/material-icons.css";
@import "~@material/top-app-bar/mdc-top-app-bar.scss";
@import "~@material/drawer/mdc-drawer.scss";
.content {
display: inline-flex;
height: 100%;
}
和进一步的风格:
@import "./App/scss/app.scss";
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
#root {
display: block;
height: 100%;
}
根是react的入口点。
问题是,我必须做什么才能得到想要的结果。
解决方案
推荐阅读
- javascript - 如何访问结构相似的从输入到输出的 JSON 数组元素
- function - 如何使用 wxMaxima 获得正确的图形?
- python - AttributeError: 'NoneType' 对象没有属性 'assign' | 使用 Pandas 的数据框 Python
- c++ - 是否可以在 C++ 中存储类型?
- reactjs - 无法更改 react-chartjs-2 中标签的默认颜色和字体大小
- authentication - Ansible Tower 多域认证
- ios - In iPhone device, VPN profile showing "unknown" when installed, in Settings -> VPN screen
- .net - How to change route name in .NET Odata?
- fortify - Fortify Token - Access Denied
- php - 使用 PHP 将文件从 oneDrive 共享 url 复制到我的服务器?