- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在选项卡布局中使用选项卡布局。我正在使用 Material Design lite,它已经为选项卡创建了类,因此我试图使用它们。
Tab Number 1 - Horizontal Tab 单独工作没有任何问题。Tab Number 2 - Vertical Tab 单独工作没有任何问题。
现在我尝试在标签 1 中使用标签 2。标签 1 的工作保持不变,但标签 2 不工作。
请查看此 Plunker 链接:https://plnkr.co/edit/LVPexb9akrRR2AoPGEGO?p=preview
代码 - HTML
<!DOCTYPE html>
<html>
<head>
<link data-require="material-design-lite@1.1.1" data-semver="1.1.1" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link data-require="material-design-lite@1.1.1" data-semver="1.1.1" rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css" />
<script data-require="material-design-lite@1.1.1" data-semver="1.1.1" src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h4>Combined Tab 2 within Tab 1</h4>
<div class="mdl-tabs mdl-js-tabs">
<div class="mdl-tabs__tab-bar">
<a href="#tab1" class="mdl-tabs__tab">Tab One</a>
<a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
<a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab1">
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-tabs__tab-bar">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">
<span class="hollow-circle"></span> General
</a>
<a href="#tab2-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span> Bank
</a>
<a href="#tab3-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span> Password
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--10-col">
<div class="mdl-tabs__panel is-active" id="tab1-panel">
Content 1
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
Content 2
</div>
<div class="mdl-tabs__panel" id="tab3-panel">
Content 3
</div>
</div>
</div>
</div>
</div>
<div class="mdl-tabs__panel" id="tab2">
<p>Second tab's content.</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<p>Third tab's content.</p>
</div>
</div>
<h4>Tab 1 Individual</h4>
<div class="mdl-tabs mdl-js-tabs">
<div class="mdl-tabs__tab-bar">
<a href="#tab1" class="mdl-tabs__tab">Tab One</a>
<a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
<a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
</div>
<div class="mdl-tabs__panel is-active" id="tab1">
<p>First tab's content.</p>
</div>
<div class="mdl-tabs__panel" id="tab2">
<p>Second tab's content.</p>
</div>
<div class="mdl-tabs__panel" id="tab3">
<p>Third tab's content.</p>
</div>
</div>
<h4>Tab 2 Individual</h4>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--2-col">
<div class="mdl-tabs__tab-bar">
<a href="#tab1-panel" class="mdl-tabs__tab is-active">
<span class="hollow-circle"></span> General
</a>
<a href="#tab2-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span> Bank
</a>
<a href="#tab3-panel" class="mdl-tabs__tab">
<span class="hollow-circle"></span> Password
</a>
</div>
</div>
<div class="mdl-cell mdl-cell--10-col">
<div class="mdl-tabs__panel is-active" id="tab1-panel">
Content 1
</div>
<div class="mdl-tabs__panel" id="tab2-panel">
Content 2
</div>
<div class="mdl-tabs__panel" id="tab3-panel">
Content 3
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/*Vertical Tabs*/
.vertical-mdl-tabs {
margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 35px;
height: inherit;
border-bottom: none;
border-right: 1px solid #d9d9d9;
}
.vertical-mdl-tabs .mdl-tabs__tab {
width: 100%;
height: 35px;
line-height: 35px;
box-sizing: border-box;
letter-spacing: 2px;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
border-right: 2px solid #EF5350;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
content: inherit;
height: 0;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
padding: 0 30px;
}
.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
text-align: left;
}
最佳答案
如果我猜对了,您已经从这篇文章中获取了“垂直标签的代码”Vertical tabs in Material design lite .我写了那篇文章,据我所知,你的问题与垂直制表符无关。如果您也在水平选项卡内使用水平选项卡,您将面临同样的问题。
问题可能是由于 mdl-tabs 的 javscript 代码引起的。原始开发人员可能正在使用选项卡父容器来查找该容器下的每个选项卡并将点击事件绑定(bind)到它。这就是为什么制造问题。由于缩小,现在无法理解。
解决方案:而不是将点击事件绑定(bind)到父级下的子选项卡。您需要更改代码以根据单击的选项卡找到“最近的”父选项卡容器,并根据找到的父选项卡修改子选项卡。
可能会让人不知所措,但我猜这是正在发生的事情。
关于html - 在选项卡中使用选项卡不起作用 - Material Design Lite,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36699871/
我是 angular 的新手,想动态地更改 angular Material 主题,我知道如何通过制作 scss 文件来制作不同的主题,定义 3 种颜色,包括 mat 属性和功能,但后来我在 angu
我猜,是不允许在 Material 网格(嵌套网格)中放置 Material 网格吗? 有人可以确认我的假设吗? (我正在使用 Angular Material 6。) l
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我一直在 material-ui react 库中看到对名为“LeftNav ”的组件的引用(例如: Material UI - Open LeftNav / Drawer on AppBar cli
我正在使用 mat-list而且我无法在移动设备上滚动它。 它是一个 mat-nav-list,里面有一些 mat-list-item,我的列表结构类似于: dashboard
我是网络开发的新手,正在尝试使用 material-ui。我看到一些演示代码使用 withStyle,还有一些使用 withTheme。它们之间有什么区别吗?非常感谢! 最佳答案 我认为接受的答案没有
我正在研究 Material 设计和 Material 设计中描述的一些指南。 我似乎遗漏了一个部分(不确定是否应该涵盖),即 Google 如何处理 Fieldsets。该文档确实涵盖了各个输入,但
我正在根据到目前为止所学的知识使用 Material 设计创建一个示例应用程序,但我注意到 Material 设计的开箱即用字体对于不同的组件是不同的。对于 Material 对话框中的 Materi
我确实有角度 6,尽管 ng generate @angular/material:material-nav --name home不工作 得到类似的错误 Collection "@angular/m
我正在使用图书馆 material-table对于我的应用程序中的数据表。我将数据 Prop 设置为使用来自 this.state.data 的数据,并且添加行将通过使用 setState 在我的表上
如何在 Angular Material Design 中设置工具栏下方的侧导航?这样 sidenav 就不会越过工具栏.. 最佳答案 这是一个布局问题。只需使用此页面结构:
我使用的是角 Material 2,但我认为这也适用于角 Material 1。 假设我想使用角度 Material 选项卡,但我想隐藏选项卡或向其添加一些特定样式。 所以我有以下 html/angu
我安装了 material-ui“^1.0.0-beta.36”。文档说有日期选择器。 但我在 node_modules\material-ui 和任何子文件夹中都找不到它。 更改日志表明计划在未来版
从一小时前开始,我在 Material 设计图标 cdn 上不断收到网络错误,因为错误名称未解析。 http://cdn.materialdesignicons.com/5.4.55/css/mate
如何在不失去波纹效果的情况下更改角 Material 开关按钮的颜色? 请在此处查看代码笔:http://codepen.io/shyambhiogade/pen/LpNGBP 我已将颜色更改为 #0
对于textfield并选择,我看到我们具有以下选项来添加variant =“ outlined”。 但是,我看不到material-ui / DatePicker。有人可以建议如何使用实质性UI将v
在 3.1.0 版本中使用“@material-ui/core” 全局覆盖步进器图标的颜色非常容易全局 createMuiTheme({ overrides: { MuiStepIco
我在我的应用程序脚本插件中使用 materializecss,当我尝试动态添加工具提示时,提示不会使用新标签更新。我尝试了几种变体,甚至仔细检查了小费是否正在改变,确实如此。问题是它似乎没有用更新的文
有谁知道当模式确定时如何在 Material 进度微调器中显示不完整的部分。现在我是这样的 . 但我想要这样 最佳答案 这可以做到,但它主要是一个黑客。这个想法是使用一个带有与微调器匹配的边框的 di
我今天发现了这个很棒的 UI 框架,并花了很多时间浏览文档,我必须说,我已经爱上了它。现在我想将它用于一个中等规模的项目,但我有两个顾虑: 我找不到任何网格系统,我该如何进行布局? 如何让它响应? 我
我是一名优秀的程序员,十分优秀!