Advanced Angular picker component
Use it in responsive webapps and Ionic Angular projects with desktop and mobile optimized look & feel
Advanced select component for single and multiple value selection. Provides a great alternative to the ion-select with enhanced UX.
Can be used as a component along with other mobiscroll form elements or as a directive on any ion-input or field.
Shipping with useful features:
- Single or multiple value selection
- Group header and list segmentation
- On demand rendering for long lists
- Built in support for invalids and un-selectable values
- Filtering and autocomplete with type ahead
- Circular wheels
- Multiple theme support
- Modal, popup and inline display support
- RTL Support
- Full localization
As part of Pickers & dropdowns it can be picked up with the Framework and Complete licenses or with the component license.
Interested in scroller controls? Other demos that could be useful:
Select demos available for other frameworks.
Viewing demos & code for
Select - Mobile & Desktop usage
Use the select for both mobile and desktop or set it up responsively. The main difference between the two rendering modes - controlled by the touchUi setting - is how the component is laid out.
When set to false the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.
Select - App & Website usage
Use it on any custom input or with Mobiscroll form fields. The select is shown on input focus, but it can also be triggered on a button click or it can be embedded directly into the page.
Let’s say you already have a form and you want a custom dropdown. You can use it on existing fields or new fields.
Select - Mobile display modes
Different display modes can be used for mobile and desktop. On mobile, the select can be rendered at the top or bottom of the screen, in the center of the screen, anchored to an input or any object for that matter and it can also be embedded in any inline content.
Select - Desktop display modes
Use the available display modes on mobile and desktop. On larger screens you have slightly different rendering options suitable for the large form-factor and pointer interaction. Use the top, bottom and center modes for getting it in front of the users or stay in context and anchor it to the input.
Select - Responsive
Use the select dropdown responsively. You can set positioning and rendering based on the screen size. Having a bottom positioned select on mobile, a popover anchored to the input on tablet and desktop display on large sceens is simple.
All this can be configured under the responsive setting where you pass the options for each breakpoint.
responsive: {
xsmall: { ... }, small: { ... }, medium: { ... }, large: { ... }, xlarge: { ... }
}
Select - Multiple select
Use it on mobile and desktop for listing different options with multiple select. It can be tied to an input or rendered inline (you can learn about the different display modes for mobile and desktop).
This is an alternative to the checkbox list. You can use it in combination with group options and a group wheel that comes in handy for segmenting long lists.
It works great for category filtering in ecommerce solutions.
Select - Group options
Select - Multi level hierarchy
Select - Autocomplete
Select - Data source
The select component takes care of rendering data in a scrollable and consumable way for the user. The date can be passed a couple of different ways:
- Inline HTML, embedded in the markup - This is good if you only have a couple of static options.
- With the
datasetting - If you want to load model data, this is the way to do it. - Remote data - Load it through the
datasetting from a remote api/data source.
Select - Large datasource
Select - Multiline select
Select - Country Dropdown
Use the select component as a country picker on mobile and desktop. You can add the dropdown to any input or use Mobiscroll input fields.
If you don’t want to make it a dropdown, you can embed the picker inline right into a page.
To make the country picker perform well with a great UX you can simply enable autocomplete for a search functionality or order and group the countries alphabetically.
In these examples the data is loaded from a remote JSON in the following format: { “value”: “FJ”, “group”: “F”, “text”: “Fiji” } however you can add it all to your page.
Select - Setting values
Select - RTL support
Select - Localization
Select - Event hooks
EVENTS FIRED:
Select - Theming capabilities
The look and feel of the select can be deeply customized. There are four levels of customization:
- Base themes: Choose between
Mobiscroll,iOS,Android MaterialandWindows. - Light or dark: Every theme has a
lightanddarkvariant. Setting thethemeVariantto'auto'will switch based on system settings. - Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme in the floating action bar on the right side.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.