沿着左側垂直標籤的Ionic2標籤內容

Question

我在我的應用程序中使用ionic2（3.13），並且我可以完美地使用水平標籤。是否有可能有垂直標籤，如下所示，需要幫助。 Thx： enter image description here

Answer 1

我重寫了一些scss使其工作。希望它可以幫助別人：

1. 離子版本3.13

2. tabs.scss（選項卡HTML文件的SCSS文件）

   page-tabs { 
       .tabbar { 
       top: 0; 
       width: 5rem; 
       flex-direction: column; 
       background-color: #cfa972 !important; 
       } 
   
       ion-header { 
       left: 5rem; 
       right: 0; 
       } 
   
       ion-content { 
       left: 5rem; 
       right: 0; 
       } 
   
       .tabs-ios .tab-button { 
       width: 100%; 
       font-size: 10px; 
       color: #cfa972; 
       padding: 0; 
   
       &[aria-selected="false"] { 
        color: #cfa972 !important; 
        background-color: #cfa972 !important; 
       } 
   
       &[aria-selected="true"] { 
        color: #ffffff !important; 
        background-color: #b28850 !important; 
       } 
   
       &[aria-selected="true"] .tab-button-icon { 
        color: #ffffff; 
       } 
   
       &[aria-selected="false"] .tab-button-icon { 
        color: #ffffff; 
       } 
       } 
   
       .has-icon .tab-badge { 
       right: calc(50% - 22px); 
       } 
   
       .tab-badge { 
       top: 33%; 
       } 
   } 
   

3. 標籤根頁面SCSS文件：

   page-mine { 
   .fixed-content { 
       left: 0; 
       right: 0; 
       top: 0; 
       bottom: 0; 
       margin-bottom: 0 !important; 
       position: absolute; 
       display: block; 
   } 
   
   .scroll-content { 
       left: 0; 
       right: 0; 
       top: 0; 
       bottom: 0; 
       margin-bottom: 0 !important; 
       position: absolute; 
       z-index: 1; 
       display: block; 
       overflow-x: hidden; 
       overflow-y: scroll; 
       -webkit-overflow-scrolling: touch; 
       will-change: scroll-position; 
       contain: size style layout; 
   } 
   }