Angular Material mdTabs:是否可以有垂直标签? [英] Angular Material mdTabs : is it possible to have vertical tabs?

查看：13
本文介绍了Angular Material mdTabs:是否可以有垂直标签?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在寻找从上到下显示且左侧有标签导航的标签.无论如何，这可以在 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">内容三

I am looking for Tabs displayed top to bottom with tab navigation on the left. Is there anyway this can be achieved in Angular Material library?

解决方案

This codepen by Rahul Sagore uses vanilla Material, not specifically for Angular, but it's exactly what you want. I was looking for the same thing as you; it's a shame Material doesn't offer this, but I can see how it would go against their principles and make Material too extensive.

It comprises of custom css (perhaps overriding, I'm not sure) and use of particular Material classnames. Below I've pasted the contents into a snippet.

I had an issue with the mdl-cell--n-col classes so I changed the content one from 10-col to 6-col so it wouldn't wrap the content beneath the tabs in the restrictive space of this post. You'll probably have to tinker with that yourself, or scrap that and use Material styles the way you know how. Similarly, I cannot see what the .hollow-circle spans are doing, so perhaps they aren't needed.

/*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 rgba(10, 11, 49, 0.20);
}

.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 #ED462F;
}
.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;
}

<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>
                  Tab 1
             </a>
             <a href="#tab2-panel" class="mdl-tabs__tab">
                  <span class="hollow-circle"></span>
                  Tab 2
              </a>
              <a href="#tab3-panel" class="mdl-tabs__tab">
                  <span class="hollow-circle"></span>
                  Tab 3
              </a>
         </div>
       </div>
       <div class="mdl-cell mdl-cell--6-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>

这篇关于Angular Material mdTabs:是否可以有垂直标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆