कोणीय सामग्री mdTabs: क्या लंबवत टैब होना संभव है?

Question

मैं बाईं ओर टैब नेविगेशन के साथ ऊपर से नीचे प्रदर्शित टैब की तलाश में हूं। क्या वैसे भी यह कोणीय सामग्री पुस्तकालय में हासिल किया जा सकता है?

Answer 1

This codepenRahul Sagore द्वारा वेनिला सामग्री का उपयोग करता है, विशेष रूप से कोणीय के लिए नहीं, लेकिन यह वही है जो आप चाहते हैं। मैं तुम्हारे जैसा ही खोज रहा था; यह शर्म की बात है सामग्री यह पेशकश नहीं करती है, लेकिन मैं देख सकता हूं कि यह उनके सिद्धांतों के खिलाफ कैसे होगा और सामग्री को बहुत व्यापक बना देगा।

इसमें कस्टम सीएसएस (शायद ओवरराइडिंग, मुझे यकीन नहीं है) और विशेष सामग्री क्लासनाम का उपयोग शामिल है। नीचे मैंने सामग्री को स्निपेट में चिपकाया है।

मैं mdl-cell--n-col वर्गों के साथ एक मुद्दा तो मैं 6-col को 10-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>