New to Kendo UI for VueStart a free 30-day trial

ChipProps

Interface

Represents the properties of Chip component.

Definition

Package:@progress/kendo-vue-buttons

Properties

Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.

avatar?

string | Object | Function

If set to object of type ChipAvatarProps with image and imageAlt it renders a default Avatar. If set to string or a render function it defines the avatar template that will be shown.

Represents the item data, coming from the ChipList component.

dir?

string

The Chip direction 'ltr' as default or 'rtl'.

disabled?

boolean

Determines if the Chip is disabled.

fillMode?

"solid" | "outline" | "flat"

Configures the fillMode of the Chip.

The available options are:

  • solid
  • outline
  • flat
Default:

undefined

icon?

string

Determines if the Chip has an icon.

id?

string

Sets the id property of the top div element of the Chip.

onBlur?

(event: ChipFocusEvent) => void

Triggered on onBlur event.

Parameters:eventChipFocusEvent

onClick?

(event: ChipMouseEvent) => void

Triggered on onClick event.

Parameters:eventChipMouseEvent

onFocus?

(event: ChipFocusEvent) => void

Triggered on onFocus event.

Parameters:eventChipFocusEvent

Triggered on onKeyDown event.

Parameters:eventChipKeyboardEvent

onRemove?

(event: ChipRemoveEvent) => void

Triggered on Chip removing.

Parameters:eventChipRemoveEvent

removable?

boolean

Determines if the Chip could be removed.

Determines if the Chip has custom removeIcon.

Defines an remove SVGIcon to be rendered within the chip.

rounded?

"small" | "medium" | "large" | "none" | "full"

Configures the roundness of the Chip.

The available options are:

  • none
  • small
  • medium
  • large
  • full
Default:

undefined

selected?

boolean

Determines if the Chip is selected.

Determines if the Chip has custom selection icon.

Defines an selection SVGIcon to be rendered within the chip.

size?

"small" | "medium" | "large"

Configures the size of the Chip.

The available options are:

  • small
  • medium
  • large
Default:

undefined

svgIcon?

SVGIcon

Defines an SVGIcon to be rendered within the chip.

tabIndex?

number

Sets the tabIndex attribute.

text?

string

Sets the label text of the Chip.

themeColor?

"base" | "info" | "success" | "warning" | "error"

Configures the themeColor of the Chip.

The available options are:

  • base
  • info
  • success
  • warning
  • error
Default:

undefined

Sets the id value of the Chip.