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

问题描述

我正在寻找自上而下显示的选项卡，并且选项卡导航在左侧.无论如何，在Angular Material库中可以实现吗?

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?

推荐答案

此codepen 由 Rahul Sagore 使用的是香草材质，并非专门用于Angular，但这正是您想要的.我在找和你一样的东西.遗憾的是材料没有提供此功能，但是我可以看到它会违背他们的原则并使材料变得过于广泛.

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.

它包括自定义CSS(可能不确定，我不确定)和特定Material类名称的使用.下面，我将内容粘贴到了一个片段中.

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.

我在使用mdl-cell--n-col类时遇到问题，因此我将内容从10-col更改为6-col，因此它不会将内容包装在这篇文章的限制空间中的选项卡下面.您可能需要自己动手修改，或者废弃它，然后以自己知道的方式使用Material样式.同样，我看不到.hollow-circle跨度在做什么，所以也许不需要它们.

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屋！