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	타입	기본값	설명
`model-value`	number	—	v-model 별점 값
`default-value`	number	—	비제어 초기 별점 값
`count`	number	5	별 개수
`size`	'sm' \| 'md' \| 'lg'	md	rate_sm · rate_lg
`allow-half`	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 (그룹)
`ripple`	boolean	true	클릭 파장(ripple). true 시 자식 클릭 표면에 data-ripple · false 시 data-no-ripple으로 하위 전체 비활성

이벤트	설명
`update:modelValue`	별점 변경·초기화 시 (v-model)

Vue 컴포넌트가 렌더하는 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	별 간격·초기화 버튼