Angular Material mdTabs:是否可以有垂直标签? [英] Angular Material mdTabs : is it possible to have vertical tabs?
问题描述
我正在寻找从上到下显示且左侧有标签导航的标签.无论如何,这可以在 Angular Material 库中实现吗?
This codepen by Rahul Sagore 使用 vanilla Material,不是专门用于 Angular,但它正是您想要的.我正在寻找和你一样的东西;很遗憾 Material 不提供此功能,但我可以看出这将如何违背他们的原则并使 Material 变得过于广泛.
它包括自定义 css(可能是覆盖的,我不确定)和特定 Material 类名的使用.下面我将内容粘贴到一个片段中.
我遇到了 mdl-cell--n-col
类的问题,所以我将内容一从 10-col
更改为 6-col
这样它就不会在这篇文章的限制空间中将内容包裹在选项卡下方.您可能必须自己修补它,或者废弃它并以您知道的方式使用 Material 样式.同样,我看不到 .hollow-circle
跨度在做什么,所以也许不需要它们.
/*垂直标签*/.vertical-mdl-tabs {边距顶部:30px;}.vertical-mdl-tabs .mdl-tabs__tab-bar {-webkit-flex-direction: 列;-ms-flex-direction: 列;弹性方向:列;填充底部:35px;高度:继承;边框底部:无;右边框:1px 实心 rgba(10, 11, 49, 0.20);}.vertical-mdl-tabs .mdl-tabs__tab {宽度:100%;高度:35px;行高:35px;box-sizing: 边框框;字母间距:2px;}.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {右边框:2px 实心 #ED462F;}.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {内容:继承;高度:0;}.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {填充:0 30px;}.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {文本对齐:左;}
<script src="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.min.js"></script><link href="https://storage.googleapis.com/code.getmdl.io/1.1.0/material.indigo-pink.min.css" rel="stylesheet"/><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>表 1</a><a href="#tab2-panel" class="mdl-tabs__tab"><span class="hollow-circle"></span>表 2</a><a href="#tab3-panel" class="mdl-tabs__tab"><span class="hollow-circle"></span>表 3</a>
<div class="mdl-cell mdl-cell--6-col"><div class="mdl-tabs__panel is-active" id="tab1-panel">内容一
<div class="mdl-tabs__panel" id="tab2-panel">内容二
<div class="mdl-tabs__panel" id="tab3-panel">内容三