Rate | UXKM Guide

유형

접근 가능한 이름 지정 방식별 예시입니다. `legend` · `aria-labelledby` · `aria-label`을 상황에 맞게 사용합니다.

rate_stars 안에 rate_star 레이블을 배치합니다. 같은 name의 radio로 단일 값을 선택합니다.

rate_sm · rate(기본) · rate_lg로 별 크기를 조절합니다.

기본은 warning(별색)입니다. color_primary · color_success · color_danger · color_warning으로 채움 색을 지정합니다.

`rate_allow-half`를 추가하면 별 왼쪽 절반 클릭으로 0.5 단위 선택이 가능합니다. 각 별에 `rate_input-half`를 배치합니다.

`rate_clearable`을 추가하면 초기화 버튼으로 값을 지울 수 있습니다.

`is-readonly`로 표시 전용 별점을 렌더합니다. 평균 평점·리뷰 요약에 사용합니다.

4.5

2

비활성·오류(is-error) 상태를 지원합니다.

form_field · form_vertical과 함께 사용합니다.

Prop	타입	기본값	설명
`value`	number	—	제어 별점 값 (Vue model-value 대응)
`defaultValue`	number	—	비제어 초기 별점 값
`count`	number	5	별 개수
`size`	'sm' \| 'md' \| 'lg'	md	rate_sm · rate_lg
`allowHalf`	boolean	false	0.5점 단위 (rate_allow-half)
`clearable`	boolean	false	초기화 버튼 (rate_clearable)
`readonly`	boolean	false	읽기 전용 표시 (is-readonly)
`disabled`	boolean	false	비활성
`legend`	string	—	fieldset legend
`name`	string	—	radio name (그룹)
`className`	string	—	rate 루트에 추가 클래스
`onChange`	(value: number) => void	—	별점 변경/초기화 콜백
`ripple`	boolean	true	클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성

Children	설명
`children`	추가 콘텐츠 (설명/보조 텍스트 등). Vue default 슬롯 대응

이벤트	설명
`onChange`	별점 변경·초기화 시 호출 (number 인자, Vue update:modelValue 대응)

React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`rate`	별점 루트
`rate_sm · rate_lg · rate_allow-half · rate_clearable`	크기·기능
`rate_stars · rate_star · rate_star-graphic`	별 아이콘
`rate_input · rate_star-label · rate_value · rate_clear`	입력·값·초기화
`rate_legend · rate_control`	fieldset 구조
`is-readonly · is-filled · is-half`	상태
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

토큰	기본값	설명
`--rate-star-size · --rate-star-size-sm · --rate-star-size-lg`	1.25rem · 1rem · 1.5rem	별 크기
`--rate-star-gap · --rate-clear-size`	0.125rem · 1.5rem	별 간격·초기화 버튼