Ionic 2 Utility Attributes

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!

What to watch next...

  • Kp Abhiram

    All CSS commonly used Elements are listed under one roof

    good Work Josh

    Keep It Up.

  • Another Awesome tutorial,
    I would add “Clear” to too

  • Also it seems “sticky” is not working on RC3, would you confirm that still exists

  • ZiFFeL

    fullscreen is missing on ion-content 🙂

  • Abu Nj

    are u sure transparent is for ion-header ?

  • Tyler Harrington

    are there any solutions to the “sticky” attribute? It does not work on device is the sticky divider is rendered with *ngIf

  • Tom McLellan

    Awesome list! Thanks for making these available in one place

  • For me starting with Ionic, the CSS Utilities was very first section that I would go for whenever utility classes/properties were needed. And when failed to find what I am looking I’d go inside each and every component to satisfy my needs. They have decided this just because of organization but as a beginner I would end up creating custom css solution.

  • What about the use of those utilities in general? When is it preferable? What are best practices on that?
    Another important question: Is there something to be aware of in regard of specificity of the utility attributes?
    In general they feel more like inline styles (which should used sparingly).

  • Bart

    I’m really missing the no-bounce attribute in this list: </ion-content.