General Calendar Cards Color Date & Time Event Calendar Forms Grid Layout Image Listview Measurement Navigation Number Numpad Option List Page Popup Range Scroller Scrollview Select Timer Timespan Treelist Tools Accessibility

Color

Basic usage

Components

Simple example with ngModel
<mbsc-color [(ngModel)]="myFav">My Favorite</mbsc-color>
Using inline options to customize the color component
<mbsc-color [(ngModel)]="myMostFavorite" theme="ios" [data]="selectableColors">My Favorite</mbsc-color>

<mbsc-color [(ngModel)]="myFavorites" select="multiple" theme="ios" display="top" [data]="selectableColors">My Favorite</mbsc-color>
export class MyExampleClass {
    myMostFavorite: string = '#ff0000';
    myFavorites: Array<string>;
    selectableColors = ['#ff0000', '#00ff00', '#0000ff'];
}

Passing events

All events can be used inline with the component. When passing event handlers inline, the instance of the component becomes the inst property of the event object.

Passing inline event handlers
<mbsc-color [(ngModel)]="favorite" (onSet)="favoriteSet()">My Favorite</mbsc-color>
<!-- with default parameters -->
<mbsc-color [(ngModel)]="favorite" (onSet)="withDefaultEvent($event)">My Favorite</mbsc-color>
<!-- with additional parameters -->
<mbsc-color [(ngModel)]="favorite" (onSet)="withAdditionalEvent($event, 'myAddition')">My Favorite</mbsc-color>
export class MyExampleClass {
    favorite: string;
    // simple handler without any parameters
    favoriteSet() {
        console.log('simple handler'); // prints 'simple handler'
    }

    // event handler with the default event parameter
    withDefaultEvent(event: any) {
        console.log(event, event.inst); // prints the event object and the mobiscroll color control instance
    }

    // event handler with additional parameters
    withAdditionalEvent(event: any, addition: string) {
        console.log(addition); // prints 'myAddition'
    }
}

If you need more customization options on the element, you can use the directives as follows

Directives

Here is an example for the color directive with ngModel
@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="color" mbsc-color />`
})
export class MyExampleComponent {
    color: string = '#ff0000';
}
Example for the color directive without ngModel
@Component({
    selector: 'my-example',
    template: `<input [(mbsc-color)]="color" />`
})
export class MyExampleComponent {
    color: string = '#ff0000';
}
Example for the color directive with additional settings
import { MbscColorOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';
@Component({
    selector: 'my-example',
    template: `
    <input [(ngModel)]="color" mbsc-color [mbsc-options]="colorSettings" />
    <input [(ngModel)]="color" mbsc-color [mbsc-options]="colorSettings" [mbsc-data]="selectableColors"/>`
})
export class MyExampleComponent {
    color: string = '#ff0000';
    colorSettings: MbscColorOptions = {
        theme: 'ios',
        display: 'bottom'
    };
    selectableColors: Array<string> = ['#ffeb3c', '#ff9900', '#f44437', '#ea1e63'];
}

Using with Ionic

Simple ionic input
<ion-item>
    <ion-label>My Font Color</ion-label>
    <ion-input [(ngModel)]="color" mbsc-color [mbsc-data]="selectableColors"></ion-input>
</ion-item>
Ionic input with predefined colors
<ion-item>
    <ion-label>My Font Color</ion-label>
    <ion-input [(ngModel)]="color" mbsc-color [mbsc-data]="selectableColors"></ion-input>
</ion-item>
Ionic input with additional options
<ion-item>
    <ion-label>My Font Color</ion-label>
    <ion-input [(ngModel)]="color" mbsc-color [mbsc-options]="colorSettings"></ion-input>
</ion-item>

Modules

The MbscColorModule can be used to import all the directives and components from below.

Directives

Directive Data type Description
[(mbsc-color)] String Directve for the color
[mbsc-options] MbscColorOptions Directive used to pass the mobiscroll options
[mbsc-data] Array of string or object Directive used to define selectable colors. More details

Components

Component Data type Description
<mbsc-color> string Component for the color

The following options can be used as attributes to customize the color component.

Options

Name Type Default value Description
anchor String or HTMLElement undefined Specifies the anchor element for positioning, if display is set to 'bubble'. If undefined, it defaults to the element on which the component was initialized.
animate String or Boolean undefined Animation to use for show/hide (if display is not inline). Possible values:
  • 'fade'
  • 'flip'
  • 'pop'
  • 'swing'
  • 'slidevertical'
  • 'slidehorizontal'
  • 'slidedown'
  • 'slideup'
If false, turns the animation off.
buttons Array ['set', 'cancel'] Buttons to display. Each item in the array will be a button. A button can be specified as a string, or as a button object.

If a string, it must be one of the predefined buttons:
  • 'set' - Sets the value.
  • 'clear' - Clears the value.
  • 'cancel' - Dismisses the popup.
To modify the text of the predefined buttons, you can use the setText, clearText , cancelText settings.

If an object, it may have the following properties:
  • text String - Text of the button.
  • handler String, Function - The function which will run when the button is pressed. If a string, it must be one of the predefined button handlers:
    • 'set' - Sets the value.
    • 'clear' - Clears the value.
    • 'cancel' - Dismisses the popup.
  • icon String (Optional) - Icon of the button.
  • cssClass String (Optional) - Css class of the button.
Predefined and custom buttons example
buttons: [ 
    'set',
    { 
        text: 'Custom',
        icon: 'checkmark',
        cssClass: 'my-btn', 
        handler: (event, inst) => {
            alert('Custom button clicked!'); 
        } 
    },
    'cancel'
]
Predefined button handler example
buttons: [
    'set',
    { 
        text: 'Hide',
        handler: 'cancel',
        icon: 'close',
        cssClass: 'my-btn'
    }
]
clear Boolean true Clears the selected color value and closes the popup. It only working in single select mode.
closeOnOverlayTap Boolean true If true, the popup is closed on overlay tap/click.
context String or HTMLElement 'body' Context in which mobiscroll is appended and positioned (if not inline). Can be a selector string or a DOM element.
cssClass String undefined Applies custom css class to highest level element.
data Array of string or object ['#ffeb3c', '#ff9900', '#f44437', '#ea1e63', '#9c26b0', '#683ab7', '#3f51b5', '#2196f3', '#009788', '#4baf4f', '#7e5d4e', '#9e9e9e'] Define colors for the color component. The colors can be specified with a string or with an object. The object must have a color property. Colors can be from one of the supported color formats and only one type can be used in the array. If the defined colors are objects then the returned values also will be objects.

Examples to specify colors:
  • hex values - data: ['#333333', '#123122', '#cccccc', '#ff12e4' /* ... */]
  • rgb values - data: ['rgb(255,13,20)', 'rgb(170,170,170)', 'rgb(255,13,200)' /* ... */]
  • hsl values - data: ['hsl(54,100%,62%)', 'hsl(36,100%,50%)', 'hsl(4,90%,59%)' /* ... */]
  • objects - data: [{id: 1, color: '#ff12e4'}, {id: 2, color: '#123122'} /* ... */]
disabled Boolean false Initial disabled state of the component.
display String 'center' Controls the positioning of the component. Possible options:
  • 'center' - The component appears as a popup at the center of the viewport.
  • 'inline' - If called on div element, the component is placed inside the div (overwriting existing content), otherwise is placed after the original element.
  • 'bubble' - The component appears as a bubble positioned to the element defined by the 'anchor' setting. By default the anchor is the original element.
  • 'top' - The component appears docked to the top of the viewport.
  • 'bottom' - The component appears docked to the bottom of the viewport.
enhance Boolean true If true the associated element will be enhanced, instead of color strings the actual color will show up in the element.
focusOnClose Boolean, String or jQuery Object true Element to focus after the popup is closed. If undefined, the original element will be focused. If false, no focusing will occur.
focusTrap Boolean true If not in inline mode, focus won't be allowed to leave the popup.
format String 'hex' Defines the input and the return format of the color. Supported formats are 'hex', 'rgb' and 'hsl'.
headerText Mixed false Specifies a custom string which appears in the popup header.
If the string contains the '{value}' substring, it is replaced with the formatted value of the color.
If it's set to false, the header is hidden.
If a function is passed, it receives the formatted value as parameter and the returned value appears in the header.
The default value depends on the theme:

Mobiscroll: false
Android Holo: {value}
Bootstrap: {value}
iOS: false
jQuery Mobile: {value}
Material: false
Windows Phone: false
inputClass String '' Css class(es) to style the input which is shown instead of the original color input( if enhance option is enabled).
layout String undefined Sets the layout of the component. Possible values:
  • 'liquid' - The popup will expand to the maximum available width.
    In 'center' and 'bubble' display mode it will also leave some space on the left and right edges, and will not exceed 600px width on larger screens.
    In 'top', 'bottom' and 'inline' display mode this is the default behavior.
  • 'fixed' or undefined - Popup will have a fixed width, depending on the content, and not on the viewport size.
mode String 'preset' Option to choose between modes. Possible values:
  • 'preset' - render colors
  • 'refine' - render colors and a slider to change color luminosity.
navigation String 'horizontal' Specifies the scroll navigation of the color container.
Possible values:
  • 'horizontal' - Colors can be navigated horizontally.
  • 'vertical' - Colors can be navigated vertically.
responsive Object null Specify different settings for different viewport widths, in a form of an object, where the keys are the name of the breakpoints, and the values are objects containing the settings for the given breakpoint.

There are five predefined breakpoints:
  • xsmall - min-width: 0px
  • small - min-width: 576px
  • medium - min-width: 768px
  • large - min-width: 992px
  • xlarge - min-width: 1200px
Custom breakpoints can be defined by passing an object containing the breakpoint property specifying the min-width in pixels. Example:
responsive: {
    small: {
        display: 'bottom'
    },
    custom: { // Custom breakpoint
        breakpoint: 600,
        display: 'center'
    },
    large: {
        display: 'bubble'
    }
}
rows Number 2 Number of visible color rows.
scrollLock Boolean true Disables page scrolling on touchmove (if not in inline mode, and popup height is less than window height).
select String or Number 'single' Defines the selection of colors. Possible values:
  • 'single' - Only one color can be selected at once.
  • 'multiple' - Multiple colors can be selected.
  • Numeric value - The maximum number of colors that can be selected.
showOnFocus Boolean false - on desktop true - on mobile Pops up the component on element focus.
showOnTap Boolean true Pops up the component on element tap.
theme String undefined Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If the theme for the specific platform is not present, it will revert to the Mobiscroll theme.

Supplied themes:
  • 'bootstrap' - Bootstrap themes
  • 'ios' - new iOS 7, 8, 9 theme
  • 'material' - Material theme (Android 5.x)
  • 'material-dark' - Material dark theme (Android 5.x)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll Dark theme
  • 'windows' - Windows theme
  • 'windows-dark' - Windows theme (dark version)
It's possible to create custom themes in css by prefixing any css class used in the color markup with the theme name and the 'mbsc' prefix, e.g.: .mbsc-my-theme .dwwr { /* My CSS */ }, and set the theme option to 'my-theme'
Make sure that the theme you set is included in the downloaded package.
touchUi Boolean true Use true to render a touch optimized user interface, or false for a user interface optimized for pointer devices (mouse, touchpad). Can be used with the responsive setting to change the user interface based on viewport width.

Setting options runtime (changing options dynamically)

There are two ways to modify options after initalization

  1. Using the option method.

    The option method always triggers reinitialization. Most of the settings can be updated only this way, updating without initialization has no effect, because the markup is already generated. If the scroller was visible, the reinitialization hides it and it's not shown again automatically (except in inline display mode).

    Here is an example for the dynamic option change
    import { ViewChild } from '@angular/core';
    @Component({
        selector: 'my-example',
        template: `
            <input mbsc-color #myVariable="mobiscroll" [(ngModel)]="myExample"/>
            <button (click)="changeOptions()">Change theme and language</button>
        `
    })
    export class MyExample {
        @ViewChild('myVariable') 
        myRef: any;
    
        // Modify options
        changeOptions() {
            this.myRef.instance.option({
                theme: 'mobiscroll',
                lang: 'de'
            });
        }
    }
  2. Modify directly the settings object.

    Useful when changing dynamic settings, which do not need redraw (e.g. readonly, calendar marked days).

    Example
    import { ViewChild } from '@angular/core';
    @Component({
        selector: 'my-example',
        template: `
            <input mbsc-color #myVariable="mobiscroll" [mbsc-options]="myOptions"/>
            <button (click)="changeOptions()">Change readonly</button>
        `
    })
    export class MyExample {
        @ViewChild('myVariable') 
        myRef: any;
    
        // get instance and modify a setting
        changeOptions() {
            this.myRef.instance.settings.readonly = true;
        }
        
        // Modify settings in an event
        myOptions: any = {
            onBeforeShow: (event, inst) => {
                inst.settings.readonly = true;
            }
        }
    }

Events

Using arrow functions is recommended so you have access to your outer component instance inside event handlers through this reference.
When using the events inline (see here) the inst parameter is passed as a property to the event.
Name Description
onBeforeClose(event, inst) Triggered before the component closes. Close can be prevented by returning false from the handler function.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
    • button: String - The name of the button which triggered the component to close ('set', or 'cancel').
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onBeforeClose: (event, inst) => {
        }
    }
}
onBeforeShow(event, inst) Triggered before the component is shown. It is useful if you want to modify the settings object before generating the markup. It can be used also to prevent the showing the control by returning false.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onBeforeShow: (event, inst) => {
        }
    }
}
onCancel(event, inst) Allows you to define your own event when cancel is pressed.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onCancel: (event, inst) => {
        }
    }
}
onClear(event, inst) Triggered when the value is cleared.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onClear: (event, inst) => {
        }
    }
}
onClose(event, inst) Triggered when the component is closed.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onClose: (event, inst) => {
        }
    }
}
onDestroy(event, inst) Triggered when the component is destroyed.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onDestroy: (event, inst) => {
        }
    }
}
onInit(event, inst) Triggered when the component is initialized.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onInit: (event, inst) => {
        }
    }
}
onItemTap(event, inst) Triggered when a color item is tapped.

Parameters

  • event: Object - The event object has the following properties:
    • target: HTMLElement - The DOM element of the tapped item.
    • selected: Boolean - Selected state of the tapped item.
    • index: Number - Index of the tapped item.
    • value: String - The value of the tapped item.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onItemTap: (event, inst) => {
        }
    }
}
onMarkupReady(event, inst) Triggered when the html markup of the component is generated, but it is not yet shown. It is useful, if you want to make modifications to the markup (e.g. add custom elements), before the positioning runs.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element containing the generated html.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onMarkupReady: (event, inst) => {
        }
    }
}
onPosition(event, inst) Triggered when the component is positioned (on initial show and resize / orientation change).
Useful if dimensions needs to be modified before the positioning happens, e.g. set a custom width or height. Custom positioning can also be implemented here, in this case, returning false from the handler function will prevent the built in positioning.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element containing the generated html.
    • windowWidth: Number - The window width.
    • windowHeight: Number - The window height.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onPosition: (event, inst) => {
        }
    }
}
onPreviewItemTap(event, inst) Triggered when a color preview item is tapped.

Parameters

  • event: Object - The event object has the following properties:
    • target: HTMLElement - The DOM element of the tapped item.
    • index: Number - Index of the tapped item.
    • value: String - The value of the tapped item.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onPreviewItemTap: (event, inst) => {
        }
    }
}
onSet(event, inst) Triggered when a value is set.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text (if any).
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onSet: (event, inst) => {
        }
    }
}
onShow(event, inst) Triggered when the component is shown.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element containing the generated html.
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the color.

Example

export class MyExample {
    settings: any = {
        onShow: (event, inst) => {
        }
    }
}

Methods

Name Description
disable() Disables the color.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.disable();
enable() Enables the color.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.enable();
getInst() Returns the object instance.

Returns: Object

  • The object instance.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getInst();
hide([ prevAnim ] [, btn ]) Hides the component.

Parameters

  • prevAnim (Optional): Boolean - If true, hide will not be animated.
  • btn (Optional): String - Specifies which button caused the component to hide, and it's passed to the onBeforeClose event.

Example

Methods can be called on an instance. For more details see calling methods
    mobiscrollInstance.hide();
    
isVisible() Returns a boolean indicating whether the component is visible or not.

Returns: Boolean

  • True if the component is visible, false if it's not.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.isVisible();
option(options) Sets one or more options for the component.

Parameters

  • options: Object - A map of option-value pairs to set.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});
position([check]) Recalculates the position of the component (if not inline).

Parameters

  • check (Optional): Boolean - If true, the function checks if viewport size changed after last position call, if false or ommitted, position is recalculated anyway.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.position();
show([ prevAnim ] [, prevFocus ]) Shows the component.

Parameters

  • prevAnim (Optional): Boolean - If true, show will not be animated.
  • prevFocus (Optional): Boolean - If true, the popup will not be focused right after show.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.show();
tap(el, handler) Attaches the handler function to the tap event of element el.

Parameters

  • el: Object - The element with tap event.
  • handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

Localization

Name Type Default value Description
cancelText String 'Cancel' Text for Cancel button.
clearText String 'Clear' Text for Clear button.
lang String 'en-US' Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
  • Arabic: 'ar'
  • Bulgarian: 'bg'
  • Catalan: 'ca'
  • Czech: 'cs'
  • Chinese: 'zh'
  • Croatian: 'hr'
  • Danish: 'da'
  • Dutch: 'nl'
  • English: 'en' or 'en-US' or undefined
  • English (UK): 'en-UK' or 'en-GB'
  • Farsi: 'fa'
  • German: 'de'
  • Greek: 'el'
  • Spanish: 'es'
  • Finnish: 'fi'
  • French: 'fr'
  • Hebrew: 'he'
  • Hindi: 'hi'
  • Croatian: 'hr'
  • Hungarian: 'hu'
  • Italian: 'it'
  • Japanese: 'ja'
  • Korean: 'ko'
  • Lithuanian: 'lt'
  • Norwegian: 'no'
  • Polish: 'pl'
  • Portuguese (Brazilian): 'pt-BR'
  • Portuguese (European): 'pt-PT'
  • Romanian: 'ro'
  • Russian: 'ru'
  • Russian (UA): 'ru-UA'
  • Slovak: 'sk'
  • Serbian: 'sr'
  • Thai: 'th'
  • Swedish: 'sv'
  • Turkish: 'tr'
  • Ukrainian: 'ua'
  • Vietnamese: 'vi'
rtl Boolean false Right to left display.
setText String 'Set' Text for Set button.