评分

用于以可视化形式显示评论和评分。

import { RatingGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <RatingGroup.Root count={5} defaultValue={3} size="sm">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

用法

import { RatingGroup } from "@chakra-ui/react"

<RatingGroup.Root>
  <RatingGroup.Label />
  <RatingGroup.HiddenInput />
  <RatingGroup.Control>
    <RatingGroup.Item>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  </RatingGroup.Control>
</RatingGroup.Root>

信息

如果您偏好封闭的组件组合，请查看下面的代码片段。

快捷方式

Rating 组件还为常见用例提供了一组快捷方式。

RatingControl

此组件渲染在 count prop 中指定的评分项数量。

这有效

<RatingGroup.Control>
  {Array.from({ length: 5 }).map((_, index) => (
    <RatingGroup.Item key={index} index={index + 1}>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  ))}
</RatingGroup.Control>

如果您不需要自定义评分图标，这可能更简洁

<RatingGroup.Control />

示例

基本

import { RatingGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <RatingGroup.Root count={5} defaultValue={3} size="sm">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

尺寸

使用 size prop 来改变评分组件的尺寸。

import { For, RatingGroup, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <For each={["xs", "sm", "md", "lg"]}>
        {(size) => (
          <RatingGroup.Root key={size} count={5} defaultValue={3} size={size}>
            <RatingGroup.HiddenInput />
            <RatingGroup.Control />
          </RatingGroup.Root>
        )}
      </For>
    </Stack>
  )
}

受控

使用 value 和 onValueChange prop 来控制评分值。

"use client"

import { RatingGroup } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState(3)
  return (
    <RatingGroup.Root
      count={5}
      value={value}
      onValueChange={(e) => setValue(e.value)}
    >
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

状态管理

控制评分的另一种方法是使用 RootProvider 组件和 useRatingGroup 状态管理钩子。

这样你就可以在组件外部访问评分状态和方法。

"use client"

import { RatingGroup, useRatingGroup } from "@chakra-ui/react"

const Demo = () => {
  const store = useRatingGroup({ count: 5, defaultValue: 3 })
  return (
    <RatingGroup.RootProvider value={store} size="sm">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.RootProvider>
  )
}

只读

使用 readOnly prop 使评分组件变为只读。

import { RatingGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <RatingGroup.Root readOnly count={5} defaultValue={3} size="sm">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

Hook 表单

以下是评分组件与 react-hook-form 一起使用的示例。

"use client"

import { Button, Field, RatingGroup, Stack } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"

const formSchema = z.object({
  rating: z.number({ required_error: "Rating is required" }).min(1).max(5),
})

type FormValues = z.infer<typeof formSchema>

const Demo = () => {
  const {
    handleSubmit,
    formState: { errors },
    control,
  } = useForm<FormValues>({
    resolver: zodResolver(formSchema),
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start">
        <Field.Root invalid={!!errors.rating}>
          <Field.Label>Rating</Field.Label>
          <Controller
            control={control}
            name="rating"
            render={({ field }) => (
              <RatingGroup.Root
                count={5}
                name={field.name}
                value={field.value}
                onValueChange={({ value }) => field.onChange(value)}
              >
                <RatingGroup.HiddenInput />
                <RatingGroup.Control />
              </RatingGroup.Root>
            )}
          />
          <Field.ErrorText>{errors.rating?.message}</Field.ErrorText>
        </Field.Root>
        <Button size="sm" type="submit">
          Submit
        </Button>
      </Stack>
    </form>
  )
}

自定义图标

使用 icon prop 将自定义图标传递给评分组件。这会覆盖默认的星形图标。

import { RatingGroup } from "@chakra-ui/react"
import { IoHeart } from "react-icons/io5"

const Demo = () => {
  return (
    <RatingGroup.Root count={5} defaultValue={4} colorPalette="red">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control>
        {Array.from({ length: 5 }).map((_, index) => (
          <RatingGroup.Item key={index} index={index + 1}>
            <RatingGroup.ItemIndicator icon={<IoHeart />} />
          </RatingGroup.Item>
        ))}
      </RatingGroup.Control>
    </RatingGroup.Root>
  )
}

半星

使用 allowHalf prop 允许半星评分。

import { RatingGroup } from "@chakra-ui/react"

const Demo = () => {
  return (
    <RatingGroup.Root allowHalf count={5} defaultValue={3.5} size="sm">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

表情符号

使用表情符号组合评分组件。

😡😠😐😊😍

import { RatingGroup } from "@chakra-ui/react"

const emojiMap: Record<string, string> = {
  1: "😡",
  2: "😠",
  3: "😐",
  4: "😊",
  5: "😍",
}

const Demo = () => {
  return (
    <RatingGroup.Root count={5} defaultValue={3}>
      <RatingGroup.Control>
        {Array.from({ length: 5 }).map((_, index) => (
          <RatingGroup.Item
            key={index}
            index={index + 1}
            minW="9"
            filter={{ base: "grayscale(1)", _checked: "revert" }}
            transition="scale 0.1s"
            _hover={{ scale: "1.1" }}
          >
            {emojiMap[index + 1]}
          </RatingGroup.Item>
        ))}
      </RatingGroup.Control>
    </RatingGroup.Root>
  )
}

颜色

使用 colorPalette prop 来改变评分的颜色

灰色

红色

绿色

蓝色

青色

粉色

紫色

青色

橙色

黄色

import { RatingGroup, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"

const Demo = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          px="4"
        >
          <Text minW="8ch">{colorPalette}</Text>

          <RatingGroup.Root
            count={5}
            defaultValue={3}
            size="sm"
            colorPalette={colorPalette}
          >
            <RatingGroup.HiddenInput />
            <RatingGroup.Control />
          </RatingGroup.Root>
        </Stack>
      ))}
    </Stack>
  )
}

用户评价

使用评分组件来显示用户评价。

Sage 是一位优秀的软件工程师。他非常专业且知识渊博。

Matthew Jones

首席技术官，公司

import { Avatar, HStack, RatingGroup, Stack, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack maxW="320px" gap="4">
      <RatingGroup.Root
        colorPalette="orange"
        readOnly
        count={5}
        defaultValue={5}
        size="xs"
      >
        <RatingGroup.HiddenInput />
        <RatingGroup.Control />
      </RatingGroup.Root>

      <Text>
        Sage is a great software engineer. He is very professional and
        knowledgeable.
      </Text>

      <HStack gap="4">
        <Avatar.Root>
          <Avatar.Fallback name="Matthew Jones" />
          <Avatar.Image src="https://randomuser.me/api/portraits/men/70.jpg" />
        </Avatar.Root>
        <Stack textStyle="sm" gap="0">
          <Text fontWeight="medium">Matthew Jones</Text>
          <Text color="fg.muted">CTO, Company</Text>
        </Stack>
      </HStack>
    </Stack>
  )
}

封闭组件

以下是为封闭组件组合设置评分组件的方法。

import { RatingGroup } from "@chakra-ui/react"
import * as React from "react"

export interface RatingProps extends RatingGroup.RootProps {
  icon?: React.ReactElement
  count?: number
  label?: React.ReactNode
}

export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
  function Rating(props, ref) {
    const { icon, count = 5, label, ...rest } = props
    return (
      <RatingGroup.Root ref={ref} count={count} {...rest}>
        {label && <RatingGroup.Label>{label}</RatingGroup.Label>}
        <RatingGroup.HiddenInput />
        <RatingGroup.Control>
          {Array.from({ length: count }).map((_, index) => (
            <RatingGroup.Item key={index} index={index + 1}>
              <RatingGroup.ItemIndicator icon={icon} />
            </RatingGroup.Item>
          ))}
        </RatingGroup.Control>
      </RatingGroup.Root>
    )
  },
)

以下是如何使用它

<Rating defaultValue={3} size="sm" />

属性

根

属性	默认	类型
`count`	`'5'`	`数字` 评分的总数。
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` 组件的颜色调色板
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` 组件的尺寸
`allowHalf`		`布尔值` 是否允许半星。
`asChild`		`布尔值` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。更多详情，请阅读我们的组合指南。
`autoFocus`		`布尔值` 是否自动聚焦评分。
`defaultValue`		`数字` 评分组首次渲染时的初始值。在您不需要控制评分组状态时使用。
`disabled`		`布尔值` 评分是否禁用。
`form`		`字符串` 关联的底层输入元素表单。
`id`		`字符串` 机器的唯一标识符。
`ids`		`Partial<{ root: string label: string hiddenInput: string control: string item(id: string): string }>` 评分中元素的ID。用于组合时很有用。
`name`		`字符串` 评分元素的名称属性（在表单中使用）。
`onHoverChange`		`(details: HoverChangeDetails) => void` 当评分值被悬停时调用的函数。
`onValueChange`		`(details: ValueChangeDetails) => void` 当评分值改变时调用的函数。
`readOnly`		`布尔值` 评分是否只读。
`required`		`布尔值` 评分是否为必填项。
`translations`		`IntlTranslations` 指定用于标识无障碍元素及其状态的本地化字符串
`value`		`数字` 当前评分值。
`as`		`React.ElementType` 要渲染的底层元素。
`unstyled`		`布尔值` 是否移除组件的样式。

项

属性	默认	类型
`index` *		`数字`
`asChild`		`布尔值` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。更多详情，请阅读我们的组合指南。

上一个

单选框

下一个

分段控制

评分

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法