Materiale angolare mdTabs: è possibile avere schede verticali?

Question

Sto cercando schede visualizzate dall'alto verso il basso con navigazione a schede a sinistra. È comunque possibile ottenere questo risultato nella libreria dei materiali angolari?

Answer 1

This codepen di Rahul Sagore utilizza materiale di vaniglia, non specificamente per Angolare, ma è esattamente quello che vuoi. Stavo cercando la stessa cosa di te; è un peccato che il materiale non lo offra, ma posso vedere come andrebbe contro i loro principi e rendere il materiale troppo ampio.

Comprende un css personalizzato (forse sovrascrivente, non sono sicuro) e l'uso di particolari nomi di materiali. Di seguito ho incollato il contenuto in uno snippet.

ho avuto un problema con le mdl-cell--n-col classi così ho cambiato il contenuto uno da 10-col a 6-col quindi non sarebbe avvolgere il contenuto sotto le schede nello spazio restrittiva di questo post. Probabilmente dovrai armeggiare con te stesso, o scartarlo e usare gli stili materiali nel modo in cui sai come. Allo stesso modo, non riesco a vedere cosa stanno facendo gli spanning .hollow-circle, quindi forse non sono necessari.

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