Ionic v2 Button中的文本

在我的离子v2应用程序中是一个按钮，不管我输入哪个文本，它总是大写。我不想添加css实用程序，因为我混合了大写和小写字母。Ionic v2 Button中的文本

这里是我的代码：

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

我试图从按钮标记删除所有特性，但没有奏效。有什么建议么？

来源

2016-12-28 tom_tom

看来按钮在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>

欲了解更多有关的文本转换财产 CSS text-transform Property

来源

2016-12-28 15:12:58 yogur

谢谢，这工作，我已经在app.scss文件中为所有按钮全局设置它。 –

@tom_tom很高兴能帮助您，请将其标记为正确答案。 – yogur

您可以使用Platform Specific Styles样式的按钮在你的应用程序。

Ionic2具有四个平台：

IOS：查看在iPhone或iPad，模式 = 'IOS'。
机器人：查看任何机器人装置上，模式 = 'MD'。
窗口：查看任何窗口装置，模式 = 'WP' 上。
核心：任何平台，不适合任何上述平台将使用材质的设计风格，模式 =“MD”。

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

放置代码到这里的variables.scss文件。向下滚动，直到你看到一节“应用在iOS变量”或“应用材料设计变量”

// 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

来源

2017-03-28 14:14:05 NiekF

如下更改模板：

<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类，只要您想从离子按钮中删除文本转换。

来源

2017-06-14 14:26:29

把下面的variables.scss

$button-md-text-transform: none;

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

来源

2017-11-22 01:28:56

对于这个问题，这是一个更好的答案，如果可能的话，请避免在任何情况下使用内联样式。 – Chumillas

Ionic v2 Button中的文本

回答

相关问题