quasar/dist/api/QRating.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/rating"},"props":{"name":{"type":"String","desc":"Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL","examples":["'car_id'"],"category":"behavior"},"size":{"type":"String","desc":"Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)","examples":["'16px'","'2rem'","'xs'","'md'"],"category":"style"},"model-value":{"desc":"Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive","required":true,"syncable":true,"category":"model","type":"Number","examples":["# v-model=\"rating\"","# :model-value=\"rating\"","# :model-value=\"2\""]},"max":{"type":["Number","String"],"desc":"Number of icons to display","default":"5","category":"general","required":false},"icon":{"type":["String","Array"],"desc":"Icon name following Quasar convention; make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)","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","Array"],"desc":"Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"icon-half":{"type":["String","Array"],"desc":"Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"icon-aria-label":{"type":["String","Array"],"desc":"Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used","examples":["'Rating'","[ 'Bad', 'Normal', 'Good' ]"],"category":"accessibility","addedIn":"v1.20.3"},"color":{"type":["String","Array"],"tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette; v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based)","examples":["'primary'","'teal'","'teal-10'","[ 'accent', 'grey-7' ]"],"category":"style"},"color-selected":{"type":["String","Array"],"tsType":"NamedColor","desc":"Color name from the Quasar Palette for selected icons","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"color-half":{"type":["String","Array"],"tsType":"NamedColor","desc":"Color name from the Quasar Palette for half selected icons","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"no-dimming":{"type":"Boolean","desc":"Does not lower opacity for unselected icons","category":"style"},"no-reset":{"type":"Boolean","desc":"When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0","category":"model"},"readonly":{"type":"Boolean","desc":"Put component in readonly mode","category":"state"},"disable":{"type":"Boolean","desc":"Put component in disabled mode","category":"state"}},"slots":{"tip-[name]":{"desc":"Slot to define the tooltip of icon at '[name]' where name is a 1-based index; Suggestion: QTooltip"}},"events":{"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}}}}}