Variants and Examples Add :interactive="false" to make it a read-only, non-interactive Chip. This changes it from a <button> to a non-interactive, read-only Chip with no events or hover/active state. Note that this does not effect the interactivity of its × remove button.
< dt-chip:interactive = " false" > </ dt-chip>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use the disabled prop to disable both the Chip and its close button. This sets aria-disabled="true" and tabindex="-1" on the interactive elements and applies disabled styles, preventing pointer and keyboard interaction.
< dt-chipdisabled > </ dt-chip>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-chip:show-close = " false" > </ dt-chip>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-chip:show-close = " false" > < template#icon > < dt-iconname = " phone" size = " 200" /> </ template> < template#default > </ template> </ dt-chip>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-chip> < template#icon > < dt-iconname = " phone" size = " 200" /> </ template> < template#default > </ template> </ dt-chip>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-chip> < template#avatar > < dt-avatarimage-src = " /assets/images/person.png" image-alt = " Jaqueline Nackos" full-name = " Jaqueline Nackos" /> </ template> < template#default > </ template> </ dt-chip>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
To truncate text, add .d-truncate to the content element, and set the width of the .d-chip element.
< dt-chipcontent-class = " d-w-150" > < spanclass = " d-chip__text d-truncate" > </ span> </ dt-chip>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-chip:interactive = " false" :size = " 100" > </ dt-chip> < dt-chip:interactive = " false" :size = " 200" > </ dt-chip> < dt-chip:interactive = " false" > </ dt-chip>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
import { DtChip } from '@dialpad/dialtone-vue' ;