- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Google Material Design Lite (MDL) 网页版,但无法将抽屉导航放在右侧。
该文档没有关于如何做到这一点的信息。这甚至可能吗?
默认抽屉总是从左边来。
<header class="custom-header mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__drawer-button">
<i class="material-icons">menu</i>
</div>
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">My App</span>
</div>
</header>
<div class="mdl-layout__drawer">
drawer contents...
</div>
最佳答案
这是我详细阐述的解决方法。
希望它有帮助。
寻找您的想法和建议以进一步改进。
https://jsfiddle.net/VamosErik88/HTHnW/651/
<style>
.mdl-layout__drawer-right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 240px;
height: 100%;
max-height: 100%;
position: absolute;
top: 0;
right: 0;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
box-sizing: border-box;
border-right: 1px solid #e0e0e0;
background: #fafafa;
-webkit-transform: translateX(250px);
-ms-transform: translateX(250px);
transform: translateX(250px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-timing-function: cubic-bezier(.4,0,.2,1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
color: #424242;
overflow: visible;
overflow-y: auto;
z-index: 5;
}
.active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.mdl-layout__obfuscator-right {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 4;
visibility: hidden;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.mdl-layout__drawer-right.active~.mdl-layout__obfuscator-right {
background-color: rgba(0,0,0,.5);
visibility: visible;
}
.mdl-layout__drawer-right>.mdl-layout-title {
line-height: 56px;
padding-left: 16px;
}
</style>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<div class="material-icons mdl-badge" id="notif" data-badge="5">notifications</div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<div class="mdl-layout__drawer-right">
<span class="mdl-layout-title">Notifications</span>
</div>
<main class="mdl-layout__content">
</main>
<div class="mdl-layout__obfuscator-right"></div>
</div>
<script>
$('#notif').click(function(){
if($('.mdl-layout__drawer-right').hasClass('active')){
$('.mdl-layout__drawer-right').removeClass('active');
}
else{
$('.mdl-layout__drawer-right').addClass('active');
}
});
$('.mdl-layout__obfuscator-right').click(function(){
if($('.mdl-layout__drawer-right').hasClass('active')){
$('.mdl-layout__drawer-right').removeClass('active');
}
else{
$('.mdl-layout__drawer-right').addClass('active');
}
});
</script>
关于navigation - 右侧的 Material Design Lite (MDL) 抽屉导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32131858/
我正在用power designer创建一个物理模型,我想将默认值添加到我的Mysql表中。 有可能吗,有人加了默认值 ? 谢谢 最佳答案 有可能,我发现“列属性”并不容易 方法如下: 选择表格(单击
关闭。这个问题是 opinion-based 。它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文来回答。 2年前关闭。 Improve t
我正在编写一个采用 Material Design 布局的应用程序,但找不到任何关于如何将对话框动画显示到屏幕上的指南。 这表明盒子应该只是“砰”的一声存在,但这似乎违背了设计的精神,包括动画和触觉。
我做了一个巨大的掠夺,不小心丢失了我的*.cs(设计文件)..我刚刚得到了*.designer文件。 我能否反过来,仅使用 .designer 文件以某种方式创 build 计文件 (*.cs),还是
如果 Google 的关键字规划器向我显示关键字“Web Design [city-name]”获得约 880 次搜索,而“Website Design [city-name]”获得约 620 次搜索
首先,代码: $(document).ready(function() { $('#member_pattern').hide(); $('.add-member').click(function()
大型软件公司之一问了这个问题。我想出了一个简单的解决方案,我想知道其他人对该解决方案有何看法。 You are supposed to design an API and a backend for
在最新的 Material Design 文档 (https://www.google.com/design/spec/what-is-material/elevation-shadows.html#
背景 我正在对从我们的 RDBMS 数据库到 MongoDB 的转换进行原型(prototype)设计。在进行非规范化时,似乎我有两种选择,一种会导致许多(数百万)个小文档,另一种会导致更少(数十万)
Qt Designer (5.11.2) 在选择 QWebEngineView-Widget 时崩溃。 我正在创建一个对话框,以将其作为 .ui 文件包含在 QGIS 3 中。在表单中,我想使用 QW
我直接从 getmdl.io(组件页面)和所有设备(多台 PC、浏览器、手机等)复制代码,汉堡菜单不在标题中居中。我似乎无法隔离 css 中的菜单图标来重新对齐它。 getmdl.io 上的所有组件代
如何为 SPA 动态初始化 materialize design lite (google) 的组件?当我在 View 中动态初始化组件时,JS 没有初始化。正如我已经尝试过使用 componentH
我正在使用 Angular 4 构建一个 Web 应用程序。对于设计,我使用的是 Material Design lite。但是,我想使用 MDL 实现一个交互式轮播,它给我流畅的外观和感觉,并且与我
它看起来像 Polymer Starter Kit包含比 Material Design Lite 更多的组件,并且现在可用。由于两者都是符合 Material Design 理念的 Google 项
我在设置 mdl-textfield 样式时遇到了一些困难。 具体来说,设置 float 标签的大小和颜色,以及按下输入字段后动画的高度和颜色。 实际上,这是我从组件列表中获取的起点。 https:/
所以,好友列表的现代概念: 假设我们有一个名为 Person 的表。现在,那个 Person 需要有很多伙伴(其中每个伙伴也在 person 类中)。构建关系的最明显方法是通过连接表。即 buddyI
如何在导航中创建子菜单项? Link Link Link Link 我不能用 用它。什么是正确的类? 最佳答案 MDL 似乎还没有原生支持子菜单。 然而
我想知道我应该遵循哪些步骤来解决设计自动售货机等问题并提出许多设计文档(如用例、序列图、类图)。是否有任何我可以阅读的来源/链接,其中讨论了如何逐步进行。 谢谢。 最佳答案 我不确定是否有任何普遍接受
早在 10 月份,Kristopher Johnson 就询问了 Accounting Software Design Patterns 他收到了几个答案,但基本上都是一样的,都指向Martin Fo
我一直在为我们的产品开发一些组件,其中之一是基于流布局面板。 我想做的是为它提供一个自定义设计器,但不会丢失其默认设计器 (System.Windows.Forms.Design.FlowLayout
我是一名优秀的程序员,十分优秀!