Rate

Rate (평점)

평점을 매길 때 사용하는 컴포넌트예요.

출처: 문서

본문

기본 사용법 (Basic usage)

Rate는 평점을 여러 단계로 나누고, 이 단계들을 서로 다른 배경색으로 구분할 수 있어요. 기본적으로 배경색은 모두 같지만, colors 속성으로 세 단계를 반영하는 세 요소의 배열을 할당할 수 있어요. 두 임계값은 low-threshold와 high-threshold로 정의할 수 있어요. 또는 두 단계 사이의 임계값을 키로, 해당 색을 값으로 하는 객체를 할당할 수도 있어요.

import { ref } from 'vue'

const value1 = ref(0)
const value2 = ref(0)
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }

.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}
.demo-rate-block:last-child {
  border-right: none;
}
.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

크기 (Sizes)

반 개 별 허용 (With allow-half)

allow-half 속성을 추가하면 반 개 별이 허용돼요.

텍스트 (With text)

text를 사용해 평점 점수를 나타내요. show-text 속성을 추가해서 Rate의 오른쪽에 텍스트를 표시해요. 점수별 텍스트는 texts로 할당할 수 있어요. texts는 최대 점수 max와 길이가 같아야 하는 배열이에요.

지우기 가능 (Clearable)

같은 값을 다시 클릭하면 값을 0으로 초기화할 수 있어요.

더 많은 아이콘 (More icons)

다양한 rate 컴포넌트를 구분하기 위해 다른 아이콘을 사용할 수 있어요. icons에 세 요소의 배열이나, 두 단계 사이의 임계값을 키로 하고 해당 아이콘을 값으로 하는 객체를 전달해서 아이콘을 커스터마이징할 수 있어요. 이 예제에서는 선택되지 않았을 때의 아이콘을 설정하는 void-icon도 사용해요.

읽기 전용 (Read-only)

읽기 전용 Rate는 평점 점수를 표시하기 위한 것이에요. 반 개 별을 지원해요. disabled 속성을 사용해서 컴포넌트를 읽기 전용으로 만들어요. show-score를 추가해서 오른쪽에 평점 점수를 표시해요. 또한 score-template 속성으로 점수 템플릿을 제공할 수 있어요. 반드시 {value}를 포함해야 하고, {value}는 평점 점수로 대체돼요.

커스텀 스타일 (Custom styles)

rate 컴포넌트에 커스텀 스타일을 설정할 수 있어요. css/scss 언어로 전역 또는 로컬 색을 바꿔요. 전역 색 변수를 몇 가지 설정해 두었어요: --el-rate-void-color, --el-rate-fill-color, --el-rate-disabled-void-color, --el-rate-text-color. 이렇게 사용할 수 있어요: :root { --el-rate-void-color: red; --el-rate-fill-color: blue; }.

기본 변수 (Default Variables)

API

Attributes

Events

Exposes

더 알아보기 (Learn more)

• Radio 컴포넌트 — 라디오
• Select 컴포넌트 — 선택
• Element Plus 시작하기 — 프로젝트 설정