Rating

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!

Whisper Components - Previous

Radio

Next - Whisper Components

RichTextEditor

Last modified 1mo ago

Copy link

Contents

Props:

Examples