Rate Picker

import { AXRatePickerModule } from '@acorex/components/rate-picker';

Rate Picker component enables users to select and display a rating value interactively. It provides an intuitive interface, allowing users to rate items or services using a range of visual indicators, such as stars or other symbols, making it ideal for feedback and review-based applications.

Overview

In this section, you can test different options of this component and see the output in real time

Value

Max

Step

Icon info

fa -

Size

Animation

Disable

Readonly

Value: 2.5

Usage

A simple example of using ax-rate-picker

Preview

Code

Custom Icon

ax-rate-picker with custom icon.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-rate-picker-font-size	1.5rem	Font size of the rate picker icons and text.
--ax-comp-rate-picker-bg-color	var(--ax-sys-color-warning-surface)	Color of rate picker background color when its active.
--ax-comp-rate-picker-inactive-bg-color	var(--ax-sys-color-dark)	Color of rate picker background color when its inactive.
--ax-comp-rate-picker-inactive-bg-color-opacity	0.2	value of rate picker opacity background color.