InputRating Soon

RatingGitLab
Um componente para exibir e coletar avaliações dos usuários.

Uso

Use a diretiva v-model para controlar o valor de avaliação do componente InputRating.

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

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

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)
</script>

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

Use a prop default-value para definir o valor inicial quando você não precisa controlar o estado.

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

Etapa

Use a prop step para controlar a granularidade de cada estrela. Defina-a como 0.5 para permitir avaliações de meia estrela.

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

Comprimento

Use a prop length para definir o número de estrelas. O padrão é 5.

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

Limpável

Use a prop clearable para permitir que os usuários limpem a avaliação clicando no valor atualmente selecionado. O padrão é false.

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

Com hover

Use a prop hoverable para controlar se a avaliação mostra uma prévia do valor ao passar o mouse sobre as estrelas. O padrão é false.

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

Ícone

Use a prop icon para personalizar o ícone usado para as estrelas. O padrão é i-lucide-star.

<template>
  <NInputRating icon="i-lucide-heart" :default-value="4" />
</template>
Você pode personalizar o ícone de estrela padrão globalmente no seu app.config.ts na chave ui.icons.star.
Você pode personalizar o ícone de estrela padrão globalmente no seu vite.config.ts na chave ui.icons.star.

Ícone de vazio

Use a prop empty-icon para personalizar o ícone usado para as estrelas vazias. Se não for fornecido, usa o mesmo ícone de icon.

<template>
  <NInputRating empty-icon="i-ph-star" icon="i-ph-star-fill" :default-value="3" />
</template>

Cor

Use a prop color para alterar a cor das estrelas preenchidas.

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

Tamanho

Use a prop size para alterar o tamanho das estrelas.

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

Orientação

Use a prop orientation para alterar a orientação da avaliação. O padrão é horizontal.

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

Desabilitado

Use a prop disabled para desabilitar o componente InputRating. Quando desabilitado, o componente tem opacidade reduzida (75%) e exibe um cursor not-allowed para indicar que não é interativo.

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

Somente leitura

Use a prop readonly para exibir uma avaliação sem permitir interação do usuário. Diferentemente de disabled, ela mantém a aparência normal (opacidade total, cursor padrão). Use quando você quiser exibir uma avaliação que não pode ser alterada, mas deve parecer normal.

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

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

id string

The id of the rating.

readonlyfalseboolean

Make the rating readonly (non-interactive).

iconappConfig.ui.icons.starany

The icon displayed for each rating value.

emptyIconany

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

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

The orientation of the rating.

step1 1 | 0.5 | 0.25 | 0.1

The granularity each rating item is divided into.

disabledboolean

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

requiredboolean

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.

modelValue number

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

defaultValue0 number

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

length5 number

The number of rating items to render.

clearablefalseboolean

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

hoverablefalseboolean

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.

Emits

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

Tema

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'
          },
          accent: {
            indicator: 'data-[state=active]:text-accent',
            item: 'outline-accent/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 '@nitro/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'
              },
              accent: {
                indicator: 'data-[state=active]:text-accent',
                item: 'outline-accent/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

No recent changes

InputNumber

Um input para valores numéricos com intervalo personalizável.

InputTags

Um elemento de input que exibe tags interativas.