Utility Attributes
Ionic provides a set of SCSS/CSS utility attributes that can help when developing your app.
Text Transformation
| Attribute | Description |
|---|---|
text-left |
aligns the text of the element to its left |
text-center |
aligns the text of the element to its center |
text-right |
aligns the text of the element to its right |
text-justify |
stretches the lines so that each line has equal width |
text-wrap |
wrap text |
text-nowrap |
don’t wrap text |
text-uppercase |
transforms text to all caps |
text-lowercase |
transforms text to all lowercase |
text-capitalize |
transforms the first letter of the text to capitals |
Element Padding
| Attribute | Description |
|---|---|
padding |
adds padding to the whole element |
padding-top |
adds padding-top |
padding-left |
adds padding-left |
padding-right |
adds padding-right |
padding-bottom |
adds padding-bottom |
padding-vertical |
adds padding to the top and botttom |
padding-horizontal |
adds padding to the left and right |
no-padding |
removes any padding |
ion-buttons property
| Attribute | Description |
|---|---|
start |
Aligns the element at the start based on platform. iOS goes left, Android is the first item on the right |
end |
Aligns the element at the end based on the platform. iOS goes right, Android is the last item on the right |
left |
Aligns the element on the left side. Overrides the platform specific order |
right |
Aligns the element on the right side. Overrides the platform specific order |