A List of Common CSS Utility Attributes in Ionic 2

There are a number of ways to go about styling your Ionic 2 applications, and I have created content around these methods in the past. You can find that content below:

One particular method that I have only briefly covered is using the CSS Utility Attributes that Ionic provides. Utility attributes are those little attributes you can add to HTML elements in Ionic 2 like ion-button, no-lines, and icon-only. Adding these attributes to an element will change its behaviour or style in some way, and even though you can usually achieve the same result manually with your own CSS rules, using these attributes can save you a lot of time and effort.

The attributes I mentioned above would look like this when applied:

<button ion-button icon-only><ion-icon name="add"></ion-icon></button>

<ion-list no-lines></ion-list>

In this post, I am going to introduce you to some of the key utility attributes that Ionic provides. This will be organised into somewhat of a cheat sheet. This isn’t intended to be a complete list, it is primarily composed of attributes that I frequently use and find helpful. If there is an attribute that is missing that you think should be listed, feel free to leave it in the comments section.

Generic Attributes

I am going to categorise the attributes into the elements that they belong to, but first, I wanted to list some generic attributes that can be applied to multiple different elements.

disabled – Can be applied to most input components to disable interaction (also adds disabled styling)
ion-fixed – Adds element to the fixed content area such that it won’t be affected by scrolling
tappable – Can be added to elements to remove the 300ms tap delay on mobile. Not required for <button> and <a>. Should be avoided where possible, as using <button> and <a> for tappable elements is better for accessibility.

`<ion-list>`

no-lines – Removes borders from the list
inset – Applies inset styling to the list (adds margin on all sides)

`<ion-item>`

detail-none, detail-push – These can be used to hide or display the arrow icon on a list item
item-left, item-right, item-content – These attributes decide where, in relation to other elements, that the item should be placed
text-wrap – Will force text inside of item to wrap onto next line

ion-item is a bit of a special case, in that as well as being used as its own element, it can also be added as an attribute to other elements. Commonly, it is added to a button to make a clickable list item:

<button ion-item></button>

but it can also be applied to any element that you would like to apply the ion-item styling to. As I mentioned before, it is better to use a <button> or <a> element for tappable elements, so it is preferable to use <button ion-item></button> instead of <ion-item tappable></ion-item> even though both are essentially the same.

`<ion-item-divider>`

sticky – Will cause item dividers to stick to the top of the screen when scrolled past (e.g. like in an alphabetised list). Note that this has limited browser support.

`<ion-input>`

autofocus – Will automatically give focus to the input element

`<ion-label>`

fixed – Positions label to the left of the input element
floating – Causes label to float up and shrink when input is being entered
stacked – Positions label above the input element

`<button>`

ion-button – Applies the Ionic button styling to the button. This should always be included
icon-only – Should be used on buttons that only contain an <ion-icon>
icon-right, icon-left – Positions an <ion-icon> inside of the button
full – Makes the button full width
block, round – Styles the button as a block button or round button
outline – Styles the button with a coloured border instead of a solid fill colour
large, small – Creates smaller or larger buttons

`<ion-content>`

padding, no-padding – Adds or removes padding from the content area
padding-left, padding-right, padding-top, padding-bottom – Adds padding to a specific side of the content area
padding-horizontal, padding-vertical – Applies padding to the left and right, or top and bottom of the content area
margin – Adds a margin to the content area
margin-left, margin-right, margin-top, margin-bottom – Adds a margin to a specific side of the content area
margin-horizontal, margin-vertical – Applies a margin to the left and right, or top and bottom of the content area

`<ion-col>`

width-10,20,25,33,34,50,66,67,75,80,90 – Controls the width of a grid column
offset-10,20,25,33,34,50,66,67,75,80,90 – Offsets a column by the specified amount (adds a left margin)
top, bottom, center – Vertically aligns items inside of a column to the top, bottom, or center of the column

`<ion-row>`

wrap – Will cause columns to wrap onto the next line when there is no space left
top, bottom, center – Vertically aligns items inside of a row to the top, bottom, or center of the row
responsive-sm, responsive-md, responsive-lg – Makes the grid responsive by changing the flex-direction to column at a certain breakpoint. This will cause columns to display underneath each other, instead of side-by-side. This would allow you to create different layouts on tablets and phones, for example.

`<ion-header>`

no-border – Removes the border from the header element
transparent – Adds transparent background to header

`<ion-buttons>`

left, right, end – Will position the buttons contained within the element appropriately

Any more to add? Leave a comment below!