入力評価

レーティングサイトマップ
ユーザーからの評価を表示および収集するコンポーネント。

使用法

v-modelディレクティブを使用して、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>

状態を制御する必要がない場合は、default-valueプロパティを使用して初期値を設定します。

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

Step

stepプロパティを使用して各スターの粒度を制御します。0.5に設定して、ハーフスターのレーティングを許可します。

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

Length

lengthプロパティを使用して星の数を設定します。デフォルトは5です。

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

Clearable

clearableプロパティを使用して、ユーザーが現在選択されている値をクリックしてレーティングをクリアできるようにします。デフォルトはfalseです。

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

Hoverable

hoverableプロパティを使用して、星の上にホバリングしたときにレーティングが値をプレビューするかどうかを制御します。デフォルトはfalseです。

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

Icon

iconプロパティを使用して、星に使用するアイコンをカスタマイズします。デフォルトはi-lucide-starです。

<template>
  <UInputRating icon="i-lucide-heart" :default-value="4" />
</template>
デフォルトのスターアイコンはapp.config.tsのui.icons.starキーでグローバルにカスタマイズできます。
デフォルトのスターアイコンはvite.config.tsのui.icons.starキーでグローバルにカスタマイズできます。

Emptyのアイコン

empty-iconプロパティを使用して、空の星に使用するアイコンをカスタマイズします。指定されていない場合は、iconと同じアイコンを使用します。

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

Color

colorプロパティを使用して、塗りつぶされた星の色を変更します。

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

サイズ

sizeプロパティを使用して星のサイズを変更します。

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

Orientation

orientationプロパティを使用してレーティングの向きを変更します。デフォルトはhorizontalです。

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

無効

disabledプロパティを使用してInputRatingコンポーネントを無効にします。無効にすると、コンポーネントの不透明度が75%減少し、対話的でないことを示すnot-allowedカーソルが表示されます。

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

読み取り専用

readonlyプロパティを使用して、ユーザーの操作を許可せずにレーティングを表示します。disabledとは異なり、通常の外観完全な不透明度、デフォルトカーソルを維持します。変更できないレーティングを表示したい場合に使用します。

<template>
  <UInputRating 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.

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; }

スロット

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]

Theme

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

No recent changes

InputNumber

An input for numerical values with a customizable range.

InputTags

An input element that displays interactive tags.