將CSS應用於離子2選項卡和導航欄

Question

我已經使用空白模板從頭開始構建離子2應用程序，並且我使用TabsPage作爲應用程序的根頁面。現在我想改變字體大小和字體重量在我使用tabTitle屬性顯示標題爲每個標籤的文本顯示，所以我嘗試在.TS設置基本的CSS文件是這樣的：

import { Component } from '@angular/core'; 
 

 
import { NewsPage } from '../news/news'; 
 
import { AboutusPage } from '../aboutus/aboutus'; 
 
import { ContactusPage } from '../contactus/contactus'; 
 

 
@Component ({ 
 
    selector: 'page-tabs', 
 
    template:` 
 
    <ion-tabs color="background-blue"> 
 
     <ion-tab [root]="newsPage" tabTitle="الأخبار"></ion-tab> 
 
     <ion-tab [root]="aboutusPage" tabTitle="عن البرنامج"></ion-tab> 
 
     <ion-tab [root]="contactusPage" tabTitle="أتصل بنا"></ion-tab> 
 
    </ion-tabs> 
 
    `, 
 
    styles:[` 
 
    page-tabs { 
 
     .ios, .md { 
 
      ion-tabs { 
 
       font-weight: bold; 
 
       font-size: 15px; 
 
      } 
 
     } 
 
    } 
 
    `] 
 
}) 
 

 
export class TabsPage { 
 
    newsPage = NewsPage; 
 
    aboutusPage = AboutusPage; 
 
    contactusPage = ContactusPage; 
 
}

，則這個我想這些樣式應用到導航欄這是顯示在NewsPage，我使用SASS文件應用一些CSS這個頁面你也需要知道代碼：

import { Component } from '@angular/core'; 
 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
 

 
/** 
 
* Generated class for the NewsPage page. 
 
* 
 
* See http://ionicframework.com/docs/components/#navigation for more info 
 
* on Ionic pages and navigation. 
 
*/ 
 
@IonicPage() 
 
@Component({ 
 
    selector: 'page-news', 
 
    templateUrl: 'news.html', 
 
}) 
 
export class NewsPage { 
 

 
    constructor(public navCtrl: NavController, public navParams: NavParams) { 
 
    } 
 

 
    ionViewDidLoad() { 
 
    console.log('ionViewDidLoad NewsPage'); 
 
    } 
 

 
}

.ios, .md { 
 
    page-news { 
 
     ion-content { 
 
      background-color: #f6f6f9; 
 

 
      ion-card { 
 
       ion-card-content { 
 
        padding-top: 0px; 
 

 
        ion-card-title { 
 
         font-size: 18px; 
 
        } 
 
        p { 
 
         font-size: 15px; 
 
        } 
 
       } 
 
       ion-item { 
 
        h2 { 
 
         font-size: 15px; 
 
        } 
 
        p { 
 
         font-size: 14px; 
 
        } 
 
       } 
 
      } 
 
     } 
 
    } 
 
}

<ion-header> 
 

 
    <ion-navbar color='background-blue'> 
 
    <ion-title>الأخبار</ion-title> 
 
    </ion-navbar> 
 

 
</ion-header> 
 

 

 
<ion-content> 
 
    <ion-card> 
 
    <ion-row> 
 
     <ion-col> 
 
     <ion-item> 
 
      <ion-avatar item-start> 
 
      <img src="../../assets/avatars/arwa.png" /> 
 
      </ion-avatar> 
 
      <h2><b>ثانوية عروة بن الزبير</b></h2> 
 
      <p>منطقة الجهراء التعليمية </p> 
 
     </ion-item> 
 
    </ion-col> 
 
    <ion-col center text-left padding> 
 
     <ion-note dir="ltr" lang="en"> 
 
     1m 
 
     </ion-note> 
 
     <ion-note></ion-note> 
 
    </ion-col> 
 
    </ion-row> 
 
    <ion-card-content> 
 
     <ion-card-title> 
 
     نجل زيدان لنضم لـ آلافيس 
 
     </ion-card-title> 
 
     <p> 
 
     تعاقد نادي آلافيس الإسباني مع اللاعب الشاب إنزو زيدان من ريال مدريد لثلاثة مواسم مقبلة مع احتفاظ النادي الملكي بحق إعادة الشراء. 
 
     </p> 
 
    </ion-card-content> 
 
    <img src="http://s2.alraimedia.com/CMS/Attachments/2017/6/30/611246_2_-_Qu65_RT728x0-_OS990x557-_RD728x409-.jpg"> 
 
    </ion-card> 
 

 
    <ion-card> 
 
    <ion-row> 
 
     <ion-col> 
 
    <ion-item> 
 
     <ion-avatar item-start> 
 
     <img src="../../assets/avatars/alghanim.png" /> 
 
     </ion-avatar> 
 
     <h2><b>ثانوية عبداللطيف ثنيان الغانم</b></h2> 
 
     <p>منطقة الفروانية التعليمية </p> 
 
    </ion-item> 
 
    </ion-col> 
 
    <ion-col center text-left padding> 
 
     <ion-note dir="ltr" lang="en"> 
 
     17 Jan 5 
 
     </ion-note> 
 
     <ion-note></ion-note> 
 
    </ion-col> 
 
    </ion-row> 
 
    <ion-card-content> 
 
     <ion-card-title> 
 
     ألمانيا تسحق المكسيك 
 
     </ion-card-title> 
 
     <p> 
 
     وضع المنتخب الألماني حدًا لمغامرة نظيره المكسيكي في بطولة كأس القارات، وحصد فوزًا مستحقًا بنتيجة 4-1، مساء اليوم الخميس، في نصف نهائي البطولة التي تستضيفها روسيا، ليضرب موعدًا مع تشيلي في النهائي. 
 
     </p> 
 
    </ion-card-content> 
 
    <img src="http://img.kooora.com/?i=reuters%2f2017-06-29%2f2017-06-29t181145z_254853844_rc12d4ad5380_rtrmadp_3_soccer-confederations-ger-mex_reuters.jpg"> 
 
    </ion-card> 
 
</ion-content>

Answer 1

您的第一個頁面標籤樣式是錯誤的。

您不添加tabTitle選擇器或離子選項卡標籤。 你應該創建你的標籤文件夾內tabs.scss並從tabs.ts刪除[風格]

嘗試添加該代碼裏面tabs.scss：

.tab-button span { 
    font-weight: bold; 
    font-size: 15px; 
} 

所以，總體來說你tabs.scss會是這個樣子：

page-tabs { 
    .ios, .md { 
     ion-tabs { 
      a.tab-button span { 
       font-weight: bold; 
       font-size: 15px; 
      } 
     } 
    } 
} 

和你tabs.ts應該是這樣的：

import { Component } from '@angular/core'; 

import { NewsPage } from '../news/news'; 
import { AboutusPage } from '../aboutus/aboutus'; 
import { ContactusPage } from '../contactus/contactus'; 

@Component ({ 
    selector: 'page-tabs', 
    template:` 
    <ion-tabs color="background-blue"> 
     <ion-tab [root]="newsPage" tabTitle="الأخبار"></ion-tab> 
     <ion-tab [root]="aboutusPage" tabTitle="عن البرنامج"></ion-tab> 
     <ion-tab [root]="contactusPage" tabTitle="أتصل بنا"></ion-tab> 
    </ion-tabs> 
    ` 
}) 

export class TabsPage { 
    newsPage = NewsPage; 
    aboutusPage = AboutusPage; 
    contactusPage = ContactusPage; 
} 

而且，如果我理解正確，您希望ion-navbar標題與tabTitle選擇器具有相同的字體大小和字體權重，那麼：

您應該修改sass文件並添加樣式爲navbar。 應該是這樣的：

.ios, .md { 
    /* We add the code here */ 
    ion-header { 
     ion-navbar { 
      ion-title .toolbar-title { 
       font-weight: bold; 
       font-size: 15px; 
      } 
     } 
    } 
    page-news { 
     ion-content { 
      background-color: #f6f6f9; 

      ion-card { 
       ion-card-content { 
        padding-top: 0px; 

        ion-card-title { 
         font-size: 18px; 
        } 
        p { 
         font-size: 15px; 
        } 
       } 
       ion-item { 
        h2 { 
         font-size: 15px; 
        } 
        p { 
         font-size: 14px; 
        } 
       } 
      } 
     } 
    } 
} 

Answer 2

只要複製粘貼&這個CSS：

對於沒有選中的標籤：

.tabs-md-primary .tab-button, .tabs-md-primary .tab-button-icon { 
    color: black; 
} 

對於選定的標籤：

.tabs-ios-primary .tab-button[aria-selected=true], .tabs-ios-primary .tab-button[aria-selected=true], 
.tabs-md-primary .tab-button[aria-selected=true], .tabs-md-primary .tab-button[aria-selected=true] { 
    color: #fff; 
    font-weight:bold; 
    border-top: white solid; 
} 

Click here to see tabs after adding above style in my code