mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00

Files

Brandy Carney 7ba94900bb refactor(themes): remove the outer-content class from core (#16589 )

BREAKING CHANGES

The outer-content class has been removed in favor of setting the color in your app instead:

```
.outer-content {
  --background: #f2f2f2;
 }
```

2018-12-04 16:38:50 -05:00

test

refactor(themes): remove the outer-content class from core (#16589 )

2018-12-04 16:38:50 -05:00

usage

docs(): usage and examples

2018-06-18 12:45:15 -04:00

readme.md

chore(): update stencil (#16506 )

2018-11-29 18:54:51 +01:00

text.scss

chore(text): don't overwrite ion-color properties

2018-08-08 15:38:18 -05:00

text.tsx

docs(all): possible values are extracted by stencil (#16190 )

2018-11-02 00:06:40 +01:00

readme.md

ion-text

The text component is a simple component that can be used to style the text color of any element. The ion-text element should wrap the element in order to change the text color of that element.

Usage

Javascript

<ion-text color="secondary">
  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
</ion-text>

<ion-text color="primary">
  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
</ion-text>

<ion-text color="light">
  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
</ion-text>

<ion-text color="danger">
  <h4 >H4: The quick brown fox jumps over the lazy dog</h4>
</ion-text>

<ion-text color="dark">
  <h5>H5: The quick brown fox jumps over the lazy dog</h5>
</ion-text>

<p>
  I saw a werewolf with a Chinese menu in his hand.
  Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
  He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
  Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
  <ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
</p>

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see theming.	`string \| undefined`	`undefined`
`mode`	`mode`	The mode determines which platform styles to use.	`"ios" \| "md"`	`undefined`

Built with StencilJS