将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