大写字母的v2按钮文字

Question

在我的ionic v2应用程序中是一个按钮，无论我键入哪个文本，它总是大写。我不想添加css-utilities，因为我混用了大小写单词。

这是我的代码：

<button ion-button large block color="danger" (click)="openPage($event, 0)">
    This is my test Text.
</button>

我已经尝试从button标记中删除所有属性，但这没有用。有什么建议吗？

Answer 1

似乎按钮在CSS中将文本转换设置为大写。将以下CSS添加到您的按钮：text-transform: none;覆盖CSS属性集。

您的代码将变成这样：

<button ion-button large block color="danger" style="text-transform: none;" (click)="openPage($event, 0)">
    This is my test Text.
</button>

有关text-transform属性的更多信息CSS text-transform Property

Answer 2

将以下内容放入variables.scss

    $button-md-text-transform: none;

默认情况下，对于Android平台，该值为大写。将其更改为无。这将应用于您应用中的每个按钮。

Answer 3

您可以使用Platform Specific Styles设置应用程序中按钮的样式。

Ionic2具有四个平台：

1. ios：在iPhone或iPad上查看，模式 ='ios'。
2. android：在任何android设备上查看，mode ='md'。
3. windows：在任何Windows设备上查看，mode ='wp'。
4. 核心：任何不适合上述平台的平台都将使用Material Design样式，mode ='md'。

---

覆盖模式样式。您可以使用应用于主体的类重写模式组件中的特定属性。在这种情况下，您希望覆盖按钮样式以使其不进行文本转换。

将代码放到这里的variables.scss文件中。向下滚动，直到看到“ App iOS变量”或“ App Material Design变量”部分

// Style Android buttons
.md button {
  text-transform: none;
}

// Style iOS buttons
.ios button {
  text-transform: none;
}

// Style Windows Phone buttons
.wp button {
  text-transform: none;
}

---

有关主题化应用程序的更多信息：Theming your Ionic App有关CSS文本转换属性的更多信息：Here

Answer 4

[如下更改您的模板：

<button class="removeTextTransform" ion-button large block color="danger" (click)="openPage($event, 0)">
    This is my test Text.
</button>

在app.scss中添加以下代码：

.removeTextTransform {
  text-transform: none;
}

只要想从离子按钮中删除文本转换，就使用removeTextTransform类。

Answer 5

像这样在您的按钮中添加text-capitalize

<button ion-button text-capitalize (click)="openPage($event, 0)">This is my test Text.</button>

Answer 6

要全局设置添加

.button {
        text-transform: none;
      }

至app.scss

Answer 7

对于IONIC 4

对按钮使用text-capitalize =“ false”

例如：<ion-button text-capitalize="false" shape="round">Click</ion-button>