This Rahul Sagore code uses vanilla material, not specifically for Angular, but this is exactly what you want. I was looking for the same as you; it is a shame Material does not offer this, but I see how it will contradict their principles and make the material too extensive.
It consists of custom css (possibly overriding, I'm not sure) and using the specific material names of Material. Below I pasted the content into the fragment.
I had a problem with the mdl-cell--n-col classes, so I changed the content from 10-col to 6-col so that it would not wrap the content under the tabs in the bounding space of this message. You may have to work with it yourself, or abandon it, and use material styles the way you know how to do it. Similarly, I don’t see what .hollow-circle tags do, so maybe they are not needed.
.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>
Henry Blyth
source share