Rate

Компонент Rate предназначен для визуализации и ввода рейтингов с помощью звёзд или других символов. Он является интерактивным и может использоваться как для отображения существующего рейтинга, так и для получения оценки от пользователя.

Импорт и базовое использование

Для использования Rate необходимо импортировать компонент из библиотеки Ant Design:

import { Rate } from 'antd';

Базовый пример отображения пятизвёздочного рейтинга:

<Rate />

По умолчанию отображается пять звёзд, пользователь может выбрать любое количество от 0 до 5.

Настройка количества символов

Количество отображаемых символов настраивается через свойство count:

<Rate count={10} />

Это создаёт рейтинг с десятью звёздами вместо стандартных пяти. Свойство count принимает только положительные числа.

Значение рейтинга

Значение рейтинга задаётся с помощью свойства value:

<Rate value={3} />
  • value — число, которое определяет текущий рейтинг.
  • Если необходимо управлять состоянием рейтинга динамически, используется связка с состоянием через React:
import React, { useState } from 'react';
import { Rate } from 'antd';

const RatingExample = () => {
  const [value, setValue] = useState(2);

  return <Rate onCha nge={setValue} value={value} />;
};

Событие onChange вызывается при выборе нового рейтинга и возвращает число, соответствующее выбранному количеству звёзд.

Частичные значения и дробные оценки

Rate поддерживает дробные значения через свойство allowHalf:

<Rate allowHalf defaultValue={2.5} />
  • allowHalf={true} позволяет выбирать половину звезды.
  • defaultValue задаёт начальный рейтинг.

При включённой опции allowHalf пользователи могут оценивать, например, 3.5 звезды.

Заблокированный режим

Для отображения рейтинга без возможности изменения используется свойство disabled:

<Rate disabled value={4} />

Это полезно для отображения уже выставленных оценок, когда пользователь не должен их изменять.

Кастомизация символов

По умолчанию используется иконка звезды. Для замены символа используется свойство character:

import { SmileOutlined } from '@ant-design/icons';

<Rate character={<SmileOutlined />} />

Можно передать любой React-элемент, что позволяет использовать собственные иконки или текстовые символы.

Цвет и стиль

Ant Design использует стандартные темы для Rate, но можно изменять цвет и размер через стили:

<Rate style={{ fontSize: 24, color: '#faad14' }} />
  • fontSize — размер символов.
  • color — цвет активных символов.

Для более сложной стилизации можно использовать CSS-классы:

<Rate className="custom-rate" />
.custom-rate .ant-rate-star-full {
  color: #52c41a;
}

Контроль состояния и события

Rate поддерживает следующие события:

  • onChange(value: number) — вызывается при изменении рейтинга.
  • onHoverChange(value: number) — вызывается при наведении на символ, позволяет динамически отображать подсказки.

Пример с отображением текущего значения при наведении:

import React, { useState } from 'react';
import { Rate, Tooltip } from 'antd';

const desc = ['Очень плохо', 'Плохо', 'Нормально', 'Хорошо', 'Отлично'];

const HoverRating = () => {
  const [value, setValue] = useState(3);
  const [hoverValue, setHoverValue] = useState(undefined);

  return (
    <>
      <Rate
        onCha nge={setValue}
        onHoverCha nge={setHoverValue}
        value={value}
      />
      <span>{hoverValue !== undefined ? desc[hoverValue - 1] : desc[value - 1]}</span>
    </>
  );
};

Размеры и визуальные варианты

Rate поддерживает различные размеры через CSS. Например:

<Rate style={{ fontSize: 16 }} />
<Rate style={{ fontSize: 32 }} />

Также можно комбинировать disabled, allowHalf и кастомные символы для создания уникального визуального опыта.

Использование с формами Ant Design

Компонент Rate полностью интегрируется с компонентом Form.Item:

import { Form, Rate, Button } from 'antd';

<Form onFin ish={(values) => console.log(values)}>
  <Form.Item name="rating" label="Оценка" rules={[{ required: true, message: 'Поставьте рейтинг!' }]}>
    <Rate />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">Отправить</Button>
  </Form.Item>
</Form>
  • name — имя поля формы.
  • rules — правила валидации, такие как обязательность выбора рейтинга.

Примеры комбинаций

  1. Полный контроль с половинными оценками и кастомными символами:
<Rate
  allowHalf
  defaultValue={2.5}
  character={<SmileOutlined />}
  style={{ fontSize: 28, color: '#ff4d4f' }}
/>
  1. Только отображение существующего рейтинга:
<Rate disabled value={4} />
  1. С динамическим отображением текста при наведении:
<Rate onCha nge={setValue} onHoverCha nge={setHoverValue} value={value} />
<span>{hoverValue !== undefined ? desc[hoverValue - 1] : desc[value - 1]}</span>

Компонент Rate в Ant Design отличается высокой гибкостью: можно изменять символы, поддерживать половинные оценки, блокировать для отображения, интегрировать с формами и стилизовать через CSS. Это делает его универсальным инструментом для создания интерфейсов с рейтингами.

Оглавление