quasar/dist/api/QChip.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/chip"},"props":{"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"},"size":{"type":"String","desc":"QChip size name or a CSS unit including unit name","examples":["'xs'","'sm'","'md'","'lg'","'xl'","'25px'","'2rem'"],"category":"style"},"dark":{"type":["Boolean","null"],"default":"null","desc":"Notify the component that the background is a dark color","category":"style","required":false},"icon":{"type":"String","desc":"Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"icon-right":{"type":"String","desc":"Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"icon-remove":{"type":"String","desc":"Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"icon-selected":{"type":"String","desc":"Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"label":{"type":["String","Number"],"desc":"Chip's content as string; overrides default slot if specified","examples":["'John Doe'","'Book'"],"category":"content"},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"text-color":{"type":"String","tsType":"NamedColor","desc":"Overrides text color (if needed); Color name from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"model-value":{"desc":"Model of the component determining if QChip should be rendered or not","required":false,"syncable":true,"category":"model","type":"Boolean","default":"true"},"selected":{"type":["Boolean","null"],"default":"null","sync":true,"desc":"Model for QChip if it's selected or not","examples":["# v-model:selected=\"myState\""],"category":"model","required":false,"syncable":true},"square":{"type":"Boolean","desc":"Sets a low value for border-radius instead of the default one, making it close to a square","category":"style"},"outline":{"type":"Boolean","desc":"Display using the 'outline' design","category":"style"},"clickable":{"type":"Boolean","desc":"Is QChip clickable? If it's the case, then it will add hover effects and emit 'click' events","category":"state"},"removable":{"type":"Boolean","desc":"If set, then it displays a 'remove' icon that when clicked the QChip emits 'remove' event","category":"state"},"ripple":{"type":["Boolean","Object"],"desc":"Configure material ripple (disable it by setting it to 'false' or supply a config object)","default":"true","examples":["false","{ early: true, center: true, color: 'teal', keyCodes: [] }"],"category":"style","required":false},"remove-aria-label":{"type":"String","desc":"aria-label to be used on the remove icon","examples":["'Remove item'"],"category":"accessibility","addedIn":"v2.8.4"},"tabindex":{"type":["Number","String"],"desc":"Tabindex HTML attribute value","examples":["100","'0'"],"category":"general"},"disable":{"type":"Boolean","desc":"Put component in disabled mode","category":"state"}},"slots":{"default":{"desc":"This is where QChip content goes, if not using 'label' property"}},"events":{"click":{"desc":"Emitted on QChip click if 'clickable' property is set","params":{"evt":{"type":"Event","desc":"JS event object"}}},"update:model-value":{"desc":"Emitted when the component needs to change the model; Is also used by v-model","params":{"value":{"type":"Any","desc":"New model value","required":true}}},"update:selected":{"desc":"Used by Vue on 'v-model:selected' for updating its value","params":{"state":{"type":"Boolean","desc":"Selected state"}}},"remove":{"desc":"Works along with 'value' and 'removable' prop. Emitted when toggling rendering state of the QChip","params":{"state":{"type":"Boolean","desc":"Render state (render or not)"}}}}}