Search results

Accessibility in Vue Chips component

06 Feb 2023 / 1 minute to read

Keyboard interaction

The following shortcut keys are used to access the Chip control without any interruption.

Keyboard shortcuts Actions
Enter Selects the targeted chip from the ChipList/ChipCollection.
Delete Deletes the targeted chip from the ChipList/ChipCollection.
Copied to clipboard
    <ejs-chiplist id="chip" enableDelete="true" selection="Single">
            <e-chip text="Andrew" avatarIconCss='andrew'></e-chip>
            <e-chip text="Janet" avatarIconCss='janet'></e-chip>
            <e-chip text="Laura" avatarIconCss='laura'></e-chip>
            <e-chip text="Margaret" avatarIconCss='margaret'></e-chip>

import Vue from 'vue';
import { ChipListPlugin } from '@syncfusion/ej2-vue-buttons';


export default {}

#chip .andrew {
  background-image: url('./andrew.png')

#chip .margaret {
  background-image: url('./margaret.png')

#chip .laura {
  background-image: url('./laura.png')

#chip .janet {
  background-image: url('./janet.png')