Ionic v2ボタンテキストのキャップ

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をボタンに追加します。CSSプロパティセットを無効にするには、text-transform: none;を追加します。あなたは、アプリケーション内のボタンのスタイルをPlatform Specific Stylesを使用することができますテキスト変換プロパティ CSS text-transform Property

Answer 2

の詳細については

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

：

あなたのコードは次のようになります。

1. IOS：iPhoneまたはiPadで閲覧、モード = 'IOS'

   Ionic2は、4つのプラットフォームがあります。

2. アンドロイド：どのAndroid搭載端末でも表示モード = 'md'
3. windows：任意のWindowsデバイスで表示、モード = 'wp'。
4. コア：上記のプラットフォームに適合しないプラットフォームは、 = 'md'というマテリアルデザインスタイルを使用します。

---

モードスタイルをオーバーライド。 ボディに適用されるクラスを使用して、モードコンポーネントの特定のプロパティをオーバーライドできます。この場合は、ボタンのスタイルをオーバーライドしてテキストを変換しないことにします。

ここにコードをvariables.scssファイルに配置します。あなたが見るそれまではスクロールダウン節 "のApp 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テキスト-transformプロパティについての詳細：Here

Answer 3

を以下のようにテンプレートを変更し

：

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

をご次のコードを追加します。：

.removeTextTransform { 
    text-transform: none; 
} 

使用removeTextTransformクラスは、テキストがあなたイオンボタンから変換削除したいとき。

Answer 4

variables.scssデフォルトで

$button-md-text-transform: none; 

に次のように入れて、値がAndroidプラットフォーム用に大文字されます。それをnoneに変更します。これはアプリのすべてのボタンに適用されます。