Diggi Docs

Chip

Chips sind interaktive Elemente und sollten als Gruppe dargestellt werden, um ein inhaltliches Thema einzugrenzen. Chips ermöglichen u. a. die Suche oder das Filtern von Inhalten mithilfe von Keywords.

Tipp! Chips können ebenso als Tags verwendet werden.

Eigenschaften

Name	Type	Default Value	Description
name	string	undefined	Name of Element
label	string	undefined	Label to Display
disabled	boolean	false	Disable or not the Button
hasCloseButton	boolean	false	Chip display a closing icon
title	string	undefined	Title for mouseover
image	boolean	undefined	Image Url
icon	string	undefined	Icon to Display
fixedWidth	boolean	false	Fixed or not fixed width
selected	boolean	false	is Chip selected
dragged	boolean	false	is Chip dragged?
tabindex	undefined	0
style	string	undefined	Additional css styles

Events

Name	Description
close	Close event will be called if user clicks on the close button and this chip is not disabled.
click
keydown

Beispiele

Default Chip

Label

Chip mit Label (standard)

Label

Chip mit Label (selected)

Label

Chip mit Label (disabled)

Label

Chip mit Label (selected, disabled)

Label

Chip mit Close

Label

Chip mit Close (disabled)

Label

Chip mit Image

Label

Chip mit Image (disabled)

Label

Chip mit Image und Close

Label

Chip mit Image und Close (disabled)

Label

Chip mit Icon

Label

Chip mit Icon (disabled)

Label

Chip mit Icon und Close

Label

Chip mit Icon und Close (disabled)

Label

Do's and Don'ts

Info! Zeichenlänge von Labels innerhalb der Chips sollten 50 Zeichen nicht überschreiten.