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.
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"
]
};
}