MUI - Rating

Rating

Rating 이란 material UI 에서 아이콘으로 평점을 나타내주거나 기능을 구현한 컴포넌트이다.

Material UI의 Rating컴포넌트는 다양한 설정과 스타일링 옵션을사용하여 평점 설정 해주는 컴포넌트이다.

 

import { Box, Rating, Typography } from "@mui/material";
import { useState } from "react";

function Mui() {
    const [value, setValue] = useState<number | null>(2); // 기본 값으 2로 설정

    return (
        <Box
            sx={{
                '& > legend': { mt: 2 },
            }}
        >
            <Typography component="legend">Controlled</Typography>
            <Rating // 기본으로 5점 평점으로 설정되어있다.
                name="simple-controlled"
                value={value}
                onChange={(event, newValue) => {
                    setValue(newValue);
                }}
            />
            <Typography component="legend">Read only</Typography> 
            <Rating name="read-only" value={value} readOnly /> // readOnly: 읽기전용으로 수정불가
            <Typography component="legend">Disabled</Typography>
            <Rating name="disabled" value={value} disabled /> // disabled: 수정 할 수 없게 설정
            <Typography component="legend">No rating given</Typography>
            <Rating name="no-value" value={null} /> // 기능이 없는 기본 Rating
        </Box>
    );
}

export default Mui;

 

 

 

728x90

 

 

Rating 컴포넌트에 value속성과 precision 속성을 사용해서 평점간 점수를 조정할 수있다.

<Stack spacing={1}>
  <Rating name="half-rating" defaultValue={2.5} precision={0.5} /> // 기본값 2.5 로 0.5씩 증가
  <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
</Stack>

 

Rating 컴포넌트를 사용하면서 마우스 호버시 평점별로 글자를 나타내줄 수 있다.

 

import { Box, Rating } from "@mui/material";
import { useState } from "react";
const labels: { [index: string]: string } = { // 평점별 나타내줄 글자 설정
    0.5: 'Useless',
    1: 'Useless+',
    1.5: 'Poor',
    2: 'Poor+',
    2.5: 'Ok',
    3: 'Ok+',
    3.5: 'Good',
    4: 'Good+',
    4.5: 'Excellent',
    5: 'Excellent+',
};
function Mui() {
    const [value, setValue] = useState<number | null>(2);
    const [hover, setHover] = useState(-1);

    return (
        <Box
            sx={{
                width: 200,
                display: 'flex',
                alignItems: 'center',
            }}
        >
            <Rating
                name="hover-feedback"
                value={value}
                precision={0.5}
                getLabelText={getLabelText}
                onChange={(event, newValue) => {
                    setValue(newValue);
                }}
                onChangeActive={(event, newHover) => {
                    setHover(newHover);
                }}
                // emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
            />
            {value !== null && (
                <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
            )}
        </Box>
    );
}

function getLabelText(value: number) {
    return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`;
}



export default Mui;

 

 

반응형