Angular Material mdTabs: Ist es möglich, vertikale Tabs zu haben?

Question

Ich suche nach Tabs von oben nach unten mit Tab-Navigation auf der linken Seite angezeigt. Gibt es das in der Angular-Material-Bibliothek?

Answer 1

This codepen von Rahul Sagore verwendet Vanille Material, nicht speziell für Angular, aber es ist genau das, was Sie wollen. Ich habe nach dem gleichen gesucht wie du; Es ist eine Schande, dass Material das nicht anbietet, aber ich kann sehen, wie es gegen ihre Prinzipien gehen und das Material zu umfangreich machen würde.

Es besteht aus benutzerdefinierten CSS (möglicherweise überschreiben, ich bin mir nicht sicher) und Verwendung bestimmter Material Klassennamen. Im Folgenden habe ich den Inhalt in ein Snippet eingefügt.

Ich hatte ein Problem mit den mdl-cell--n-col Klassen so änderte ich den Inhalt einer von 10-col zu 6-col so wäre es nicht den Inhalt unterhalb der Tabs in der restriktiven Raum dieser Post wickeln. Sie müssen wahrscheinlich selbst damit experimentieren, oder verwerfen und Material-Stile verwenden, wie Sie es wissen. Ähnlich kann ich nicht sehen, was die .hollow-circle Spannen tun, also vielleicht werden sie nicht benötigt.

/*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>