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

我使用空白模板从头开始构建了一个ionic 2应用程序，我使用TabsPage作为该应用程序的根页面。现在，我想将字体大小和字体重量更改为文本显示，其中我使用tabTitle属性显示每个选项卡的标题，因此我尝试在.ts文件中设置基本css，如下所示：

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

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;
}

.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;
                    }
                }
            }
        }
    }
}

从'@angular/core'导入{Component}；
从“../news/news”导入{NewsPage}；
从“../aboutus/aboutus”导入{AboutusPage}；
从“../contactus/contactus”导入{ContactusPage}；
@组成部分({
选择器：“页面选项卡”，
模板：`
`,
风格：[`
页面选项卡{
.ios，.md{
离子标签{
字体大小：粗体；
字体大小：15px；
}
}
}
`]
})
导出类选项卡{
新闻页=新闻页；
AboutsPage=AboutsPage；
contactusPage=contactusPage；
}

页面选项卡的第一个样式错误

您没有添加tabTitle选择器或ion选项卡标记。 您应该在tabs文件夹中创建一个tabs.scss，并从tabs.ts中删除[styles]

尝试在tabs.scss中添加此代码：

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

因此，总体而言，您的tabs.scs将如下所示：

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

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;
}

.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;
                    }
                }
            }
        }
    }
}

您的tabs.ts应该如下所示：

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

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;
}

.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;
                    }
                }
            }
        }
    }
}

---

只需复制并粘贴此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;
}

对于所选选项卡：

.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;
}

---

您好，我现在想在tabs页面的选项卡标题中添加我自己的自定义样式。我编写的css在应用程序中根本没有任何效果。仍然没有应用css样式，我不得不说，我已经知道如何使用覆盖的离子变量来更改字体大小，但我想知道如何通过css/sass文件来实现，这使应用程序更加容易我。@FahadAlDaferi好的，我编辑了代码，如果可以，再试一次。只需使用.tab按钮代替[tabTitle]或ion选项卡。对于navbar的使用。工具栏标题，它应该工作得很好（在我看来它工作得很好）@Sebastain感谢navbar工作得很好，但是对于选项卡仍然没有效果？！奇怪的尝试使用/deep/.tab按钮{并告诉我。如果它仍然不起作用，请将您页面选项卡文件的所有实际代码发送给我谢谢您的帮助，但代码仍然没有对选项卡标题产生任何影响不确定原因？即使我创建了一个新的tabs.scss文件来承载样式不起作用，是否有问题？您必须知道，我手动创建了选项卡并将其注册为app.component.ts中的rootPage以及app.module.ts声明和entrycomponent中的rootPage我也要感谢您给我关于已选择和未选择选项卡的说明，这些选项卡提前解决了我的下一步问题：）