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.
@Component({
selector: 'my-app',
template: `
<div class="example-config">
<div>
<input type="radio" name="view" value="gradient" class="k-radio" id="gradient" [(ngModel)]="view">
<label class="k-radio-label" for="gradient">Gradient</label>
</div>
<div>
<input type="radio" name="view" value="palette" class="k-radio" id="palette" [(ngModel)]="view">
<label class="k-radio-label" for="palette">Palette</label>
</div>
</div>
<div>
<kendo-colorpicker
[view]="view"
[value]="value"
>
</kendo-colorpicker>
</div>
`
})
export class AppComponent {
public view: string = 'gradient';
public value: string = '#548235';
}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"
]
};
}