EDUCBA Logo

EDUCBA

MENUMENU
  • Explore
    • EDUCBA Pro
    • PRO Bundles
    • Featured Skills
    • New & Trending
    • Fresh Entries
    • Finance
    • Data Science
    • Programming and Dev
    • Excel
    • Marketing
    • HR
    • PDP
    • VFX and Design
    • Project Management
    • Exam Prep
    • All Courses
  • Blog
  • Enterprise
  • Free Courses
  • Log in
  • Sign Up
Home Software Development Software Development Tutorials Software Development Basics Ionic Components
 

Ionic Components

Kinjal Lodha
Article byKinjal Lodha
EDUCBA
Reviewed byRavi Rathore

Updated April 20, 2023

Ionic Components

 

 

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.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

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 –

  1. What is Ionic Framework?
  2. React Native Search Bar
  3. React Native Modal
  4. React Native Vector Icons

Primary Sidebar

Footer

Follow us!
  • EDUCBA FacebookEDUCBA TwitterEDUCBA LinkedINEDUCBA Instagram
  • EDUCBA YoutubeEDUCBA CourseraEDUCBA Udemy
APPS
EDUCBA Android AppEDUCBA iOS App
Blog
  • Blog
  • Free Tutorials
  • About us
  • Contact us
  • Log in
Courses
  • Enterprise Solutions
  • Free Courses
  • Explore Programs
  • All Courses
  • All in One Bundles
  • Sign up
Email
  • [email protected]

ISO 10004:2018 & ISO 9001:2015 Certified

© 2025 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA Login

Forgot Password?

🚀 Limited Time Offer! - 🎁 ENROLL NOW