角材mdTabs：縦のタブを使用できますか？

Question

私は、左にタブナビゲーションが表示されているタブを上から下に表示します。これはAngular Materialライブラリで実現できますか？

Answer 1

This codepenRahul Sagoreは、特にAngularではなく、バニラ素材を使用しますが、まさにあなたが望むものです。私はあなたと同じことを探していた。それは残念ですが、材料はこれを提供しませんが、私はそれが彼らの原則に反していかに物質が広すぎるかを見ることができます。

これは、カスタムCSS（おそらくオーバーライド、わかりません）と特定のマテリアルクラス名の使用で構成されています。以下は内容をスニペットに貼り付けたものです。

それがこのポストの制限空間でのタブの下にコンテンツをラップしませんので、私は6-colに10-colからコンテンツ1を変更するので、私はmdl-cell--n-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>