Rating API
Documentação da API para o componente React Rating . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import Rating from '@mui/material/Rating';
// ou
import { Rating } from '@mui/material';Nome do componente
The nameMuiRating can be used when providing default props or style overrides in the theme.Propriedades
Props of the nativo component are also available.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| defaultValue | number | null | The default input value. Use when the component is not controlled. |
| disabled | bool | false | Se true, o componente está desabilitado. |
| emptyIcon | node | <StarBorder fontSize="inherit" /> | The icon to display when empty. |
| emptyLabelText | node | 'Empty' | The label read when the rating input is empty. |
| getLabelText | func | function defaultLabelText(value) { return `${value} Star${value !== 1 ? 's' : ''}`; } | Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating. This is important for screen reader users. For localization purposes, you can use the provided translations. Signature: function(value: number) => stringvalue: The rating label's value to format. |
| highlightSelectedOnly | bool | false | If true, only the selected icon will be highlighted. |
| icon | node | <Star fontSize="inherit" /> | The icon element. |
| IconContainerComponent | elementType | function IconContainer(props) { const { value, ...other } = props; return <span {...other} />; } | The component containing the icon. |
| max | number | 5 | Maximum rating. |
| name | string | The name attribute of the radio input elements. This input name should be unique within the page. Being unique within a form is insufficient since the name is used to generated IDs. | |
| onChange | func | Callback fired when the value changes. Signature: function(event: object, value: number | null) => voidevent: The event source of the callback. value: The new value. | |
| onChangeActive | func | Callback function that is fired when the hover state changes. Signature: function(event: object, value: number) => voidevent: The event source of the callback. value: The new value. | |
| precision | number | 1 | The minimum increment value change allowed. |
| readOnly | bool | false | Removes all hover effects and pointer events. |
| size | 'small' | 'medium' | 'large' | string | 'medium' | The size of the autocomplete. |
| sx | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| value | number | The rating value. |
O
ref é encaminhado para o elemento raiz.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiRating-root | Estilos aplicados ao elemento raiz. |
| sizeSmall | .MuiRating-sizeSmall | Estilos aplicados para o elemento raiz se size="small". |
| sizeMedium | .MuiRating-sizeMedium | Estilos aplicados para o elemento raiz se size="medium". |
| sizeLarge | .MuiRating-sizeLarge | Estilos aplicados para o elemento raiz se size="large". |
| readOnly | .MuiRating-readOnly | Estilos aplicados para o elemento raiz se readOnly={true}. |
| disabled | .Mui-disabled | Pseudo-class aplicada a o elemento raiz se disabled={true}. |
| focusVisible | .Mui-focusVisible | Pseudo-class aplicada a o elemento raiz se teclado focado. |
| visuallyHidden | .MuiRating-visuallyHidden | Visually hide an element. |
| label | .MuiRating-label | Estilos aplicados a the label elements. |
| labelEmptyValueActive | .MuiRating-labelEmptyValueActive | Styles applied to the label of the "no value" input when it is active. |
| icon | .MuiRating-icon | Estilos aplicados a the icon wrapping elements. |
| iconEmpty | .MuiRating-iconEmpty | Styles applied to the icon wrapping elements when vazio. |
| iconFilled | .MuiRating-iconFilled | Styles applied to the icon wrapping elements when preenchido. |
| iconHover | .MuiRating-iconHover | Styles applied to the icon wrapping elements when hover. |
| iconFocus | .MuiRating-iconFocus | Styles applied to the icon wrapping elements when focus. |
| iconActive | .MuiRating-iconActive | Styles applied to the icon wrapping elements when active. |
| decimal | .MuiRating-decimal | Styles applied to the icon wrapping elements when decimals are necessary. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.