Text
Overview of the Text Component
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.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
Setting the Text component properties can be done from under Common and/or Styles tabs:
Common Properties:
| Property Name | Property Description |
|---|---|
| Container | You can use Ionic container to create Ionic text components: ion-text, ion-note, ion-badge, ion-label, ion-card-title, ion-card-subtitle, span, p, div, a, h1-h6, b, i, u, pre, small, bdo, sub, li, legend. If these containers are used, text styles will be changed to Ionic. Here, HTML tags are selected as text containers. |
Any HTML element can be used as the Container property value.
For the ion-label container, an advanced property Position with values Fixed, Stacked or Floating can be added. Check how it works for List item labels here.
The property Slot can be used as an advanced property.
The properties Color and Mode work only when Ionic wrapper (e.g. ion-label) is used.
For the ion-label container an advanced property Position with values fixed, stacked or floating can be added.
Note!
The component can include only one Text component as a child. Use the HTML component if you need complex structure.
Styles Properties:
| Property Name | Property Description |
|---|---|
| Text Color | Select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
| Font Size | Enter font size in px, %, em, vh, and vw. |
| Font Weight | Set the weight (or boldness) of the font: Normal or Bold. |
| Line Height | Set the height of a line box in px, %, em, vh, and vw. It's commonly used to set the distance between lines of text. |
| Font Style | Set whether a font should be styled with a Normal or Italic face. |
| Text Decoration | Set the appearance of decorative lines on text by using the group of predefined buttons: specifies no line for the text specifies that the line will be displayed under the text specifies that the line will be displayed through the text. |
Visit the Ionic documentation to read more about Text.
Updated about 5 hours ago