Mobiscroll

Mobiscroll is a UI library designed for progressive web apps (PWAs) and hybrid development, focusing on usability and performance. It provides a set of customizable controls (Mobiscroll Forms) that are included in this repository for free, alongside advanced commercial components.

Supported Frameworks

While Mobiscroll is framework-agnostic at its core, it provides specific API variants for:

• jQuery / jQuery Mobile
• Angular / Ionic
• AngularJS / Ionic 1
• React

Documentation

Complete documentation for Mobiscroll Forms and all products is available at https://docs.mobiscroll.com.

Demos

• Mobiscroll Forms (FREE): https://demo.mobiscroll.com/forms
• Full Demo Library: Over 250 live demos with downloadable code at https://demo.mobiscroll.com.

The React example project uses yarn to manage development, testing, and production tasks. Use the following commands in the project directory:

• Development: Run the app in development mode with hot reloading.
• Testing: Launch the test runner in interactive watch mode.
• Production Build: Bundle the app for production, optimizing performance and minifying files for deployment.
• Eject: A one-way operation to expose the underlying build configuration (webpack, Babel, etc.) for full customization.

yarn start

yarn test

yarn build

yarn eject

To build the necessary CSS and JavaScript files into the dist folder from the source repository, you must install dependencies and run the Grunt build task.

npm install
grunt build

The project uses Karma for unit testing and Protractor for end-to-end testing.

• Unit Tests: Execute via ng test.
• End-to-End Tests: Execute via ng e2e.

You can use the Angular CLI to generate new project structures. Use ng generate component <component-name> for components, or specify other types such as directive, pipe, service, class, guard, interface, enum, or module.

ng generate component component-name

Mobiscroll components implement the ControlValueAccessor interface, allowing them to work seamlessly with Angular's ngModel and formControl directives.

When using a Mobiscroll component as a form control, the component handles:

• writeValue(v): Propagating model changes to the Mobiscroll instance.
• registerOnChange(fn): Registering the callback to notify the form of value changes.
• registerOnTouched(fn): Registering the callback to notify the form when the control is touched.
• setDisabledState(isDisabled): Synchronizing the disabled state between the Angular form and the Mobiscroll instance.

Note: The component uses an internal MbscInputService to track if a control is set and manages the transition between the native input and the Mobiscroll instance.

The MbscSegmentedGroup allows for a group of segmented buttons (similar to radio or checkbox groups). It uses MbscRadioService to coordinate selection.

MbscSegmentedGroup Inputs:

• select: Determines selection mode. Options: 'single' (default) or 'multiple'. This sets the multiSelect property on the underlying service.

MbscSegmented Inputs:

• value: The value of the segment.
• icon: An icon identifier.
• checkedChange: An EventEmitter for value changes (used when not using FormControl).

To create a group of radio buttons, wrap MbscRadio components inside an MbscRadioGroup. The group manages the selection state via MbscRadioService.

MbscRadioGroup Inputs:

• name: The name of the radio group.
• color: The color preset for the group.

MbscRadio Inputs:

• value: The specific value for this radio option.
• color: The color preset for the radio button.
• error: Boolean to indicate an error state.
• errorMessage: The error message to display.

To use the Scroller in an Angular application, you must import MbscScrollerModule into your Angular module.

import { MbscScrollerModule } from './path-to-mobiscroll/scroller.angular';

@NgModule({
  imports: [
    MbscScrollerModule
  ],
  // ...
})
export class MyModule { }