将 CSS 应用于 ionic 2 选项卡和导航栏

Question

我已经使用空白模板从头开始构建了一个 ionic 2 应用程序，并且我使用 TabsPage 作为应用程序的 rootPage。现在我想将字体大小和字体粗细更改为文本显示，在其中我使用 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 选择器或 ion-tab 标签。 你应该在你的 tabs 文件夹中创建一个 tabs.scss 并从你的 tabs.ts 中删除 [styles]

尝试在 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 文件，并为导航栏添加样式。 应该是这样的：

.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