Tutorial hero image
Lesson icon

A List of Common CSS Utility Attributes in Ionic 2

3 min read

Originally published December 13, 2016

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!

If you enjoyed this article, feel free to share it with others!