Rating
The Rating component generates a rating scale.
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 |
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 />);
Last modified 6mo ago