UNPKG

@mozaic-ds/vue

Version:

Mozaic-Vue is the Vue.js implementation of ADEO Design system

github.com/adeo/mozaic-vue

adeo/mozaic-vue

32 lines (25 loc) • 2.06 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# MStarRating A Star rating visually represents a score or evaluation and can be used to display a rating or allow users to rate an item, such as a product or service. It serves two main purposes: collecting user feedback by enabling individuals to express their experience and providing social proof by displaying ratings from other users to assist decision-making. Rating Stars are commonly found in e-commerce, review systems, and feedback interfaces, offering a quick and intuitive way to assess quality or satisfaction. ## Props | Name | Description | Type | Default | | --- | --- | --- | --- | | `readonly` | Determines whether the rating is interactive or read-only. When true, all user interactions (click, hover, keyboard) are disabled. Automatically set to true when `compact`, `href`, or `information` are provided. | `boolean` | `true` | | `size` | Defines the visual size of the star icons and the accompanying text. | `"s"` `"m"` `"l"` | `"s"` | | `compact` | Enables a compact display mode that shows only one star instead of five. Typically used for summaries or quick visual cues. When enabled, the component automatically becomes read-only. | `boolean` | `false` | | `appearance` | Specifies the color scheme of the stars. | `"standard"` `"accent"` | `"accent"` | | `text` | Optional text displayed next to the star rating. If provided, the component automatically becomes read-only. | `string` | - | | `href` | URL for the link (for external links or the `to` prop for `router-link`). | `string` | - | | `target` | Where to open the link. | `"_self"` `"_blank"` `"_parent"` `"_top"` | - | | `router` | If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router). | `boolean` | - | | `modelValue*` | The current rating value of the component. Used with `v-model` for two-way data binding. When the rating changes (via click or keyboard), an `update:modelValue` event is emitted. | `number` | - | ## Events | Name | Description | Type | | --- | --- | --- | | `update:modelValue` | - | `[value: number]` |