Keyboard Navigation
The keyboard navigation of the ColorPicker is always available.
The ColorPicker supports the following keyboard shortcuts:
| SHORTCUT | DESCRIPTION |
|---|---|
Down Arrow & Enter
|
Opens the popup. |
Escape |
Closes the popup. |
Enter |
Selects the focused item and closes the popup. |
Down Arrow |
Moves the focus to the next cell down. |
Up Arrow |
Moves the focus to the next cell up. |
Right Arrow |
Moves the focus to the next cell right. |
Left Arrow |
Moves the focus to the next cell left. |
@Component({
selector: 'my-app',
template: `
<div class="wrapper">
<kendo-colorpicker
[view]="'palette'"
[paletteSettings]="settings"
>
</kendo-colorpicker>
<kendo-colorpalette
[palette]="settings.palette"
[columns]="settings.columns"
[tileSize]="settings.tileSize"
>
</kendo-colorpalette>
</div>
`,
styles: [`
.wrapper {
display: flex;
justify-content: center;
}
.wrapper::after {
content: "";
position: absolute;
top: 10%;
left: 50%;
height: 80%;
border-right: 1px solid lightgrey;
box-shadow: 0 0 2px lightgrey;
}
.k-colorpicker {
margin-right: 10rem;
}
`]
})
class AppComponent {
public settings: PaletteSettings = {
palette: [
'#f0d0c9', '#e2a293', '#d4735e', '#65281a','#eddfda',
'#dcc0b6', '#cba092', '#7b4b3a', '#fcecd5', '#f9d9ab',
'#f6c781', '#c87d0e', '#e1dca5', '#d0c974', '#a29a36',
'#514d1b', '#c6d9f0', '#8db3e2', '#548dd4', '#17265d'
],
columns: 5,
tileSize: 30
}
}