Угловой материал mdTabs: возможно ли иметь вертикальные язычки?

Question

Я ищу вкладки, отображаемые сверху вниз, с вкладкой навигации слева. В любом случае это может быть достигнуто в библиотеке Angular Material?

Answer 1

This codepen от Rahul Sagore использует ванильный материал, а не специально для углового, но это именно то, что вы хотите. Я искал то же, что и ты; это позор Материал не предлагает этого, но я вижу, как это будет противоречить их принципам и сделать материал слишком обширным.

Он состоит из пользовательского css (возможно, переопределения, я не уверен) и использования конкретных имен материалов Material. Ниже я вставлял содержимое в фрагмент.

У меня был вопрос с mdl-cell--n-col классов, поэтому я изменил содержание одного из 10-col в 6-col, чтобы она не обернуть содержание под вкладками в ограничительном пространстве этого поста. Вам, вероятно, придется поработать с этим самим, или отказаться от этого, и использовать стили материалов так, как вы знаете, как это сделать. Точно так же я не вижу, что делают промежутки .hollow-circle, поэтому, возможно, они не нужны.

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