Inputrating

RatingGitHub à
Un composant pour afficher et collecter les évaluations des utilisateurs.

Utilisation

Utilisez la directive v-model pour contrôler la valeur d'évaluation du composant InputRating.

<script setup lang="ts">
const value = ref(3)
</script>

<template>
  <UInputRating v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)
</script>

<template>
  <UInputRating v-model="value" />
</template>

Utilisez la prop default-value pour définir la valeur initiale lorsque vous n'avez pas besoin de contrôler son état.

<template>
  <UInputRating :default-value="3" />
</template>

Step étape

Utilisez la prop step pour contrôler la granularité de chaque étoile. Réglez-la sur 0.5 pour permettre des évaluations d'une demi-étoile.

<template>
  <UInputRating :step="0.5" :default-value="3.5" />
</template>

longueur

Utilisez la prop length pour définir le nombre d'étoiles. Par défaut, 5.

<template>
  <UInputRating :length="10" :step="0.5" :default-value="7.5" />
</template>

Clearable

Utilisez la prop clearable pour permettre aux utilisateurs d'effacer la note en cliquant sur la valeur actuellement sélectionnée.

<template>
  <UInputRating clearable :default-value="3" />
</template>

Hoverable

Utilisez la prop hoverable pour contrôler si l'évaluation affiche un aperçu de la valeur lorsque vous survolez les étoiles.

<template>
  <UInputRating hoverable :default-value="3" />
</template>

Icône

Utilisez la prop icon pour personnaliser l'icône utilisée pour les étoiles. Par défaut, i-lucide-star.

<template>
  <UInputRating icon="i-lucide-heart" :default-value="4" />
</template>
Vous pouvez personnaliser l'icône étoile par défaut globalement dans votre app.config.ts sous la touche ui.icons.star.
Vous pouvez personnaliser l'icône étoile par défaut globalement dans votre vite.config.ts sous la touche ui.icons.star.

Empty Icône

Utilisez la prop empty-icon pour personnaliser l'icône utilisée pour les étoiles vides. Si elle n'est pas fournie, utilise la même icône que icon.

<template>
  <UInputRating empty-icon="i-lucide-circle" icon="i-lucide-circle-check" :default-value="3" />
</template>

couleur

Utilisez le prop color pour changer la couleur des étoiles remplies.

<template>
  <UInputRating color="neutral" :default-value="4" />
</template>

taille

Utilisez le prop size pour modifier la taille des étoiles.

<template>
  <UInputRating size="xl" :default-value="4" />
</template>

Orientation

Utilisez la prop orientation pour modifier l'orientation de l'évaluation. Par défaut à horizontal.

<template>
  <UInputRating orientation="vertical" :default-value="4" />
</template>

Désactivé

Utilisez la prop disabled pour désactiver le composant InputRating. Lorsqu 'il est désactivé, le composant a une opacité réduite (75%) et montre un curseur not-allowed pour indiquer qu' il n'est pas interactif.

<template>
  <UInputRating disabled :default-value="3" />
</template>

Readonly

Utilisez la prop readonly pour afficher une note sans permettre l'interaction de l'utilisateur. Contrairement à disabled, il conserve l'apparence normale (opacité totale, curseur par défaut). Utilisez lorsque vous voulez afficher une note qui ne peut pas être modifiée mais qui doit avoir l'air normal.

<template>
  <UInputRating readonly :default-value="4.5" />
</template>

API

Props équipements

Prop Default Type
as
'div'
any

The element or component this component should render as.

id
string

The id of the rating.

readonly
false
boolean

Make the rating readonly (non-interactive).

icon
appConfig.ui.icons.star
any

The icon displayed for each rating value.

emptyIcon
any

The icon displayed for empty rating values. Defaults to icon when not provided.

color
'primary'
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
size
'md'
"xs" | "sm" | "md" | "lg" | "xl"
orientation
'horizontal'
"horizontal" | "vertical"

The orientation of the rating.

step
1
1 | 0.5 | 0.25 | 0.1

The granularity each rating item is divided into.

disabled
boolean

When true, prevents the user from interacting with radio items.

required
boolean

When true, indicates that the user must set the value before the owning form can be submitted.

name
string

The name of the field. Submitted with its owning form as part of a name/value pair.

defaultValue
0
number

The rating value when initially rendered. Use when you do not need to control the state of the rating.

modelValue
number

The controlled rating value. Can be bound with v-model.

length
5
number

The number of rating items to render.

clearable
false
boolean

When true, clicking the currently selected rating resets the value to 0.

hoverable
false
boolean

When true, the rating previews the value under the pointer on hover.

ui
{ root?: SlotClass; item?: SlotClass; indicator?: SlotClass; icon?: SlotClass; emptyIcon?: SlotClass; }

Slots

Slot Type
item
{ index: number; filled: boolean; }

Rendered for each item. filled is false for the empty background layer and true for the highlighted overlay.

Emis

Event Type
update:modelValue
[payload: number]
change
[event: Event]

Thème

app.config.ts
export default defineAppConfig({
  ui: {
    inputRating: {
      slots: {
        root: '',
        item: [
          'relative inline-block cursor-pointer select-none rounded-sm has-focus-visible:outline-3',
          'transition'
        ],
        indicator: 'absolute inset-0 overflow-hidden outline-none text-transparent w-(--reka-rating-item-step-width) opacity-(--reka-rating-item-step-opacity) z-(--reka-rating-item-step-z-index)',
        icon: 'block',
        emptyIcon: 'block w-full h-full text-muted pointer-events-none'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'inline-flex items-center gap-0.5'
          },
          vertical: {
            root: 'inline-flex flex-col items-center gap-0.5'
          }
        },
        size: {
          xs: {
            item: 'size-3',
            icon: 'size-3'
          },
          sm: {
            item: 'size-4',
            icon: 'size-4'
          },
          md: {
            item: 'size-5',
            icon: 'size-5'
          },
          lg: {
            item: 'size-6',
            icon: 'size-6'
          },
          xl: {
            item: 'size-7',
            icon: 'size-7'
          }
        },
        color: {
          primary: {
            indicator: 'data-[state=active]:text-primary',
            item: 'outline-primary/25'
          },
          secondary: {
            indicator: 'data-[state=active]:text-secondary',
            item: 'outline-secondary/25'
          },
          success: {
            indicator: 'data-[state=active]:text-success',
            item: 'outline-success/25'
          },
          info: {
            indicator: 'data-[state=active]:text-info',
            item: 'outline-info/25'
          },
          warning: {
            indicator: 'data-[state=active]:text-warning',
            item: 'outline-warning/25'
          },
          error: {
            indicator: 'data-[state=active]:text-error',
            item: 'outline-error/25'
          },
          neutral: {
            indicator: 'data-[state=active]:text-highlighted',
            item: 'outline-inverted/25'
          }
        },
        readonly: {
          true: {
            root: 'cursor-default',
            item: 'cursor-default'
          },
          false: {}
        },
        disabled: {
          true: {
            root: 'opacity-75 cursor-not-allowed',
            item: 'cursor-not-allowed pointer-events-none'
          },
          false: {}
        }
      },
      compoundVariants: [
        {
          readonly: false,
          disabled: false,
          class: {
            item: 'hover:scale-110'
          }
        }
      ],
      defaultVariants: {
        color: 'primary',
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        inputRating: {
          slots: {
            root: '',
            item: [
              'relative inline-block cursor-pointer select-none rounded-sm has-focus-visible:outline-3',
              'transition'
            ],
            indicator: 'absolute inset-0 overflow-hidden outline-none text-transparent w-(--reka-rating-item-step-width) opacity-(--reka-rating-item-step-opacity) z-(--reka-rating-item-step-z-index)',
            icon: 'block',
            emptyIcon: 'block w-full h-full text-muted pointer-events-none'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'inline-flex items-center gap-0.5'
              },
              vertical: {
                root: 'inline-flex flex-col items-center gap-0.5'
              }
            },
            size: {
              xs: {
                item: 'size-3',
                icon: 'size-3'
              },
              sm: {
                item: 'size-4',
                icon: 'size-4'
              },
              md: {
                item: 'size-5',
                icon: 'size-5'
              },
              lg: {
                item: 'size-6',
                icon: 'size-6'
              },
              xl: {
                item: 'size-7',
                icon: 'size-7'
              }
            },
            color: {
              primary: {
                indicator: 'data-[state=active]:text-primary',
                item: 'outline-primary/25'
              },
              secondary: {
                indicator: 'data-[state=active]:text-secondary',
                item: 'outline-secondary/25'
              },
              success: {
                indicator: 'data-[state=active]:text-success',
                item: 'outline-success/25'
              },
              info: {
                indicator: 'data-[state=active]:text-info',
                item: 'outline-info/25'
              },
              warning: {
                indicator: 'data-[state=active]:text-warning',
                item: 'outline-warning/25'
              },
              error: {
                indicator: 'data-[state=active]:text-error',
                item: 'outline-error/25'
              },
              neutral: {
                indicator: 'data-[state=active]:text-highlighted',
                item: 'outline-inverted/25'
              }
            },
            readonly: {
              true: {
                root: 'cursor-default',
                item: 'cursor-default'
              },
              false: {}
            },
            disabled: {
              true: {
                root: 'opacity-75 cursor-not-allowed',
                item: 'cursor-not-allowed pointer-events-none'
              },
              false: {}
            }
          },
          compoundVariants: [
            {
              readonly: false,
              disabled: false,
              class: {
                item: 'hover:scale-110'
              }
            }
          ],
          defaultVariants: {
            color: 'primary',
            size: 'md'
          }
        }
      }
    })
  ]
})

Changelog écrit

No recent changes

InputNumber

An input for numerical values with a customizable range.

InputTags

An input element that displays interactive tags.