Inputation

Das RatingGitHub
Eine Komponente, um Bewertungen von Benutzern anzuzeigen und zu sammeln.

Bearbeiten

Verwenden Sie die v-model-Direktive, um den Ratingwert der Komponente InputRating zu steuern.

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

Verwenden Sie die default-value-prop, um den Anfangswert festzulegen, wenn Sie den Zustand nicht steuern müssen.

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

step-### step

Verwenden Sie die step-prop, um die Granularität jedes Sterns zu steuern. Setzen Sie sie auf 0.5, um Halbsterne-Bewertungen zu ermöglichen.

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

Length ist

Verwenden Sie die length-prop, um die Anzahl der Sterne einzustellen. Standardmäßig ist 5.

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

Clearable.de Bearbeiten

Verwenden Sie die clearable-Prop, um Benutzern zu ermöglichen, die Bewertung durch Klicken auf den aktuell ausgewählten Wert zu löschen.

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

Hoverable Bearbeiten

Verwenden Sie die hoverable-prop, um zu steuern, ob die Bewertung den Wert beim Schweben über den Sternen anzeigt.

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

Icon (englisch)

Verwenden Sie die icon-Prop, um das Symbol für Sterne anzupassen. Standardmäßig ist i-lucide-star.

<template>
  <UInputRating icon="i-lucide-heart" :default-value="4" />
</template>
Sie können das Standardsternsymbol global in Ihrem app.config.ts unter der ui.icons.star-Taste anpassen.
Sie können das Standardsternsymbol global in Ihrem vite.config.ts unter der ui.icons.star-Taste anpassen.

Empty Icon (nicht vorhanden)

Verwenden Sie die empty-icon-prop, um das Symbol für leere Sterne. If nicht zur Verfügung gestellt, verwendet das gleiche Symbol wie icon.

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

Color (englisch)

Verwenden Sie die color-Prop, um die Farbe der gefüllten Sterne zu ändern.

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

Size

Verwenden Sie die size-Prop, um die Größe der Sterne zu ändern.

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

Orientierung

Verwenden Sie die orientation prop, um die Ausrichtung der Bewertung zu ändern. Standardmäßig auf horizontal.

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

Disabled (englisch)

Wenn deaktiviert, hat die Komponente eine reduzierte Deckkraft (75%) und zeigt einen not-allowed-Cursor an, um anzuzeigen, dass sie nicht interaktiv ist.

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

Readonly (englisch)

Verwenden Sie die readonly-Prop, um eine Bewertung anzuzeigen, ohne die Benutzerinteraktion zuzulassen. Im Gegensatz zu disabled behält sie das normale Erscheinungsbild bei (volle Deckkraft, Standard-Cursor). Verwenden Sie diese Funktion, wenn Sie eine Bewertung anzeigen möchten, die nicht geändert werden kann, aber normal aussehen sollte.

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

API Bearbeiten

Props (englisch)

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 (englisch)

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 (nicht)

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

Theme Bearbeiten

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 (englisch)

No recent changes

InputNumber

An input for numerical values with a customizable range.

InputTags

An input element that displays interactive tags.