InputRating (입력 등급)

사용자로부터 등급을 표시하고 수집하는 구성요소입니다.

Usage

v-model 지시어를 사용하여 InputRating 구성 요소의 등급 값을 제어합니다.

modelValue

<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 prop을 사용하여 초기값을 설정합니다.

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

Step (### Step)

step 소품을 사용하여 각 별의 세분화를 제어합니다. 절반 별 등급을 허용하려면 0.5로 설정합니다.

step

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

Length 길이

length 소품을 사용하여 별 수를 설정합니다. 기본값은 5입니다.

length

step

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

지우기 가능

clearable 소품을 사용하여 사용자가 현재 선택한 값을 클릭하여 등급을 지울 수 있도록 합니다. 기본값은 false입니다.

clearable

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

Hoverable 사용 가능

hoverable 소품을 사용하여 별 위에 마우스를 놓을 때 등급이 값을 미리 볼지 여부를 제어합니다. 기본값은 false입니다.

hoverable

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

Icon 이미지

icon 소품을 사용하여 별에 사용할 아이콘을 사용자 정의합니다. 기본값은 i-lucide-star입니다.

icon

<template>
  <UInputRating icon="i-lucide-heart" :default-value="4" />
</template>

ui.icons.star 키 아래에서 app.config.ts의 기본 별 아이콘을 전역적으로 사용자 정의할 수 있습니다.

ui.icons.star 키 아래에서 vite.config.ts의 기본 별 아이콘을 전역적으로 사용자 정의할 수 있습니다.

빈 아이콘

empty-icon 소품을 사용하여 빈 별에 사용할 아이콘을 사용자 정의합니다. 제공되지 않으면 icon와 동일한 아이콘을 사용합니다.

emptyIcon

icon

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

Color 이미지

color 소품을 사용하여 채워진 별의 색상을 변경합니다.

color

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

Size

size Prop을 사용하여 별의 크기를 변경합니다.

size

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

방향 성

orientation 소품을 사용하여 등급 방향을 변경합니다. 기본값은 horizontal입니다.

orientation

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

Disabled 사용 안 함

disabled 소품을 사용하여 InputRating 구성 요소를 비활성화합니다. 비활성화하면 구성 요소의 불투명도(75%)가 줄어들고 not-allowed 커서가 나타나 상호 작용이 아니라는 것을 나타냅니다.

disabled

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

ReadOnly 읽기 전용

readonly 소품을 사용하면 사용자 상호 작용을 허용하지 않고 등급을 표시할 수 있습니다. disabled와 달리 정상적인 모양(전체 불투명도, 기본 커서)을 유지합니다. 변경할 수 없지만 정상적으로 보이는 등급을 표시하려는 경우에 사용합니다.

readonly

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

API 파일

Props (### 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'
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

InputNumber

An input for numerical values with a customizable range.

InputTags

An input element that displays interactive tags.