Question

我有以下代码，我想更改细分按钮的文字颜色

<ion-content>
  <ion-toolbar color="header">
    <ion-segment [(ngModel)]="tripType">
      <ion-segment-button value="OW">
        One Way
      </ion-segment-button>
      <ion-segment-button value="RT">
        Round Trip
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-content>

我可以看到$ segment-button-ios-text-color作为Saas变量，但我不知道如何使用它。

Answer 1

基本上我们在css/scss文件中编写样式并将它们包含在html文件中。

你可以这样写<ion-segment-button value="OW" style="color: red;">但这不是一个好习惯。因为如果按照我的说法编写内联样式，我们就无法覆盖（无法更改）它们。

所以，最好有一个css/scss文件，并且像<ion-segment-button>这样的<ion-segment-button class="segment-button">类，并在css/scss文件中写样式，如下所示，并将其包含在html中文件

.segment-button {
    color: red; // here, instead of "red" you can use sass variable if it was already defined
}

以下代码与上述代码相同

$segment-button-ios-text-color: red
.segment-button {
    color: $segment-button-ios-text-color;
}

Answer 2

您可以覆盖 variables.scss 中的$segment-button-ios-text-color，并为IOS App的应用中的所有细分按钮设置。

如果您要覆盖Android，请设置$segment-button-md-text-color

的值

$segment-button-ios-text-color: red;

这将由Ionic

在构建过程中自动设置

如果要覆盖一个特定的html，将其设置在相应的scss文件中。使用选择器home.html的{{1}}示例，在 home.scss 中设置以下内容：

home

Answer 3

从中删除颜色：

<ion-toolbar color="header"> </ion-toolbar>

它会覆盖$ segment-button-ios-text-color变量

<ion-content>
  <ion-toolbar>
    <ion-segment [(ngModel)]="tripType">
      <ion-segment-button value="OW">
        One Way
      </ion-segment-button>
      <ion-segment-button value="RT">
        Round Trip
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-content>

然后您现在可以在app.scss或variables.scss

中设置值

Answer 4

可以通过以下方式完成：

首先，在scss文件中输入颜色：
```
 .segment { color: red;}
```

然后，在html文件中执行以下操作：

<ion-segment value="Providers">
  <ion-segment-button value="Providers" class="segment">
    <ion-label>Providers</ion-label>
  </ion-segment-button>
  <ion-segment-button value="Services" class="segment">
    <ion-label>Services</ion-label>
  </ion-segment-button>
</ion-segment>

更改离子段文本颜色

4 个答案: