Rating
The Rating component generates a rating scale.

Props:

Properties
Types
Description
Required?
Default
defaultValue
number
The value that the rating scale will start at -- note that the value will override the defaultValue
3
disabled
boolean
disables and grays out component
false
emptyIcon
string
icon of rating that is not selected, example if rating is 4/5 then the emptyIcon is the fifth icon
star_border
emptyIconColor
string
Hex color of the emptyIcon
''
emptyIconVariant
IconVariant
sets the theme of the component IconVariant.Outlined , IconVariant.Round, IconVariant.Sharp, and IconVariant.TwoTone
undefined
icon
string
icon of rating that is selected, example if rating is 4/5 then the Icon is the first four icons
star
iconColor
string
Hex color of the Icon
var(--purplePrimary)
iconVariant
IconVariant
sets the theme of the component IconVariant.Outlined , IconVariant.Round, IconVariant.Sharp, and IconVariant.TwoTone
undefined
max
number
Max rating, set number of icons displayed
5
name
string
html name attribute
rating
onChange
Callback function( error, number, whisper) => {}
calls function when rating is changed
undefine
precision
number
the increment that the rating can increase or decrease
0.5
readOnly
boolean
enables/disables the ability to change the value
false
size
IconSize
size of component: IconSize.Small, IconSize.Medium, IconSize.Large,
IconSize.ExtraLarge
IconSize.Medium
value
number
value of rating
undefined

Examples

TypeScript
React
1
import { whisper } from '@oliveai/ldk';
2
import {
3
IconSize,
4
IconVariant,
5
NewWhisper,
6
UpdateWhisper,
7
Whisper,
8
WhisperComponentType
9
} from "@oliveai/ldk/dist/whisper"
10
11
const ratingExampleConfig = ( (value: string, validationError: string): NewWhisper | UpdateWhisper => {
12
return {
13
label: 'Rating Example',
14
components: [
15
{
16
type: WhisperComponentType.Rating,
17
defaultValue: 3,
18
disabled: false,
19
emptyIcon: 'star',
20
emptyIconColor: '#e8e8e8',
21
emptyIconVariant: IconVariant.Sharp,
22
icon: 'star',
23
iconColor: '#f6fa05',
24
iconVariant: IconVariant.Sharp,
25
max: 10,
26
name: 'name',
27
onChange: (error: Error, number: number, whisper: Whisper) => {
28
console.info(`---Rating number = ${number}---`)
29
},
30
precision: 1,
31
readOnly: false,
32
size: IconSize.Medium,
33
value: 6,
34
}
35
]
36
}
37
})
38
39
const newRatingExampleConfig = (async () => {
40
await whisper.create(ratingExampleConfig('', '') as NewWhisper);
41
})
42
43
newRatingExampleConfig();
44
Copied!
1
import { React, ReactWhisper } from "@oliveai/ldk";
2
import { IconSize, IconVariant } from "@oliveai/ldk/dist/whisper"
3
4
const RatingExample: React.FunctionComponent<Object> = () => {
5
6
return (
7
<oh-whisper label='Rating Example' onClose={ () => {}}>
8
<oh-rating
9
defaultValue={3}
10
disabled={false}
11
emptyIcon='star'
12
emptyIconColor='#e8e8e8'
13
emptyIconVariant={IconVariant.Sharp}
14
icon='star'
15
iconColor='#f6fa05'
16
iconVariant={IconVariant.Sharp}
17
max={10}
18
name='name'
19
onChange={(error, number) => {
20
console.info(`---Rating number = ${number}---`)
21
}}
22
precision={1}
23
readOnly={false}
24
size={IconSize.Medium}
25
value={6}
26
/>
27
</oh-whisper>
28
)
29
}
30
31
ReactWhisper.renderNewWhisper(<RatingExample />);
32
Copied!
Copy link