Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

Rating

Ratingは、ユーザーが評価を行うために使用させるコンポーネントです。

ソース@yamada-ui/rating

インポート

import { Rating } from "@yamada-ui/react"
Copied!

使い方

編集可能な例

<Rating />
Copied!

サイズを変更する

編集可能な例

<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => <Rating key={index} size={size} defaultValue={3} />}
  </For>
</VStack>
Copied!

カラースキームを変更する

編集可能な例

<VStack>
  <For each={["purple", "pink"]}>
    {(colorScheme, index) => (
      <Rating key={index} colorScheme={colorScheme} defaultValue={3} />
    )}
  </For>
</VStack>
Copied!

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに数値を設定します。

編集可能な例

<Rating defaultValue={3} />
Copied!

アイテム数を変更する

アイテム数を変更する場合は、itemsに数値を設定します。

編集可能な例

<VStack>
  <For each={[4, 5, 6]}>
    {(items, index) => <Rating key={index} items={items} />}
  </For>
</VStack>
Copied!

小数点を許容する

小数点を許容する場合は、fractionsに数値を設定します。

例えば、0.25を許容したい場合は、4を設定します。

編集可能な例

<VStack>
  <For
    each={[
      {
        fractions: 2,
        defaultValue: 1.5,
      },
      {
        fractions: 3,
        defaultValue: 2.33,
      },
      {
        fractions: 4,
        defaultValue: 3.75,
      },
    ]}
  >
    {({ fractions, defaultValue }, index) => (
      <Rating key={index} fractions={fractions} defaultValue={defaultValue} />
    )}
  </For>
</VStack>
Copied!

色を変更する

色を変更する場合は、colorに文字列または関数を設定します。colorは、アイテムの数値を提供します。

編集可能な例

const getColor = (value: number) => {
  switch (value) {
    case 1:
      return "red.500"

    case 2:
      return "orange.500"

    case 3:
      return "yellow.500"

    case 4:
      return "green.500"

    case 5:
      return "blue.500"

    default:
      return undefined
  }
}

return (
  <VStack>
    <Rating color="green.500" defaultValue={3} />
    <Rating color={getColor} defaultValue={3} />
  </VStack>
)
Copied!

アイコンをカスタマイズする

アイコンをカスタマイズする場合は、emptyIconとfilledIconにRectNodeまたは関数を設定します。emptyIconとfilledIconは、アイテムの数値を提供します。

  • emptyIcon: 選択されていないアイコンに使われます。
  • filledIcon: 選択されているアイコンに使われます。

編集可能な例

const getColor = (value: number) => {
  switch (value) {
    case 1:
      return "red.500"

    case 2:
      return "orange.500"

    case 3:
      return "yellow.500"

    case 4:
      return "green.500"

    case 5:
      return "blue.500"

    default:
      return undefined
  }
}

const getIcon = (value: number) => {
  switch (value) {
    case 1:
      return <AngryIcon />

    case 2:
      return <FrownIcon />

    case 3:
      return <SmileIcon />

    case 4:
      return <LaughIcon />

    case 5:
      return <SmilePlusIcon />

    default:
      return null
  }
}

return (
  <VStack>
    <Rating
      defaultValue={3}
      emptyIcon={<GhostIcon />}
      filledIcon={<GhostIcon />}
    />

    <Rating
      gap="xs"
      color={getColor}
      emptyIcon={getIcon}
      filledIcon={getIcon}
    />
  </VStack>
)
Copied!

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

<VStack>
  <Rating isDisabled defaultValue={3} />

  <Fieldset isDisabled legend="How satisfied are you with Yamada UI?">
    <Rating defaultValue={3} />
  </Fieldset>
</VStack>
Copied!

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

<VStack>
  <Rating isReadOnly defaultValue={3} />

  <Fieldset isReadOnly legend="How satisfied are you with Yamada UI?">
    <Rating defaultValue={3} />
  </Fieldset>
</VStack>
Copied!

制御する

編集可能な例

const [value, onChange] = useState<number>(3)

return <Rating value={value} onChange={onChange} />
Copied!

React Hook Formを使う

編集可能な例

type Data = { rating: boolean }

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>()

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <Fieldset
      isInvalid={!!errors.rating}
      legend="How satisfied are you with Yamada UI?"
      errorMessage={errors.rating ? errors.rating.message : undefined}
    >
      <Controller
        name="rating"
        control={control}
        render={({ field }) => <Rating {...field} />}
      />
    </Fieldset>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

GitHubでこのページを編集する

前Editable次SegmentedControl