Mobiscroll for Ionic Fill the missing UI gaps and meet customer expectations
Ionic components with a unified look & feel for shipping great apps
Build the app your clients and customers need and want
Get those five star app store reviews and enjoy engaged audiences
Make sure to impress with premium UI and amazing UX
Ionic Framework helps a lot in building cross-platform hybrid and progressive web apps, but for a polished
five star experience you'll be needing more than the basic set of UI elements.
You will find a selection of components that will help you deliver great apps and meet project requirements.
The only calendar you’ll be needing for your apps with responsive and fullscreen mode. An essential control that is missing from the basic Ionic arsenal.
A more advanced date and time picker control that the basic Ionic date-time. It perfectly resembles the native pickers and their performance. Apply specific business rules for the perfect fit.
A goto solution for picking date and time ranges. Date-only, time-only or mixed date & time. You can use it with one or two inputs. There is no simple alternative for the Range in the ionic controls, other than manually implementing the validation logic and adding the necessary plumbing code.
A great alternative to the native dropdown or ionic select with support for single and multiple selection. Grouping, render on demand supported out of the box. With near pixel-perfect rendering to the native counterparts and great customization options, this is a great addition to the basic Ionic toolset.
Compact calendar view with multiple daily or recurring events. Display, short event description in the day cells or provide lengthier text in a popup. There is no built-in alternative to this in the basic Ionic control set.
Customizable color picker control for single and multiple selection with refinement capabilities. There is no alternative to this control in the basic set of Ionic controls.
Enhance selections with icons or images and help users make a better, more informed choice. This control is missing from the basic Ionic controls.
Capture and convert force, speed, mass, temperature and distance. Scroller based picker with built-in conversion engine. There is no alternative to this control in the basic Ionic toolset.
Capture and work with integer and decimal numbers with this scroller control. There is no alternative available in the basic set of Ionic controls.
Use this versatile numpad for a variety of tasks, including: number, date, time, currency, timespan and PIN entry. There is no alternative available in the basic Ionic toolset for this control.
Make scheduling and adding past recordings easy by letting users enter timespans of seconds, minutes, hours up to years. There is no built in control in the basic Ionic set shipping with such functionality.
Help users pick from hierarchies in the same view. Think of it as multiple select scrollers without the need of switching context. There is no such control available in the basic Ionic set.
This is a live example running in an actual Ionic 4 app. Use the drawer to try all the different components.
Play with the theme and language configuration.
This is a live demo app that runs inside an Ionic 4 project. You can easily try different themes and language options from within the app.
Simply plug Mobiscroll into your existing Ionic app and create Mobiscroll component instances as you need them on various ionic elements like ion-inputs.Download the Ionic Kitchen Sink app
Simply install it like any other Ionic plugin or component.
Use the Mobiscroll CLI and get the packages you need from NPM.
Step 1. Install Mobiscroll CLI.
$ npm install -g @mobiscroll/cli
Step 2. Configure Mobiscroll in your Ionic app.
$ mobiscroll config ionic
Once Mobiscroll is installed in your app, use the components and directives to initialize the UI elements.
It seamlessly integrates with your Ionic workflow.
Let's take a look how Mobiscroll stacks up against the basic set of components that ship with Ionic and why it is great companion.
Basic component set
|Color picker control|
|Measurement scroller & conversion engine|
|Numeric keypad control|
|Range for date and time|
|Generic scroller control|
|Timer with countdown and stopwatch|
|Cards||Advanced features||Limited functionality|
|Date & time picker||Advanced features||Limited functionality|
|Menus and Navigation||Advanced features||Limited functionality|
|Select scroller||Advanced features||Limited functionality|
|You can integrate mobiscroll with the following ionic elements|
|Various form controls||Available with slight differences|
|Loading and progress indicatiors||Available|
|Alerts and toast||Available|
|Popovers and modals||Available|
|Floating Action Button|
Select one for the Framework license or get it in every flavor with the Component, Complete or Enterprise licenses.
We'll support you through the whole process of getting up & running
"We are using the Mobiscroll Calendar in one of our products.
Although it didn't come with the functionality we were looking for out of the box,
the support team went above and beyond to help me with the problem.
I was absolutely amazed by it and got so much more than I was expecting."
Tom Maddocks, Web Developer, Blueleaf
No problem if you have an existing project, you can easily plug Mobiscroll into your Ionic apps. Think of it as powerups.
With well thought out components and a lot of edge cases handled make your app feel and be top notch.
All the features you need for a great integration
Build and save your custom icon sets with over 2500 icons to choose from
Deliver great cross-platform web and hybrid apps with adaptable themes
Support people with disabilities and right-to-left cultures with WAI-ARIA support, Section 508, and RTL rendering
Integrate more tightly and add your own custom functionality to mobiscroll with downloadable source
Customize the look and feel of the UI to match your brand and app
Support multi-lingual apps and serve UI with the correct culture settings
Deliver great looking apps on multiple sized and shaped screens with adaptable and flexible controls
Fine tune your packages and choose to include only what you need. Save unnecessary weight from your resource files.