Updated April 20, 2023
Introduction to Ionic Components
Ionic Components Are Re-usable UI Components that help in designing a Mobile application with much more Interactive and Beautiful UI that gives the Look and Feel to your application. Ionic Components are also called as the Building Blocks of Ionic Application and these components are used across the mobile app you develop, right from the Header to Menu bar, Buttons, List, refresher, loader, notification bar, list, radio buttons, Push up a notification, till the footer.
Components of Ionic
There are lots and lots of UI components which Ionic provides to Front-End Developers such as Alerts, Buttons, List, Search Bar, Refresh, Loader, tab, etc. Let’s go over some of the most interesting and useful UI components which will be mostly used when you start designing your Mobile App.
1. Refresh Page
Tag:
<ion-refresher>Description:
This UI component provides the user to refresh the content with the Pull-Down-To-Refresh feature. On this pull-down touch event, a listener ionRefresh is invoked which triggers an event which in turn calls the method defined in ionRefresh attribute.
Syntax:
<ion-refresher (ionRefresh)="customRefreshMethod()">
<ion-refresher-content> .... </ion-refresher-content>
</ion-refresher>2. Type Ahead Search Bar
Tag:
<ion-searchbar>Description:
This UI component provides the user to search through a long list just by typing each letter and list keeps filtering out matching content on the UI. An additional attribute to this search bar is the cancel button, which can be used to erase the context which is typed in the text field. It’s up to the user whether to display the cancel button on the text field or not.
Syntax:
<ion-searchbar show-cancel-button="always/never">
</ion-searchbar>3. Sticky Header at the top
Tag:
<ion-list-header>Description:
This UI component provides the user to always position the Header Component at the top of the Page, irrespective of scrolling performed on the Page. This helps to keep the Header Always Focused as in case of large data user tends to scroll down and miss the Actually header details. For Ionic Header to be Sticky at the top make sure to always place ion-list-header inside ion-header
Syntax:
<ion-header>
<ion-list-header>Sticky Header</ion-list-header>
</ion-header>4. In-Built Icons
Tag:
<ion-icon>Description:
This UI component provides the user with a wide range of Built-In icons which can you used in your application by just defining the attribute name of the icon we need to use. All these icons come from the Ionicons package. Not only this, if you need to import your custom created icons, that can also be done with this ion-icon tag. The In-Built icons have a range of Filled and sharp forms as well which gives the user more flexibility and designing the application as per requirement. Giving different size, different colors, and weight of icon by defining them in the attribute is another feature to ion-icon
Syntax:
<ion-icon name="search" size="small" ></ion-icon>Custom icon:
<ion-icon src="path-to-icon(svg/png/jpg)" ></ion-icon>5. Small Content Chip
Tag:
<ion-chip>Description:
This UI component provides the user to define small contents in pills or Chips structure making them highlight in your application and can be combined along with images, icons, avatar, varied colors, fonts, etc. Using ion-icon, ion-avatar along with ion-chip makes it a much more attractive and descriptive pill/chip than a pill with just a label
Syntax:
<ion-chip>
<ion-avatar>
<img src="path-to-image/icon/avatar">
</ion-avatar>
<ion-label>Name of Pill</ion-label>
<ion-icon name="icon-name"></ion-icon>
</ion-chip>6. Cards
Tag:
<ion-card>Description:
This UI component provides the user to display the content in a container that outstands the other contents in your application. Cards can consist of images, tests, avatars, links, etc. about a single subject. Cards are something that can be implemented independently or also collectively in the mobile application. Always use cards when you need to display some content that needs images, videos, text, etc. to understand the Purpose of that content easily. It’s a good practice to have non-scrollable content within the card. There are a lot of types of cards that can be used in mobile applications like, the card with the header, Card with images, Card with Background Images, etc. Customizing Ionic cards with different CSS styling and colors and avatar is also a good idea to make the Card looks attractive and self-explanatory.
Syntax:
<ion-card>
<ion-card-header>
Any Header Which Can be given to the Card
</ion-card-header>
<ion-card-content>
Content of the Card, Can be images, texts, Avatar, list
</ion-card-content>
</ion-card>7. Date Picker
Tag:
<ion-datetime>Description:
This UI component provides the user with the ability to select the date and time from the date-time picker, instead of writing down the date in input fields. One good thing about the dateTime component of ionic is that it allows the developer to use any required date-time format with minimal code. This date-time ionic component provides with the most common and user-friendly date picker UI which is used in most of the mobile applications today, with 3 sections for Day, Month and Year, and Time with AM PM selection ability.
Syntax:
<ion-datetime
pickerFormat=" DD MM YYYY "
displayFormat="DD MM YYYY" [(ngModel)]="event.timeStarts">
</ion-datetime>8. Select Dropdown
Tag:
<ion-select>Description:
This UI component provides the user with a Single-select Drop Down as well as Multi-Select Dropdown, that is users can select a single option from a list of values as well as can select multiple options from a list of values. The Ionic select is similar to the HTML5 select tag which can be used to display a list of elements in the dropdown. Using Ionic selects makes it much easier and additional features with fewer lines of code. On Mobile application, as soon as the select component is touched, the dropdown list appears on the UI, and the user can select options from that list. Multi-Select in Ionic can be achieved by just adding attribute multiple-“true”, the default value for this is always false. Also to keep any option selected by default, keep selected attribute to true.
Syntax:
<ion-select cancelText="Cancel" okText="Save" [(ngModel)]="listOfItems" >
<ion-option value="item1" selected="true">Item1</ion-option>
</ion-select>Conclusion
On the whole Ionic Framework is Building Block especially for Front End UI and UX developers, who wish to develop mobile applications but do not have much knowledge on Native applications with Android and iOS programming. There is a lot more and wide scope in Ionic providing a wide change of mobile interactions from gestures to animations and also latest versions going forward will be compatible with Vue Developers (Currently in Beta). Also, it’s can be used as a standalone without the need for any particular framework.
Recommended Articles
This is a guide to Ionic Components. Here we discuss the list of Ionic Components along with the tag, description, and syntax. You may also have a look at the following articles to learn more –
