Links

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
import { whisper } from '@oliveai/ldk';
import {
IconSize,
IconVariant,
NewWhisper,
UpdateWhisper,
Whisper,
WhisperComponentType
} from "@oliveai/ldk/dist/whisper"
const ratingExampleConfig = ( (value: string, validationError: string): NewWhisper | UpdateWhisper => {
return {
label: 'Rating Example',
components: [
{
type: WhisperComponentType.Rating,
defaultValue: 3,
disabled: false,
emptyIcon: 'star',
emptyIconColor: '#e8e8e8',
emptyIconVariant: IconVariant.Sharp,
icon: 'star',
iconColor: '#f6fa05',
iconVariant: IconVariant.Sharp,
max: 10,
name: 'name',
onChange: (error: Error, number: number, whisper: Whisper) => {
console.info(`---Rating number = ${number}---`)
},
precision: 1,
readOnly: false,
size: IconSize.Medium,
value: 6,
}
]
}
})
const newRatingExampleConfig = (async () => {
await whisper.create(ratingExampleConfig('', '') as NewWhisper);
})
newRatingExampleConfig();
import { React, ReactWhisper } from "@oliveai/ldk";
import { IconSize, IconVariant } from "@oliveai/ldk/dist/whisper"
const RatingExample: React.FunctionComponent<Object> = () => {
return (
<oh-whisper label='Rating Example' onClose={ () => {}}>
<oh-rating
defaultValue={3}
disabled={false}
emptyIcon='star'
emptyIconColor='#e8e8e8'
emptyIconVariant={IconVariant.Sharp}
icon='star'
iconColor='#f6fa05'
iconVariant={IconVariant.Sharp}
max={10}
name='name'
onChange={(error, number) => {
console.info(`---Rating number = ${number}---`)
}}
precision={1}
readOnly={false}
size={IconSize.Medium}
value={6}
/>
</oh-whisper>
)
}
ReactWhisper.renderNewWhisper(<RatingExample />);