Views
The ColorPicker provides options for configuring its popup view and for implementing and customizing combined views.
Getting Started
You can configure the ColorPicker to render either a GradientComponent or a PaletteComponent in its popup. To choose between the two, provide either gradient or palette to the view input property of the component. By default, the gradient view will be used.
Example
View Source
Edit In Stackblitz
Change Theme:
Implementing Combined Views
To set a combined view and have both the ColorPalette and ColorGradient rendered in the ColorPicker popup, set the view property to combo.
@Component({
selector: 'my-app',
template: `
<div [style.color]="picker.value">{{ picker.value }}</div>
<kendo-colorpicker #picker [view]="'combo'" [value]="selectedColor"></kendo-colorpicker>
`
})
export class AppComponent {
public selectedColor: string = '#f9d9ab';
}Customizing the Combined Views
The ColorPicker enables the user to customize the combo view of its popup.
@Component({
selector: 'my-app',
template: `
<div [style.color]="picker.value">{{ picker.value }}</div>
<kendo-colorpicker
[format]="'hex'"
[paletteSettings]="paletteSettings"
[gradientSettings]="{ opacity: false }"
#picker
[view]="'combo'"
[value]="selectedColor"
>
</kendo-colorpicker>
`
})
export class AppComponent {
public selectedColor: string = '#f9d9ab';
public paletteSettings: PaletteSettings = {
tileSize: 24,
columns: 8,
palette: [
"#f0d0c9", "#e2a293", "#d4735e", "#65281a",
"#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
"#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
"#e1dca5", "#d0c974", "#a29a36", "#514d1b",
"#f0d0c9", "#e2a293", "#d4735e", "#65281a",
"#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
"#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
"#e1dca5", "#d0c974", "#a29a36", "#514d1b",
"#c6d9f0", "#8db3e2", "#548dd4", "#17365d",
"#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
"#e1dca5", "#d0c974", "#a29a36", "#514d1b",
"#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
]
};
}