Question

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

这是我的代码：

<button ion-button large block color="danger" (click)="openPage($event, 0)">
    This is my test Text.
</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有四个平台：

ios：在iPhone或iPad上观看模式 ='ios'。
android：在任何Android设备上查看模式 ='md'。
windows：在任何Windows设备上查看模式 ='wp'。
核心：任何不适合上述任何平台的平台都将使用Material Design样式，模式 ='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

像这样在按钮中
添加大写字母

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

Answer 6

要全局设置，请添加

input

到app.scss

Answer 7

对于IONIC 4

将text-capitalize="false"添加到您的按钮。

例如：

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

Ionic v2按钮文字的大写字母

7 个答案: