Ionic v2 Button text in caps

问题:

In my ionic v2 app is a button, no matter which text I type in, it's always capitalized. I don't want to add css-utilities, because i have mixed lower and upper case words.

Here is my code:

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

I've tried to remove all properties from the button tag, but that did not worked. Any suggestions?

回答1:

It seems the button has text-transform set to uppercase in CSS. Add the following CSS to your button: text-transform: none; to override the CSS property set.

Your code becomes something like this:

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

For more information on the text-transform property CSS text-transform Property

回答2:

Put the following in the variables.scss

    $button-md-text-transform: none;

By default, the value is uppercase for Android platform. Change it to none. This will be applied to every button in your app.

回答3:

You can use Platform Specific Styles to style the buttons in your application.

Ionic2 has four platforms:

1. ios: Viewing on an iPhone or iPad, mode = 'ios'.
2. android: Viewing on any android device, mode = 'md'.
3. windows: Viewing on any windows device, mode = 'wp'.
4. core: Any platform that doesn't fit any of the above platforms will use the Material Design styles, mode = 'md'.

---

Overriding the Mode Styles. You can use the class that is applied to the body to override specific properties in mode components. In this case you would like to override the button style to have no text transform.

Place the code down here in the variables.scss file. Scroll down untill you see the section "App iOS Variables" or "App Material Design Variables"

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

---

More about theming your app: Theming your Ionic App
More about CSS text-transform property: Here

回答4:

Change your template as below:

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

Add following code in your app.scss:

.removeTextTransform {
  text-transform: none;
}

Use removeTextTransform class whenever you want to remove text transform from your ionic button.

回答5:

add text-capitalize in your button like this

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

回答6:

To set it globally add

.button {
        text-transform: none;
      }

To app.scss