CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG 112.6K. Cross-platform apps. Powered by the Web. Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. Pre-designed UI components. Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a

INSTALLING IONIC

Install the Ionic CLI. Before proceeding, make sure your computer has Node.js installed. See these instructions to set up an environment for Ionic. Install the Ionic CLI with npm: $ npm install-g @ionic/cli If there was a previous installation of the Ionic CLI, it will need IONIC VUE - IONIC DOCUMENTATION Native Tooling. Capacitor is the official cross-platform app runtime used to make your Ionic Vue web app run natively on iOS, Android, and the web. While there are no known technical limitations to using Ionic Vue with Cordova plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for Ionic Vue in the

DATA STORAGE

There are variety of options available for storing data within an Ionic app. Here are two official Ionic options: Ionic Secure Storage. For teams building mission-critical apps or requiring encryption support, Ionic Secure Storage is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android.

UI COMPONENTS

UI Components. Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the API Index for a complete list of each component and

sub-component.

DEPLOYING TO IOS AND ANDROID Before running this app on an Android device, there's a couple of steps to complete. First, run the Capacitor open command, which opens the native Android project in Android Studio: $ ionic cap open android. Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the AndroidManifest.xml file.

LOADINGCONTROLLER

LoadingController. An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation. ION-TABS: TAB-BASED COMPONENT FOR APP TOP-LEVEL NAVIGATION 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 PROGRESSIVE WEB APPS IN ANGULAR The @angular/pwa package will automatically add a service worker and an app manifest to the app. To add this package to the app, run: $ ng add @angular/pwa. Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA. By default, the @angular/pwa package comes with the Angular logo for the

app

IONICONS V3: OPEN-SOURCE APPLICATION ICONS FOR IOS AND ANDROID Ionicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options. CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG 112.6K. Cross-platform apps. Powered by the Web. Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. Pre-designed UI components. Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a

INSTALLING IONIC

Install the Ionic CLI. Before proceeding, make sure your computer has Node.js installed. See these instructions to set up an environment for Ionic. Install the Ionic CLI with npm: $ npm install-g @ionic/cli If there was a previous installation of the Ionic CLI, it will need IONIC VUE - IONIC DOCUMENTATION Native Tooling. Capacitor is the official cross-platform app runtime used to make your Ionic Vue web app run natively on iOS, Android, and the web. While there are no known technical limitations to using Ionic Vue with Cordova plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for Ionic Vue in the

DATA STORAGE

There are variety of options available for storing data within an Ionic app. Here are two official Ionic options: Ionic Secure Storage. For teams building mission-critical apps or requiring encryption support, Ionic Secure Storage is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android.

UI COMPONENTS

UI Components. Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the API Index for a complete list of each component and

sub-component.

DEPLOYING TO IOS AND ANDROID Before running this app on an Android device, there's a couple of steps to complete. First, run the Capacitor open command, which opens the native Android project in Android Studio: $ ionic cap open android. Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the AndroidManifest.xml file.

LOADINGCONTROLLER

LoadingController. An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation. ION-TABS: TAB-BASED COMPONENT FOR APP TOP-LEVEL NAVIGATION 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 PROGRESSIVE WEB APPS IN ANGULAR The @angular/pwa package will automatically add a service worker and an app manifest to the app. To add this package to the app, run: $ ng add @angular/pwa. Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA. By default, the @angular/pwa package comes with the Angular logo for the

app

IONICONS V3: OPEN-SOURCE APPLICATION ICONS FOR IOS AND ANDROID Ionicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options. IONIC VUE - IONIC DOCUMENTATION @ionic/vue combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.. Vue Version Support. Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue ION-MODAL: IONIC FRAMEWORK API DOCS ion-modal. 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. PLATFORM | IONIC PLATFORM TO CUSTOMIZE APPS TO FIT ANY DEVICE platforms() => string Depending on what device you are on, platforms can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone. ready() => Promise COLORS - IONIC DOCUMENTATION Layered Colors. Each color consists of the following properties: a base, contrast, shade, and tint.The base and contrast colors also require a rgb property which is the same color, just in rgb format.See The Alpha Problem for an explanation of why the rgb property is also needed. Select from the dropdown below to see all of the default colors Ionic provides and their variations. ION-ALERT: IONIC FRAMEWORK API DOCS ion-alert. 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

SUPPORT POLICY

Apr 5, 2017. V1. End of Support. May 12, 2015. Jan 25, 2017. Jan 25, 2017. Maintenance: Only critical bug and security fixes. No major feature improvements. Extended Support: For teams and organizations that require additional long term support, Ionic has extended support

options available.

CONFIGURING

Environment Variables. The CLI will look for the following environment variables: IONIC_CONFIG_DIRECTORY: The directory of the global CLI config.Defaults to ~/.ionic.; IONIC_HTTP_PROXY: Set a URL for proxying all CLI requests through.See Using a Proxy.The CLI will also look for HTTP_PROXY and HTTPS_PROXY, both of which npm use.; IONIC_EMAIL /

IONIC_PASSWORD:

ION-MENU-BUTTON: IONIC FRAMEWORK API DOCS Color of the menu button. --color-focused. Color of the menu button when focused with the tab key. --color-hover. Color of the menu button on hover. --padding-bottom. Bottom padding of the button. --padding-end. Right padding if direction is left-to-right, and left

padding if

ION-CHECKBOX: IONIC FRAMEWORK API DOCS ion-checkbox. 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. DIAGNOSTIC - IONIC DOCUMENTATION Checks whether device hardware features are enabled or available to the app, e.g. camera, GPS, wifi CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG 112.6K. Cross-platform apps. Powered by the Web. Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. Pre-designed UI components. Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a

ANDROID DEVELOPMENT

Actual Android hardware can also be used for Ionic app development. But first, the device must be set up for development. The following documentation is a quick way to set up Android devices for development. For more detailed instructions and information, see the Android documentation. Enable USB debugging on the device. ION-SELECT: IONIC FRAMEWORK API DOCS ion-select. 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 used with child elements. If the child option is not given a value

DATA STORAGE

There are variety of options available for storing data within an Ionic app. Here are two official Ionic options: Ionic Secure Storage. For teams building mission-critical apps or requiring encryption support, Ionic Secure Storage is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android. ION-MODAL: IONIC FRAMEWORK API DOCS ion-modal. 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. IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories.

TOASTCONTROLLER

ToastController. Improve this doc. 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

SUPPORT POLICY

Apr 5, 2017. V1. End of Support. May 12, 2015. Jan 25, 2017. Jan 25, 2017. Maintenance: Only critical bug and security fixes. No major feature improvements. Extended Support: For teams and organizations that require additional long term support, Ionic has extended support

options available.

PROGRESSIVE WEB APPS IN ANGULAR The @angular/pwa package will automatically add a service worker and an app manifest to the app. To add this package to the app, run: $ ng add @angular/pwa. Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA. By default, the @angular/pwa package comes with the Angular logo for the

app

LOADINGCONTROLLER

LoadingController. An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation. CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG 112.6K. Cross-platform apps. Powered by the Web. Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. Pre-designed UI components. Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a

ANDROID DEVELOPMENT

Actual Android hardware can also be used for Ionic app development. But first, the device must be set up for development. The following documentation is a quick way to set up Android devices for development. For more detailed instructions and information, see the Android documentation. Enable USB debugging on the device. ION-SELECT: IONIC FRAMEWORK API DOCS ion-select. 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 used with child elements. If the child option is not given a value

DATA STORAGE

There are variety of options available for storing data within an Ionic app. Here are two official Ionic options: Ionic Secure Storage. For teams building mission-critical apps or requiring encryption support, Ionic Secure Storage is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android. ION-MODAL: IONIC FRAMEWORK API DOCS ion-modal. 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. IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories.

TOASTCONTROLLER

ToastController. Improve this doc. 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

SUPPORT POLICY

Apr 5, 2017. V1. End of Support. May 12, 2015. Jan 25, 2017. Jan 25, 2017. Maintenance: Only critical bug and security fixes. No major feature improvements. Extended Support: For teams and organizations that require additional long term support, Ionic has extended support

options available.

PROGRESSIVE WEB APPS IN ANGULAR The @angular/pwa package will automatically add a service worker and an app manifest to the app. To add this package to the app, run: $ ng add @angular/pwa. Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA. By default, the @angular/pwa package comes with the Angular logo for the

app

LOADINGCONTROLLER

LoadingController. An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation. ION-ROW: IONIC FRAMEWORK API DOCS Rows are horizontal components of the grid system and contain varying numbers of columns.They ensure the columns are positioned properly. See Grid Layout for more information.. Row Alignment. By default, columns will stretch to fill the entire height of the row and wrap

when necessary.

ION-LABEL - IONIC DOCUMENTATION ion-label. Label is a wrapper element that can be used in combination with ion-item , ion-input, ion-toggle, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.

DATA STORAGE

There are variety of options available for storing data within an Ionic app. Here are two official Ionic options: Ionic Secure Storage. For teams building mission-critical apps or requiring encryption support, Ionic Secure Storage is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android. HEALTH - IONIC DOCUMENTATION Installation npm install cordova-plugin-health npm install @ionic-native/health ionic cap sync ionic cordova plugin add cordova-plugin-health npm install @ionic-native/health Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team. Learn More or if you're interested in an enterprise version of this plugin Contact Us Supported Platforms PLATFORM | IONIC PLATFORM TO CUSTOMIZE APPS TO FIT ANY DEVICE platforms() => string Depending on what device you are on, platforms can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone. ready() => Promise ION-TABS: TAB-BASED COMPONENT FOR APP TOP-LEVEL NAVIGATION 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

LOADINGCONTROLLER

LoadingController. An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation. DIALOGS - IONIC DOCUMENTATION Installation npm install cordova-plugin-dialogs npm install @ionic-native/dialogs ionic cap sync ionic cordova plugin add cordova-plugin-dialogs npm install @ionic-native/dialogs Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team. Learn More or if you're interested in an enterprise version of this plugin Contact Us ION-CHECKBOX: IONIC FRAMEWORK API DOCS ion-checkbox. 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.

ION-SPINNER

CSS Custom Properties. The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on. The default spinner to use is based on the platform. The default spinner for ios is "lines", and the default for android is

"crescent".

CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG Performance obsessed Fast apps. Out-of-the-box. Ionic is built to perform and run fast on the all of the latest mobile devices. Build blazing fast apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and AOT compiling. ION-ROW: IONIC FRAMEWORK API DOCS Rows are horizontal components of the grid system and contain varying numbers of columns.They ensure the columns are positioned properly. See Grid Layout for more information.. Row Alignment. By default, columns will stretch to fill the entire height of the row and wrap

when necessary.

ANDROID DEVELOPMENT

Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web

standards

ION-SELECT: IONIC FRAMEWORK API DOCS Alternatively, depending on the browser support needed, CSS shadow parts can be used to style the select: /* Set the width to the full container and center the content */ ion-select {width: 100%; justify-content: center;} /* Set the flex in order to size the text width to its content */ ion-select::part(placeholder), ion-select::part(text) {flex: 0 0 auto;} /* Set the placeholder color

and

DATA STORAGE

There are variety of options available for storing data within an Ionic app. Here are two official Ionic options: Ionic Secure Storage. For teams building mission-critical apps or requiring encryption support, Ionic Secure Storage is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android. ION-MODAL: IONIC FRAMEWORK API DOCS 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. IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories. PROGRESSIVE WEB APPS IN ANGULAR Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web

standards

LOADINGCONTROLLER

Demo source LoadingController Improve this doc An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. IONIC CORDOVA PLATFORM: REMOVE, ADD, & MANAGE CORDOVA Manage, add, and remove Cordova platforms with ionic cordova platform. Like running cordova directly, with added resources and providing

friendly checks.

CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG Performance obsessed Fast apps. Out-of-the-box. Ionic is built to perform and run fast on the all of the latest mobile devices. Build blazing fast apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and AOT compiling. ION-ROW: IONIC FRAMEWORK API DOCS Rows are horizontal components of the grid system and contain varying numbers of columns.They ensure the columns are positioned properly. See Grid Layout for more information.. Row Alignment. By default, columns will stretch to fill the entire height of the row and wrap

when necessary.

ANDROID DEVELOPMENT

Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web

standards

ION-SELECT: IONIC FRAMEWORK API DOCS Alternatively, depending on the browser support needed, CSS shadow parts can be used to style the select: /* Set the width to the full container and center the content */ ion-select {width: 100%; justify-content: center;} /* Set the flex in order to size the text width to its content */ ion-select::part(placeholder), ion-select::part(text) {flex: 0 0 auto;} /* Set the placeholder color

and

DATA STORAGE

There are variety of options available for storing data within an Ionic app. Here are two official Ionic options: Ionic Secure Storage. For teams building mission-critical apps or requiring encryption support, Ionic Secure Storage is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android. ION-MODAL: IONIC FRAMEWORK API DOCS 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. IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories. PROGRESSIVE WEB APPS IN ANGULAR Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web

standards

LOADINGCONTROLLER

Demo source LoadingController Improve this doc An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. IONIC CORDOVA PLATFORM: REMOVE, ADD, & MANAGE CORDOVA Manage, add, and remove Cordova platforms with ionic cordova platform. Like running cordova directly, with added resources and providing

friendly checks.

IONIC V3 APP DEVELOPMENT TUTORIAL start will tell the CLI create a new app.; MyIonicProject will be the directory name and the app name from your project.; tutorial will be the starter template for your project.; Along with creating your project, this will also install node modules for the application, and prompt you if you want Cordova set up.. Along with the tutorial template, Ionic also provides the following official IONIC VUE - IONIC DOCUMENTATION @ionic/vue combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.. Vue Version Support. Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to ION-TABS: TAB-BASED COMPONENT FOR APP TOP-LEVEL NAVIGATION 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 PLATFORM | IONIC PLATFORM TO CUSTOMIZE APPS TO FIT ANY DEVICE platforms() => string Depending on what device you are on, platforms can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone. ready() => Promise HEALTH - IONIC DOCUMENTATION Installation npm install cordova-plugin-health npm install @ionic-native/health ionic cap sync ionic cordova plugin add cordova-plugin-health npm install @ionic-native/health Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team. Learn More or if you're interested in an enterprise version of this plugin Contact Us Supported Platforms ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP Ion-Grid is a mobile-first flexbox system to build custom application display layouts with a 12 column layout and different breakpoints based on screen size.

SUPPORT POLICY

Maintenance: Only critical bug and security fixes.No major feature improvements. Extended Support: For teams and organizations that require additional long term support, Ionic has extended support options available.To learn more, see our Enterprise offerings. Compatibility Recommendations. The Ionic team has compiled a set of recommendations for using the Ionic Framework in conjunction

ION-SPINNER

The ion-spinner component provides a variety of animated SVG spinners. These icons indicate that the app is loading or performing another

process to wait on.

DIALOGS - IONIC DOCUMENTATION Installation npm install cordova-plugin-dialogs npm install @ionic-native/dialogs ionic cap sync ionic cordova plugin add cordova-plugin-dialogs npm install @ionic-native/dialogs Ionic Enterprise comes with fully supported and maintained plugins from the Ionic Team. Learn More or if you're interested in an enterprise version of this plugin Contact Us

TOASTCONTROLLER

Demo source ToastController Improve this doc 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. CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG 112.6K. Cross-platform apps. Powered by the Web. Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. Pre-designed UI components. Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a ION-MODAL: IONIC FRAMEWORK API DOCS ion-modal. 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. ION-SELECT: IONIC FRAMEWORK API DOCS ion-select. 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 used with child elements. If the child option is not given a value IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories. ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP ion-grid. 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. ION-SLIDES: MOBILE TOUCH SLIDER WITH BUILT-IN & CUSTOM Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android. IONICONS V3: OPEN-SOURCE APPLICATION ICONS FOR IOS AND ANDROID Ionicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options.

LOADINGCONTROLLER

LoadingController. An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation.

LAUNCH NAVIGATOR

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

ION-SPINNER

CSS Custom Properties. The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on. The default spinner to use is based on the platform. The default spinner for ios is "lines", and the default for android is

"crescent".

CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG 112.6K. Cross-platform apps. Powered by the Web. Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. Pre-designed UI components. Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a ION-MODAL: IONIC FRAMEWORK API DOCS ion-modal. 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. ION-SELECT: IONIC FRAMEWORK API DOCS ion-select. 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 used with child elements. If the child option is not given a value IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories. ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP ion-grid. 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. ION-SLIDES: MOBILE TOUCH SLIDER WITH BUILT-IN & CUSTOM Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android. IONICONS V3: OPEN-SOURCE APPLICATION ICONS FOR IOS AND ANDROID Ionicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options.

LOADINGCONTROLLER

LoadingController. An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation.

LAUNCH NAVIGATOR

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

ION-SPINNER

CSS Custom Properties. The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on. The default spinner to use is based on the platform. The default spinner for ios is "lines", and the default for android is

"crescent".

OPEN-SOURCE UI TOOLKIT TO CREATE YOUR OWN MOBILE OR Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular, React, and Vue. Get started building by installing Ionic or following our First App Tutorial to learn the main concepts. IONIC VUE - IONIC DOCUMENTATION @ionic/vue combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.. Vue Version Support. Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue PLATFORM | IONIC PLATFORM TO CUSTOMIZE APPS TO FIT ANY DEVICE platforms() => string Depending on what device you are on, platforms can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone. ready() => Promise

UI COMPONENTS

UI Components. Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the API Index for a complete list of each component and

sub-component.

ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP ion-grid. 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. ION-INPUT: IONIC FRAMEWORK API DOCS ion-input. 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 ION-CARD: IONIC FRAMEWORK API DOCS ion-card. 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

DARK MODE - IONIC DOCUMENTATION Currently, the prefers-color-scheme media query has limited browser support, so users will not be able to benefit from having the dark mode applied using this media query in certain browsers.However, the dark mode can still be applied by using a CSS class fallback. CSS Class Fallback. As a fallback method for devices that don't support the media query, the dark mode can be applied by ION-CHECKBOX: IONIC FRAMEWORK API DOCS ion-checkbox. 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. TOGGLE | ION-TOGGLE: CUSTOM TOGGLE BUTTON FOR IONIC Because these variables set the background property, which is a shorthand, it can accept any value that the background property accepts. A more complex case may involve adding an image to the handle background. ion-toggle {--handle-background-checked: #fff url (/assets/power-icon.png) no-repeat center / CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG 112.6K. Cross-platform apps. Powered by the Web. Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. Pre-designed UI components. Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a ION-MODAL: IONIC FRAMEWORK API DOCS ion-modal. 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. ION-SELECT: IONIC FRAMEWORK API DOCS ion-select. 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 used with child elements. If the child option is not given a value IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories. ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP ion-grid. 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. ION-SLIDES: MOBILE TOUCH SLIDER WITH BUILT-IN & CUSTOM Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android. IONICONS V3: OPEN-SOURCE APPLICATION ICONS FOR IOS AND ANDROID Ionicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options.

LOADINGCONTROLLER

LoadingController. An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation.

LAUNCH NAVIGATOR

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

ION-SPINNER

CSS Custom Properties. The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on. The default spinner to use is based on the platform. The default spinner for ios is "lines", and the default for android is

"crescent".

CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG 112.6K. Cross-platform apps. Powered by the Web. Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive apps. Pre-designed UI components. Ionic’s UI components look great on all mobile devices and platforms. Start with pre-made components, typography, and a ION-MODAL: IONIC FRAMEWORK API DOCS ion-modal. 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. ION-SELECT: IONIC FRAMEWORK API DOCS ion-select. 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 used with child elements. If the child option is not given a value IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories. ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP ion-grid. 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. ION-SLIDES: MOBILE TOUCH SLIDER WITH BUILT-IN & CUSTOM Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android. IONICONS V3: OPEN-SOURCE APPLICATION ICONS FOR IOS AND ANDROID Ionicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options.

LOADINGCONTROLLER

LoadingController. An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation.

LAUNCH NAVIGATOR

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

ION-SPINNER

CSS Custom Properties. The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on. The default spinner to use is based on the platform. The default spinner for ios is "lines", and the default for android is

"crescent".

OPEN-SOURCE UI TOOLKIT TO CREATE YOUR OWN MOBILE OR Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular, React, and Vue. Get started building by installing Ionic or following our First App Tutorial to learn the main concepts. IONIC VUE - IONIC DOCUMENTATION @ionic/vue combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.. Vue Version Support. Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue PLATFORM | IONIC PLATFORM TO CUSTOMIZE APPS TO FIT ANY DEVICE platforms() => string Depending on what device you are on, platforms can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone. ready() => Promise

UI COMPONENTS

UI Components. Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the API Index for a complete list of each component and

sub-component.

ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP ion-grid. 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. ION-INPUT: IONIC FRAMEWORK API DOCS ion-input. 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 ION-CARD: IONIC FRAMEWORK API DOCS ion-card. 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

ION-ITEM: IONIC FRAMEWORK API DOCS Text Alignment. Items left align text and add an ellipsis when the text is wider than the item. See the CSS Utilities Documentation for classes that can be added to to transform the text. Input Highlight Highlight Height. Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or

invalid.

ION-CHECKBOX: IONIC FRAMEWORK API DOCS ion-checkbox. 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. TOGGLE | ION-TOGGLE: CUSTOM TOGGLE BUTTON FOR IONIC Because these variables set the background property, which is a shorthand, it can accept any value that the background property accepts. A more complex case may involve adding an image to the handle background. ion-toggle {--handle-background-checked: #fff url (/assets/power-icon.png) no-repeat center / CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG Performance obsessed Fast apps. Out-of-the-box. Ionic is built to perform and run fast on the all of the latest mobile devices. Build blazing fast apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and AOT compiling. ION-MODAL: IONIC FRAMEWORK API DOCS If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read Style Placement in the Angular section below for more information. ion-modal works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of 0.This is to avoid the effect of shadows and backdrops getting IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories. ION-SELECT: IONIC FRAMEWORK API DOCS Alternatively, depending on the browser support needed, CSS shadow parts can be used to style the select: /* Set the width to the full container and center the content */ ion-select {width: 100%; justify-content: center;} /* Set the flex in order to size the text width to its content */ ion-select::part(placeholder), ion-select::part(text) {flex: 0 0 auto;} /* Set the placeholder color

and

ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP Ion-Grid is a mobile-first flexbox system to build custom application display layouts with a 12 column layout and different breakpoints based on screen size. ION-SLIDES: MOBILE TOUCH SLIDER WITH BUILT-IN & CUSTOM Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android.

LOADINGCONTROLLER

Demo source LoadingController Improve this doc An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.

LAUNCH NAVIGATOR

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins. IONICONS V3: OPEN-SOURCE APPLICATION ICONS FOR IOS AND ANDROID Ionicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options.

ION-SPINNER

The ion-spinner component provides a variety of animated SVG spinners. These icons indicate that the app is loading or performing another

process to wait on.

CROSS-PLATFORM MOBILE APP DEVELOPMENT: IONIC FRAMEWORKGETTING STARTEDDOCUMENTATIONUI COMPONENTSLOG INPRICINGBLOG Performance obsessed Fast apps. Out-of-the-box. Ionic is built to perform and run fast on the all of the latest mobile devices. Build blazing fast apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and AOT compiling. ION-MODAL: IONIC FRAMEWORK API DOCS If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read Style Placement in the Angular section below for more information. ion-modal works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of 0.This is to avoid the effect of shadows and backdrops getting IONIC GENERATE: CREATE PAGES, COMPONENTS, & ANGULAR FEATURES Automatically create framework features with Ionic Generate. This command uses the Angular CLI to generate features such as pages, components, directives, services, and more. For a full list of available types, use npx ng g --help For a list of options for a types, use npx ng g --help; You can specify a path to nest your feature within any number of subdirectories. ION-SELECT: IONIC FRAMEWORK API DOCS Alternatively, depending on the browser support needed, CSS shadow parts can be used to style the select: /* Set the width to the full container and center the content */ ion-select {width: 100%; justify-content: center;} /* Set the flex in order to size the text width to its content */ ion-select::part(placeholder), ion-select::part(text) {flex: 0 0 auto;} /* Set the placeholder color

and

ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP Ion-Grid is a mobile-first flexbox system to build custom application display layouts with a 12 column layout and different breakpoints based on screen size. ION-SLIDES: MOBILE TOUCH SLIDER WITH BUILT-IN & CUSTOM Ion-Slides is a multi-section container which offers custom and built-in mobile touch slider animation effects. See how Ion-Slides works with iOS and Android.

LOADINGCONTROLLER

Demo source LoadingController Improve this doc An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app.

LAUNCH NAVIGATOR

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins. IONICONS V3: OPEN-SOURCE APPLICATION ICONS FOR IOS AND ANDROID Ionicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options.

ION-SPINNER

The ion-spinner component provides a variety of animated SVG spinners. These icons indicate that the app is loading or performing another

process to wait on.

OPEN-SOURCE UI TOOLKIT TO CREATE YOUR OWN MOBILE OR Overview. Ionic Framework focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as Angular, React, or Vue.Alternatively, it can be used standalone without any frontend framework using a simple script include.If you’d like to learn more about Ionic Framework IONIC VUE - IONIC DOCUMENTATION @ionic/vue combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers.. Vue Version Support. Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue NATIVE APP DEVELOPMENT WITH NO PLATFORM DEPENDENCIES Start developing native apps in the cloud as part of your mobile strategy with Ionic package and build cross platform apps for mobile, desktop and more without platform dependencies or ION-GRID: DISPLAY GRIDS TO BUILD MOBILE-FIRST CUSTOM APP Ion-Grid is a mobile-first flexbox system to build custom application display layouts with a 12 column layout and different breakpoints based on screen size.

UI COMPONENTS

Ionic Framework comes stock with a number of high-level UI components, including cards, lists, and tabs to quickly and easily build your app's user interface. ION-CARD: IONIC FRAMEWORK API DOCS The ion-card component is one of many Ionic Framework components used to build apps for Android, iOS, and Progressive Web Apps ION-INPUT: IONIC FRAMEWORK API DOCS 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. PLATFORM | IONIC PLATFORM TO CUSTOMIZE APPS TO FIT ANY DEVICE platforms() => string Depending on what device you are on, platforms can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone. ready() => Promise IONICONS V3: OPEN-SOURCE APPLICATION ICONS FOR IOS AND ANDROID Ionicons is an open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop applications. Ionicons have both Material Design and iOS options. TOGGLE | ION-TOGGLE: CUSTOM TOGGLE BUTTON FOR IONIC Because these variables set the background property, which is a shorthand, it can accept any value that the background property accepts. A more complex case may involve adding an image to the handle background. ion-toggle {--handle-background-checked: #fff url (/assets/power-icon.png) no-repeat center /

* Appflow

* Getting Started

* Docs

_ _

PLATFORM

* Enterprise

* Appflow

* Pricing

RESOURCES

* Documentation

* Resource Center

* Community

* Blog

SOLUTIONS

* Integrations

* Biometric Sign in

* User Authentication

GET HELP

* Support

* Advisory

* Training

*

Log in Sign up

Black Lives Matter.

We support the Equal Justice Initiative Toggle navigation __

* Support

*

* Topics

* Help Center

* Trusted Partners

* Log in

* Get Started

* Platform

*

* Build

* Framework Mobile UI toolkit * Native Native API library

*

* Capacitor Native runtime bridge * Stencil Web component compiler

* Secure

* Identity Vault Biometric authentication * Auth Connect Secure single sign-on * Offline Storage Secure data storage

* Deliver

* Appflow Mobile CI/CD for apps

* Services

* Enterprise Support Accelerate your mobile development lifecycle with help from Ionic experts * Professional Services Tackle your biggest challenges with tailored solutions and expert services * Expert Training Empower your team with the skills to deliver amazing apps, faster

* Developers

* Ionic Docs

*

* Topics

* Installation

* UI Components

* Native APIs

* React

* Angular

* CLI

* Community

* Hub

* YouTube

* GitHub

* Twitter

* Forum

* Why Ionic?

* Ionic vs React Native * Capacitor vs Cordova

* Ionic vs Flutter

* Hybrid vs Native

* What are Hybrid Apps * Deliverying Great UX

* Enterprise

* Pricing

* Blog

* Resources

IONIC FRAMEWORK 5

DESIGN. ANIMATION. PERFORMANCE. * New UI components and gestures * Brand new custom animations API * New icons, colors, and theming * Official React & Angular

integrations

Get Started

Try the new App Wizard!

* 40K

* 13.2K

* 108.3K

enter email to join newsletter LEARN THE DIFFERENCES BETWEEN HYBRID AND NATIVE APPS. WE BREAK DOWN ALL THE MYTHS AND MISCONCEPTIONS.

Read our Book

GET ALL THE FACTS YOU NEED TO MAKE THE RIGHT DECISION. _WE WROTE A GUIDE ON EVERYTHING YOU NEED TO KNOW._

Read our free eBook

×

BEFORE WE SEND IT… We just need some basic information so we can send the eBook your way.

First Name*

Last Name*

Email *

Company name*

Country (Select One)*

Please SelectUnited

StatesAfghanistanAlbaniaAlgeriaAndorraAngolaAnguillaAntigua & BarbudaArgentinaArmeniaAustraliaAustriaAzerbaijanBadenBahamasBahrainBangladeshBarbadosBelarusBelgiumBelizeBeninBermudaBhutanBoliviaBosnia & HerzegovinaBotswanaBrazilBruneiBulgariaBurkina FasoBurundiCabo VerdeCambodiaCameroonCanadaCayman IslandsCentral African RepublicChadChileChinaColombiaComorosCosta RicaCroatiaCubaCyprusCzech RepublicCzechoslovakiaDemocratic Republic of the CongoDenmarkDjiboutiDominicaDominican RepublicEcuadorEgyptEl

SalvadorEquatorial

GuineaEritreaEstoniaEswatiniEthiopiaFijiFinlandFranceFrench GuianaGabonGambiaGambia, TheGeorgiaGermanyGhanaGreeceGrenadaGuadeloupeGuatemalaGuineaGuinea-BissauGuyanaHaitiHondurasHungaryIcelandIndiaIndonesiaIranIraqIrelandIsraelItalyJamaicaJapanJordanKazakhstanKenyaKiribatiKosovoKuwaitKyrgyz

Republic

(Kyrgyzstan)KyrgyzstanLaosLatviaLebanonLesothoLiberiaLibyaLiechtensteinLithuaniaLuxembourgMadagascarMalawiMalaysiaMaldivesMaliMaltaMarshall IslandsMartiniqueMauritaniaMauritiusMayotteMexicoMicronesiaMoldovaMonacoMongoliaMontenegroMontserratMoroccoMozambiqueMyanmar/BurmaNamibiaNauruNepalNetherlandsNew ZealandNicaraguaNigerNigeriaNorth KoreaNorth MacedoniaNorwayOmanPacific IslandsPakistanPalauPanamaPapua New GuineaParaguayPeruPhilippinesPolandPortugalPuerto RicoQatarRepublic of the CongoReunionRomaniaRussian FederationRwandaSaint Kitts and NevisSaint LuciaSaint Vincent and the GrenadinesSaint Vincent's & GrenadinesSamoaSan MarinoSao Tome and PrincipeSaudi ArabiaSenegalSerbiaSeychellesSierra LeoneSingaporeSlovakiaSloveniaSolomon IslandsSolomon Islands 1SomaliaSouth AfricaSouth KoreaSouth SudanSpainSri LankaSudanSurinameSwazilandSwedenSwitzerlandSyriaTajikistanTanzaniaThailandTimor LesteTimor-LesteTogoTongaTrinidad & TobagoTrinidad and TobagoTunisiaTurkeyTurkmenistanTurks & Caicos IslandsTuvaluUgandaUkraineUnion of Soviet Socialist Republics*United

Arab EmiratesUnited

KingdomUruguayUzbekistanVanuatuVenezuelaVietnamVirgin Islands (UK)Virgin Islands (US)YemenZambiaZimbabweCôte d'Ivoire First Campaign Conversion

utm_medium

utm_campaign

utm_content

utm_term

utm_source

CROSS-PLATFORM APPS. BUILT WITH THE WEB. Free and open source, Ionic offers a library of mobile-optimized UI components, gestures, and tools for building fast, highly interactive

apps.

*

BEAUTIFUL, REUSABLE COMPONENTS Ionic’s UI components display beautifully on all mobile devices and platforms. Start with ready-made components, typography, and a gorgeous base theme that adapts to each platform.

*

WRITE ONCE, RUN ANYWHERE Ionic enables web developers to ship apps to the app stores and as a PWA with a single shared code base. With Ionic’s Adaptive Styling

,

your app looks and feels at home on every platform and device.

*

DEVELOPER FRIENDLY TOOLING Create, build, test, and deploy your app with a powerful CLI . Access features like Live Reload, cross-platform deployments, and integrations. You can even use the CLI’s of your favorite JS frameworks. PERFORMANCE OBSESSED

BUILD FAST APPS,

FASTER THAN BEFORE.

Ionic is built to perform and run fast on all of the latest mobile devices. Build out-of-the-box blazing fast apps with a small footprint and built-in best practices like hardware accelerated transitions, touch-optimized gestures, pre-rendering, and AOT compiling.

Start building

* Up to 60FPS Scrolling on mobile and desktop * Consistent 100% Lighthouse PWA performance score * Down to 2.2S Time to

Interactive

* Up to 2X Faster than previous versions

FRAMEWORK AGNOSTIC

BUILD WITH YOUR FAVORITE FRAMEWORK. We don’t make assumptions about the tech stacks you or your team prefers to build with. That’s why Ionic is engineered to integrate seamlessly with all best frontend frameworks, including Angular, React, Vue, or even no framework at all with vanilla JavaScript.

* Start With:

*

*

*

*

100+ UI COMPONENTS

SIMPLE, DECLARATIVE UI COMPONENT DESIGN. Ionic’s components are written in HTML, CSS, and JavaScript, making it easily build beautiful, high quality UI’s that perform great

everywhere.

* Card

* Button

* List Item

,See All iOSAndroid

*

Card Subtitle Card Title

Here’s a small text description for the card component. Nothing more, nothing less.

Action

*

Default

Anchor

Primary Secondary Tertiary Success Warning Danger Light Medium Dark

*

Discover

Music we think you'll love.

{albums.map(album =>

{album.title}

{album.artist}, {album.year}

)}

*

*