Appearance and Styling

3 Oct 201714 minutes to read

modelType

The ColorPicker allows you to define the model type to be displayed in control at initial time by using the property modelType.

The modelType property is Enum type and its default value is default.

List of modelType

ModelType	Syntax	Description
Default	modelType: ej.ColorPicker.ModelType.Default	Control rendered with both model. You can switch to palette or picker model.
Picker	modelType: ej.ColorPicker.ModelType.Picker	Control rendered with picker model only.
Palette	modelType: ej.ColorPicker.ModelType.Palette	Control rendered with palette model only.

In the following code example, the ColorPicker popup model type is set as palette when you drop down the ColorPicker popup.

In the HTML page, add a <input> element to render ColorPicker widget

HTML

<div align="center">
    <input id="picker" ej-colorpicker [(ngModel)]="value" [(modelType)]="type"/>
    </div>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './colorpalette.component.html'
})
export class PaletteComponent {
  value: string;
  type: string;
  constructor() {
    this.value = '#ec2024';
    this.type = 'palette';
  }
}

The following screenshot displays the output of the above code example.

palette

The ColorPicker allow you to define the palette type to be displayed in control at initial time by using the palette property. The palette property is Enum type and its default value is basicpalette.

List of palette

Palette	Syntax	Description	Dependent Property
BasicPalette	palette: ej.ColorPicker.Palette.BasicPalette	The palette model rendered with predefined color values.	modelType : ej.ColorPicker.ModelType.Palette
CustomPalette	palette: ej.ColorPicker.Palette.CustomPalette	The palette model renders with the specified custom color values.	modelType : ej.ColorPicker.ModelType.Palette

basicpalette

The basicpalette type renders with predefined color values. The basicpalette model has 12 different preset patterns. Each pattern consists of 50 colors and over 600 colors are available by default.

presetType

The ColorPicker control allows you to define the preset model to be rendered initially in palette type. This can be achieved by using the “presetType” property. Totally 12 types of presets are available.

The presetType property is Enum type and its default value is “basic”.

Property Table

PresetType	Syntax	Dependent Property
Basic	presetType: ej.ColorPicker.PresetType.Basic	palette: ej.ColorPicker.Palette.BasicPalette
MonoChrome	presetType: ej.ColorPicker.PresetType.MonoChrome
FlatColors	presetType: ej.ColorPicker.PresetType.FlatColors
SeaWolf	presetType: ej.ColorPicker.PresetType.SeaWolf
WebColors	presetType: ej.ColorPicker.PresetType.WebColors
Sandy	presetType: ej.ColorPicker.PresetType.Sandy
PinkShades	presetType: ej.ColorPicker.PresetType.PinkShades
Misty	presetType: ej.ColorPicker.PresetType.Misty
Citrus	presetType: ej.ColorPicker.PresetType.Citrus
Vintage	presetType: ej.ColorPicker.PresetType.Vintage
MoonLight	presetType: ej.ColorPicker.PresetType.MoonLight
CandyCrush	presetType: ej.ColorPicker.PresetType.Candycrush

In the HTML page, add a <input> element to render ColorPicker widget

HTML

<div align="center">
    <input id="colorPicker" ej-colorpicker [(ngModel)]="value" [(modelType)]="type" [(presetType)]="presetType"/>
    </div>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './colorpalette.component.html'
})
export class PaletteComponent {
  value: string;
  presetType: string;
  type: string;
  constructor() {
    this.value = '#ec2024';
    this.type = 'palette';
    this.presetType = "flatcolors";
  }
}

The following screenshot displays the output of the above code example.

custompalette

The ColorPicker control allows you to define the custom colors in the palette model by using palette property. Custom palettes are created by passing a comma delimited string of HEX values or an array of colors in custom property. The custompalette model is only applicable when you set modelType as palette.

The custompalette property is a dependent property of palette and modelType property.

In the HTML page, add a <input> element to render ColorPicker widget

HTML

<div align="center">
    <input id="picker" ej-colorpicker [(ngModel)]="value" [(modelType)]="type" [(palette)]= "palette" [(showSwitcher)]= "switcher" [(custom)]= "custom"/>
    </div>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './custompalette.component.html'
})
export class CustomPaletteComponent {
  value: string;
  type: string;
  palette: string;
  switcher: boolean;
  custom: Array<any>;
  constructor() {
    this.value = '#ec2024';
    this.type = 'palette';
    this.palette = 'custompalette';
    this.switcher = false;
    this.custom = ['ffffff', 'ffccff', 'ff99ff', 'ff66ff', 'ff33ff', 'ff00ff', 'ccffff', 'ccccff', 'cc99ff', 'cc66ff',
      'cc33ff', 'cc00ff', '99ffff', '99ccff', '9999ff', '9966ff', '9933ff', '9900ff', 'ffffcc', 'ffcccc'];
  }
}

The following screenshot displays the output of the above code example.

displayInline

The ColorPicker control allows you to embed the popup in the order of DOM element flow by using the displayInline property. Using displayInline property to make ColorPicker popup always in visible state. Also associate ColorPicker with <div> element instead of input.

The displayInline property is Boolean type and its default value is false.

The following steps explain you how to get the ColorPicker popup in DisplayInline state.

In the HTML page, add a <div> element to render ColorPicker widget

HTML

<div align="center">
    <input id="colorPicker" type="text" [displayInline]="true" ej-colorpicker [(ngModel)]="value" />
    </div>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
    value: string;

    constructor() { this.value = '#278787'; }
}

The following screenshot displays the output of the above code example.

CustomCss

The ColorPicker control also allows you to customize its appearance using user-defined CSS and custom skin options such as colors and backgrounds. To apply custom themes use the cssClass property. cssClass property sets the root class for ColorPicker theme.

Using this property you can override the existing styles under the theme style sheet. The theme style sheet applies theme-specific styles like colors and backgrounds. In the following example, the value of cssClass property is set as Light-Blue. Light-Blue is added as root class to ColorPicker control at the runtime. From this root class you can customize the ColorPicker control theme.

In the HTML page, add a <input> element to render ColorPicker widget

HTML

<div align="center">
    <input id="colorPicker" ej-colorpicker [(ngModel)]="value" [(cssClass)]="cssClass" />
    </div>
    <style>
    .Light-Blue.e-colorwidget.e-widget, .Light-Blue.e-colorpicker.e-popup, .Light-Blue.e-colorwidget .e-in-wrap.e-box .e-select, .Light-Blue.e-colorwidget .e-in-wrap.e-box, .Light-Blue.e-colorwidget .e-down-arrow {
        background: none repeat scroll 0 0 lightblue;
    }

    .Light-Blue.e-colorpicker .e-footer .e-cancelButton.e-btn, .Light-Blue.e-colorpicker .e-footer .e-applyButton.e-btn {
        background: none repeat scroll 0 0 white;
    }
    </style>

HTML

import { Component } from '@angular/core';
@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
    value: string;
    cssClass: string;
    constructor() {
    this.value = '#278787';
    this.cssClass = "Light-Blue";
    }
}

The following screenshot displays the output of above steps.