inputación

RatedGitHub también
Un componente para mostrar y recopilar calificaciones de los usuarios.

xph0000xUso

Utilice la directiva v-model para controlar el valor de calificación del componente 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>

Utilice el prop default-value para establecer el valor inicial cuando no necesite controlar su estado.

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

Step (Acción)

Utilice el prop step para controlar la granularidad de cada estrella. Configurarlo en 0.5 para permitir calificaciones de media estrella.

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

Longitud

Utilice el prop length para establecer el número de estrellas. Predeterminados a 5.

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

Claridad

Utilice el prop clearable para permitir a los usuarios borrar la calificación haciendo clic en el valor seleccionado actualmente.

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

Hoverable (Edición española)

Utilice el prop hoverable para controlar si la calificación previsualiza el valor al pasar el cursor sobre las estrellas.

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

Icon

Utilice el prop icon para personalizar el icono utilizado para las estrellas.

<template>
  <UInputRating icon="i-lucide-heart" :default-value="4" />
</template>
Puede personalizar el icono de estrella predeterminado globalmente en su app.config.ts bajo la tecla ui.icons.star.
Puede personalizar el icono de estrella predeterminado a nivel mundial en su vite.config.ts bajo la tecla ui.icons.star.

Empty Icon (en inglés)

Utilice el prop empty-icon para personalizar el icono utilizado para las estrellas vacías. Si no se proporciona, utiliza el mismo icono que icon.

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

color (Edición española)

Utilice el accesorio color para cambiar el color de las estrellas llenas.

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

Xph090xTamaño

Utilice el prop size para cambiar el tamaño de las estrellas.

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

Orientación

Utilice el prop orientation para cambiar la orientación de la clasificación. Predeterminados a horizontal.

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

Disabled

Cuando se desactiva, el componente ha reducido la opacidad (75%) y muestra un cursor not-allowed para indicar que no es interactivo.

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

Readonly

Utilice el prop readonly para mostrar una calificación sin permitir la interacción del usuario. A diferencia de disabled, mantiene la apariencia normal (opacidad completa, cursor predeterminado). Úselo cuando desee mostrar una calificación que no se puede cambiar pero que debe verse normal.

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

API (Edición española)

Props (Edición española)

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 en línea

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.

Emisiones

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

Temas

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 (Edición española)

No recent changes

InputNumber

An input for numerical values with a customizable range.

InputTags

An input element that displays interactive tags.