Rating

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

<Rating />

使い方

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

import { Rating } from "@/components/ui"

import { Rating } from "@workspaces/ui"

<Rating />

サイズを変更する

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

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

<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Rating key={colorScheme} colorScheme={colorScheme} defaultValue={3} />
    )}
  </For>
</VStack>

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

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

個数を変更する

個数を変更する場合は、countに数値を設定します。

小数点を設定する

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

例えば、0.25を設定する場合は、4を設定します。

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

ハイライトする

ハイライトする場合は、highlightSelectedOnlyをtrueに設定します。

色を変更する

色を変更する場合は、colorに文字列または関数を設定します。

const getColor = useCallback((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>
)

無効にする

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

読み取り専用にする

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

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

アイコンをカスタマイズする場合は、emptyIconとfilledIconにReactNodeまたは関数を設定します。

const getColor = useCallback((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 = useCallback((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>
)

制御する

Props

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`color`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The color of the filled icons.
`count`	`5`	`number` Number of controls that should be rendered.
`defaultValue`	`0`	`number` The initial value of the rating.
`disabled`	`false`	`boolean` If `true`, the field will be disabled.
`emptyIcon`	-	`ReactNodeOrFunction<number>` The empty icon for the rating.
`filledIcon`	-	`ReactNodeOrFunction<number>` The filled icon for the rating.
`fractions`	`1`	`number` Number of fractions each item can be divided into,
`groupProps`	-	`FunctionOrValue<number, RatingGroupProps>` Props for the rating group.
`highlightSelectedOnly`	`false`	`boolean` If `true`, only the selected icons will be filled.
`iconProps`	-	`FunctionOrValue<number, RatingIconProps>` Props for the rating item.
`id`	-	`string` The top-level id string that will be applied to the rating. The index of the rating item will be appended to this top-level id.
`inputProps`	-	`FunctionOrValue<number, HTMLStyledProps<"input">>` Props for the input element.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`itemProps`	-	`FunctionOrValue<number, RatingItemProps>` Props for the rating item.
`name`	-	`string` The name of the input element.
`onChange`	-	`(value: number) => void` The callback invoked when value state changes.
`onHover`	-	`(value: number) => void` The callback invoked when hovering over the rating.
`readOnly`	`false`	`boolean` If `true`, the field will be readonly.
`required`	`false`	`boolean` If `true`, the field will be required.
`value`	-	`number` The value of the rating.

アクセシビリティ

Ratingは、アクセシビリティに関してWAI-ARIA - Radio Group Patternに従います。

Ratingにaria-labelまたはaria-labelledbyを設定すると、スクリーンリーダーによって読み上げられます。

<Rating aria-label="Rating" />

<VStack gap="sm">
  <Heading as="h3" id="label">
    Rating
  </Heading>

  <Rating aria-labelledby="label" />
</VStack>

キー	説明	状態
`Tab`	選択された項目をフォーカスします。項目が選択されていない場合は、最初の項目をフォーカスします。	-
`ArrowLeft`, `ArrowUp`	前の項目をフォーカスして選択します。最初の項目の場合は、最後の項目をフォーカスして選択します。以前に選択されていた項目は、未選択にします。	-
`ArrowRight`, `ArrowDown`	次の項目をフォーカスして選択します。最後の項目の場合は、最初の項目をフォーカスして選択します。以前に選択されていた項目は、未選択にします。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Rating`	`role="radiogroup"`	ラジオグループであることを示します。
	`aria-label`	選択されたアイテムの数を示します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`disabled`が設定されている場合は`"true"`を設定します。
`RatingItem`	`aria-label`	`value`を設定します。
`RatingIcon`	`aria-hidden="true"`	`RatingIcon`をアクセシビリティツリーから除外します。