Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Rate

점수를 선택할 수 있는 컴포넌트입니다. 방향키와 Enter 또는 Space로도 점수를 선택할 수 있습니다.

import { Rate } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

점수를 선택할 때

사용예제

Basic Usage

기본적인 사용 방법입니다.

Show Value

별점 값 표시 여부를 선택할 수 있습니다.

Count

별점의 개수를 설정합니다.

Disabled

비활성화 할 수 있습니다.

Heart Icon

하트 아이콘을 사용합니다.

Customize

아이콘, 색상, 크기를 커스텀합니다.

import React from "react";
import { Rate } from "sud-ui";
import { UserFill, MoodSmileOutline, MoodSadOutline } from "sud-icons";

export default function Example() {
  return (
    <div className="flex flex-col justify-center gap-[20px]">
      <Rate icon={<UserFill />} size={32} />
      <Rate
        icon={<MoodSmileOutline />}
        size={32}
        activeColor={"lime-7"}
        inactiveColor={"lime-3"}
      />
      <Rate
        icon={<MoodSadOutline />}
        size={32}
        activeColor={"plum-6"}
        inactiveColor={"plum-1"}
      />
    </div>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

count

별점의 개수

number

allowHalf

반 별점 선택 가능 여부

boolean

true

defaultValue

기본 별점 값

number

value

제어되는 별점 값

number

onChange

별점이 변경될 때 호출되는 함수

(value: number) => void

disabled

비활성화 여부

boolean

false

showValue

별점 값 표시 여부

boolean

false

activeColor

활성화된 별점의 색상(palette값 또는 HEX code)

string

inactiveColor

비활성화된 별점의 색상(palette값 또는 HEX code)

string

size

별점의 크기

number

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

ariaLabel

접근성을 위한 레이블

string

별점 평가

icon

별점 아이콘

star

heart

or ReactElement

star

testId

테스트 ID

string

"rate"

개인정보 처리방침

서비스 약관