Color Presets
The ColorPalette provides a set of predefined color palettes such as office(default), basic, and apex.
The following example demonstrates all predefined color presets for the ColorPalette.
@Component({
selector: 'my-app',
template: `
<div class='row'>
<div *ngFor="let palette of palettes" class="col-md-3 box">
<h4>{{palette.toUpperCase()}}</h4>
<kendo-colorpalette [tileSize]="16" palette="{{palette}}"></kendo-colorpalette>
</div>
</div>
`,
styles: [`
.row { margin-bottom: 15px; }
h4 {
margin-bottom: 1em;
font-size: 12px;
line-height: 1em;
font-weight: bold;
text-transform: uppercase;
}
`]
})
export class AppComponent {
public palettes = ['office', 'apex', 'austin', 'clarity', 'slipstream', 'metro', 'flow', 'hardcover', 'trek', 'verve', 'basic', 'monochrome'];
}