Customizing Ionic Components — How to build any UI with Ionic

Published in

Learn Ionic Framework

6 min readOct 21, 2021

In this post we want to share with you the recipe we use at IonicThemes to build our starter templates. Hopefully you would learn how to approach the task of building reusable UI kits or design systems and create your own components to improve the efficiency in future projects.

I would like to start this post by talking about the term “Composition”. I believe the essence of software development is composition. And by composition I mean: The act of combining parts or elements to form a bigger element.

Compositions are formed by adding new objects to the previous ones, so that each of the latter is part of the former.

The process of software development is breaking down large problems into smaller ones.

Then, we can build components to solve those smaller problems, and compose them together to form a complete application.

Look around: composition is everywhere!

Components can be very diverse. We could define a component as something that can be useful on its own or that can also be combined with another element to form a bigger one.

Now think about this idea recursively. Because composition has no limits. You can compose objects as many times as you want.

But, composition is not only about software, it’s around us everywhere.

Almost everything in this world is made up of different elements or components and can be broken down into smaller pieces.

Getting back to building Ionic applications, we can divide elements in two categories: UI Components and Functionalities.

Let me show you a clear example of how we can apply composition when creating a classic Sign Up form.

Creating a Sign-up Form with Ionic components

For instance, let’s start by combining a few inputs, labels, and a button. We can agree that this is a decent sign-up form, right?

But, let’s go a step further and think about what will happen when the user submits the form with an invalid value. The app should suggest that there are existing errors which must be corrected. As a result, the user experience will be improved.

Also, adding a show/hide password component is really helpful to improve the UX for users on mobile devices or small screens.

Nowadays, we also need to add social sign in to the sign-up form, because nobody wants to remember another password. Also, adding social sign in to our mobile apps has a lot of benefits.

Do you see the difference between the first and the last form example? Picture this process as a composition of different elements, we combined different elements (labels, inputs, buttons, copy) and interactions (validations, hints, OAuth integrations) to drastically improve the usability and user experience for the sign-up form.

By having a bunch of individual pieces already built, you can combine them to create better experiences.

Well, that was just for the UI of a classic sign up page, but take a second to think of all the pieces and elements that any given app includes such as authentication flows, user management, all the UI components such as:

As for functionalities:

Maps in Ionic
Ionic forms
Navigation in Ionic
notifications
payments
Ionic image handling
and trust me, the list goes on and on.

In case you don’t get my point, what I want to show you is how an app is built by composing hundreds of building blocks and functionalities.

So if you, as a developer, pretend to build every piece of your application…, you are absolutely out of your mind!

Using and reusing Ionic components

Composition enables us to use and reuse components. And these components can either be created by you or by others.

I mean, if you are like us that builds multiple Ionic apps, you’ve probably gone through the sign-up page a couple of times, so, there’s no point in coding it each time.

You can focus on building it once and then reuse it as often as necessary and just customize the styles for each application.

I loved this quote from Eric Elliot, “A software developer who doesn’t understand composition is like a home builder who doesn’t know about bolts or nails.”

Save time, don’t repeat yourself

When building an app there are many repetitive tasks that you can avoid. Like the example from the sign-up page we saw before.

Thanks to the composition of multiple elements, we can save a lot of time. This frees us from having to be experts regarding all the aspects of developing an app.

You don’t have to be an expert in every aspect of creating an app. We just need to be good assemblers to combine all the building blocks that will result in our unique application.

What is more, the beauty of open source is collaboration. Being able to share your knowledge and extend the creation of other developers is something we have to be very grateful for. Personally, I learn a lot from seeing other people’s code.

From my point of view, collaboration and community are also a big part of composition, because you can use an element built by someone else and use it as it is, or you can use it as a suitable starter to build something else.

Okay, enough talking about all this theory, let’s see how to build any UI with Ionic.

Customizing and composing Ionic Elements

One of the features I love the most about Ionic Framework is the immense amount of components that are ready to use, customize and extend.

These elements are also beautifully crafted as Web Components enabling encapsulation and allowing them to be portable and easily reused.

In addition to this, each of these Ionic components consists of one or more custom elements.

For example, a card can be composed of images, labels and buttons. And this happens with many other Ionic UI components.

Regarding web components, I won’t go into details here but, if you aren’t familiar with them or if you are interested in learning more, we have an extensive article about Web Components in Ionic Apps.

For the purpose of this post, let’s divide elements in two categories:

UI Elements
Functionalities

Ionic Components customization strategies

There are different strategies we can use to customize and enhance Ionic components. Some of them are pretty straight forward, others require adding more code (HTML and CSS).

In the following sections I will explain how to progressively customize an Ion Checkbox using four different strategies.

Why a checkbox? Because I want to show you how we can achieve beautiful UIs through composition even with a dull and plain checkbox.

In the following image you can see a basic and raw Ion-Checkbox component.

I broke the customization down into four levels of effort and complexity and I built some code examples for each of these scenarios, so you can better understand what I’m trying to explain here. You can download all the source code of this example app.

If you want to go over each of these customization strategies please refer to the original post.

Hope you enjoyed this Ionic Customization post. Thank you very much for reading and if you have any questions or feedback please leave a comment below.

Originally published at https://ionicthemes.com.