Module 4.5 - Ionic UI Components

Midterm Topic

Components

• Ionic apps are made of high-level building blocks called _, which allow you to quickly construct the UI for your app.

Action Sheet

• Display a set of options with the ability to confirm or cancel an action.

Alert

• Are a great way to offer the user the ability to choose a specific action or list of actions.

Badge

• Are a small component that typically communicate a numerical value to the user.

Button

• Let your users take action. They're an essential way to interact with and navigate through an app.

Card

• Are a great way to display an important piece of content, and can contain images, buttons, text, and more.

Checkbox

• Can be used to let the user know they need to make a binary decision.

Chip

• Are a compact way to display data or actions

Content

• Is the quintessential way to interact with and navigate through an app.

Data and Time Pickers

• Are used to present an interface that makes it easy for users to select dates and times.

Floating Action Button

• These are circular buttons that perform a primary action on a screen.

Icons

• Beautifully designed icons for use in web, iOS, Android, and desktop apps.

Grid

• It is a powerful mobile-first system for building custom layouts.

Infinite Scroll

• Allows you to load new data as the user scrolls through your app.

Input

• provides a way for users to enter data in your app.

Item

• are an all-purpose UI container that can be used as part of a list.

List

• can display rows of information, such as a contact list, playlist, or menu.

Navigation

• Is how users move between different pages in your app.

Menu

• are a common navigation pattern. They can be permanently on-screen, or revealed when needed.

Modal

• They slide in and off screen to display a temporary UI and are often used for login or sign-up pages.

Popover

• Provides an easy way to present information or options without changing contexts.

Progress Indicators

• visualize the progression of an operation or activity.

Radio

• allow you to present a set of exclusive options.

Refresher

• provides pull-to-refresh functionality on a content component.

Searchbar

• is used to search or filter items, usually from a toolbar.

Reorder

• lets users drag and drop to reorder a list of items.

Routing

• allows navigation based on the current path.

Segment

• provide a set of exclusive buttons that can be used as a filter or view switcher.

Select

• is similar to the native HTML select, with a few improvements to sorting and selecting.

Slides

• They make it easy to create complex UI such as galleries, tutorials, and page-based layouts.

Tabs

• enable tabbed navigation, a standard navigation pattern in modern apps.

Toast

• is used to show a notification over the top of an app's content. It can be temporary or dismissable.

Toggle

• are an input for binary options, often used for options and switches.

Toolbar

• are used to house information and actions relating to your app.

Typography

• Text is used to style or change the color of text within an application

Range

• Lets users select a value by dragging a knob along a track

Media

• A collection of media components, including avatars, icons, images, and thumbnails. designed to enhance visual content

Accordion

• Provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information

Breadcrumbs

• Are navigation items that are used to indicate where a user is on an app