"Once we started using Mobiscroll, our conversions
have improved and the experience became
much more delightful!"
Daniel Maldonado, Sr. Web Designer
Ecommission Financial Services
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 5 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 5 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 appSimply 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.
<ion-content class="padding">
<label class="item item-input">
<span class="input-label">Date</span>
<input type="text" ng-model="selectedDate" mobiscroll-date>
</label>
</ion-content>
<ion-content padding>
<ion-item>
<ion-label>Date</ion-label>
<ion-input [(ngModel)]="selectedDate" mbsc-date ></ion-input>
</ion-item>
</ion-content>
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.
|
Mobiscroll
Advanced components
|
Ionic
Basic component set
|
|
|---|---|---|
| Responsive calendar | ||
| Color picker control | ||
| Event calendar | ||
| Image scroller | ||
| Measurement scroller & conversion engine | ||
| Number scroller | ||
| Numeric keypad control | ||
| Range for date and time | ||
| Generic scroller control | ||
| Timer with countdown and stopwatch | ||
| Timespan scroller | ||
| Hierarchical treelist | ||
| Option list | ||
| Scroll view | ||
| 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 | |
| Scalable icons | Available | |
| Lists | Available | |
| Loading and progress indicatiors | Available | |
| Alerts and toast | Available | |
| Popovers and modals | Available | |
| Grid layout | Available | |
| Toolbar | ||
| Floating Action Button | ||
We'll support you through the whole process of getting up & running
Join great companies who take their UI seriously
"We are using Mobiscroll 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
