Ionic is an open-source mobile application development framework. In Ionic we can create the UI of our app using components. There are list of ionic components like cards, lists, tabs, alert, badge, buttons etc.
Here is a list of Ionic UI Components
Ionic Action Sheet Component
An Action Sheet is a dialog that displays a set of options. It appears on top of the app’s content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in ios mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop. Read here about ionic action sheet.
Ionic Alert Component
An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app’s content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a header, subHeader and message. Read here about ionic alert.
Ionic Badge Component
Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be use as a notification that there are additional items associated with an element and indicate how many items there are. Read here about ionic badge.
Ionic Buttons Component
Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way. Read here about ionic buttons.
Ionic Card Component
Cards are a standard piece of UI that serves as an entry point to more detailed information. A card can be a single component, but is often made up of some header, title, subtitle, and content. ion-card is broken up into several sub-components to reflect this. Please see ion-card-content, ion-card-header, ion-card-title, ion-card-subtitle. Read here about ionic card.
Ionic Checkbox Component
Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the checked property. They can also be checked programmatically by setting the checked property. Read here about ionic checkbox.
Ionic Chips Component
Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons. Read here about Ionic Chips.
Ionic Content
The content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view. Read here about ionic content.
Ionic Date and Time Pickers Component
Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native input elements of datetime-local, however, Ionic Framework’s Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values. Read here about Ionic Date and Time Pickers.
Ionic Fab Component
Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several fab-list elements with different side values. Read here about Ionic Fab.
Ionic Grid Component
The grid is a powerful mobile-first flexbox system for building custom layouts.
It is composed of three units — a grid, row(s) and column(s). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS. Read here about Ionic Grid.
Ionic Infinite Scroll Component
The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page.
The expression assigned to the ionInfinite event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the complete() method on the infinite scroll instance. Read here about Ionic Infinite Scroll.
Ionic Input Component
The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.
It is meant for text type inputs only, such as “text”, “password”, “email”, “number”, “search”, “tel”, and “url”. And It supports all standard text input events including keyup, keydown, keypress, and more. Read here about Ionic Input.
Ionic Item Component
Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more. Read here about Ionic Item.
Ionic List Component
Lists are made up of multiple rows of items which can contain text, buttons, toggles, icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.
The Lists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items. Read here about Ionic List.
Ionic Menu Component
The Menu component is a navigation drawer that slides in from the side of the current view. By default, it slides in from the left, but the side can be overridden. The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types. The menu element should be a sibling to the root content element. There can be any number of menus attached to the content. These can be controlled from the templates, or programmatically using the MenuController. Read here about Ionic Menu.
Ionic Modal Component
A Modal is a dialog that appears on top of the app’s content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases. Read here about Ionic Modal.
Ionic Navigation Component
Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app’s overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL. Read here about Ionic Navigation.
Ionic Popover Component
A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don’t fit in the navigation bar.
There are two ways to use ion-popover: inline or via the popoverController. Each method comes with different considerations, so be sure to use the approach that best fits your use case. Read here about Ionic Popover.
Ionic Progressbar Component
Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: determinate and indeterminate. Read here about Ionic Progressbar.
Ionic Icons Component
Different icons for use in web, iOS, Android, and desktop apps used to beautify our apps. Ionic Icons.
Ionic Radio Component
Radios should be used inside of an ion-radio-group. Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent ion-radio-group to the value of the radio.
When radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time. Read here about Ionic Radio.
Ionic Refresher Component
The refresher provides pull-to-refresh functionality on a content component. The pull-to-refresh pattern lets a user pull down on a list of data using touch in order to retrieve more data.
Data should be modified during the refresher’s output events. Once the async operation has completed and the refreshing should end, call complete() on the refresher. Read here about Ionic Refresher.
Ionic Searchbar Component
Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content.
A Searchbar should be used instead of an input to search lists. A clear button is displayed upon entering input in the searchbar’s text field. Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus upon click. Read here about Ionic Searchbar.
Ionic Reorder Component
Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an ion-reorder-group to provide a visual drag and drop interface.
ion-reorder is the anchor used to drag and drop the items inside of the ion-reorder-group. See the Reorder Group for more information on how to complete the reorder operation. Read here about Ionic Reorder Component.
Ionic Router Component
Apps should have a single ion-router component in the codebase. This component controls all interactions with the browser history and it aggregates updates through an event system.
ion-router is just a URL coordinator for the navigation outlets of ionic: ion-nav, ion-tabs, and ion-router-outlet.
That means the ion-router never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells ion-nav, ion-tabs, and ion-router-outlet what and when to “show” based on the browser’s URL.
In order to configure this relationship between components (to load/select) and URLs, ion-router uses a declarative syntax using JSX/HTML to define a tree of routes. Read here about Ionic Router Component.
Ionic Segments
Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be display inside of a toolbar or the main content.
Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be use instead of a segment when clicking on a control should navigate between pages. Read here about Ionic Segments.
Ionic Select Component
Selects are form controls to select an option, or options, from a set of options, similar to a native element. When a user taps the select, a dialog appears with all of the options in a large, easy to select list. A select should be use with child elements. If the child option is not given a value attribute then its text will be use as the value. If value is set on the , the selected option will be chosen based on that value. Read here about Ionic Select Component.
Ionic Slides Component
The Slides component is a multi-section container. Each section can be swipe or drag between. It contains any number of Slide components. Read here about Ionic Slides Component.
Ionic Tabs Component
Tabs are a top level navigation component to implement a tab-based navigation. The component is a container of individual Tab components. The ion-tabs component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an ion-tab-bar should be provided as a direct child of ion-tabs. Both ion-tabs and ion-tab-bar can be use as standalone elements. They don’t depend on each other to work, but they are usually use together in order to implement a tab-based navigation that behaves like a native app. The ion-tab-bar needs a slot defined in order to be projected to the right place in an ion-tabs component. Read here about Ionic Tabs Component.
Ionic Toast Component
A Toast is a subtle notification commonly used in modern applications. It can be used to provide feedback about an operation or to display a system message. The toast appears on top of the app’s content, and can be dismissed by the app to resume user interaction with the app. Read here about Ionic Toast Component.
Ionic Toggle Component
Toggles change the state of a single option. Toggles can be switch on or off by pressing or swiping them. They can also be check programmatically by setting the checked property. Read here about Ionic Toggle Component.
Ionic Toolbars Component
Toolbars are positioned above or below content. When a toolbar is placed in an it will appear fixed at the top of the content, and when it is in an it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. When placed within an , toolbars will scroll with the content. Read here about Ionic Toolbars Component.
For more Ionic Tutorials visit Ionic page.
If you like this, share this.
Comments are closed.