Rate レート - Vant 4
⭐ Rate レート
🎯 紹介
Rate は対象を評価するためのコンポーネントです。アイコン・色のカスタマイズ、ハーフスター、無効化などをサポートし、コンテンツ評価やユーザーフィードバックに適しています。
📦 導入
以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。
js
import { createApp } from'vue'; import { Rate } from'vant'; const app = createApp(); app.use(Rate);🎯 コード例
⭐ 基本用法
もっともシンプルな評価コンポーネント。v-model で現在の評価値を双方向バインドして、満足度を簡単に表せます。
html
<template>
<div class="demo-rate">
<van-rate v-model="value" />
<p>現在の評価：{{ value }} 星</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const value = ref(3);
return { value };
},
};🎨 アイコンのカスタマイズ
星以外のアイコンも使用可能！icon と void-icon で愛やスマイルなど好みのアイコンを設定できます。
html
<template>
<div class="demo-rate">
<!-- ハート評価 -->
<van-rate v-model="heartValue" icon="like" void-icon="like-o" />
<p>ハート評価：{{ heartValue }}</p>
<!-- スマイル評価 -->
<van-rate v-model="smileValue" icon="smile" void-icon="smile-o" />
<p>スマイル評価：{{ smileValue }}</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const heartValue = ref(3);
const smileValue = ref(4);
return { heartValue, smileValue };
},
};🌈 スタイルのカスタマイズ
size、color、void-color で外観をカスタマイズし、デザインにフィットさせます。
html
<template>
<div class="demo-rate">
<!-- 大きな金色の星 -->
<van-rate v-model="largeValue" size="30" color="#ffd21e" void-color="#eee" />
<p>大きな評価：{{ largeValue }}</p>
<!-- 小さな赤い星 -->
<van-rate v-model="smallValue" size="15" color="#ff4444" />
<p>小さな評価：{{ smallValue }}</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const largeValue = ref(4);
const smallValue = ref(3);
return { largeValue, smallValue };
},
};✨ ハーフスター評価
ハーフスターに対応し、より精密な評価が可能です。allow-half を設定してください。
html
<template>
<div class="demo-rate">
<van-rate v-model="halfValue" allow-half />
<p>精密評価：{{ halfValue }} 星</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const halfValue = ref(2.5);
return { halfValue };
},
};🔢 アイコン数のカスタマイズ
5 つ以上も可能！count 属性で評価アイコン数を任意に設定できます。
html
<template>
<div class="demo-rate">
<!-- 10 段階評価 -->
<van-rate v-model="tenValue" :count="10" />
<p>10 段階評価：{{ tenValue }}/10</p>
<!-- 3 段階評価 -->
<van-rate v-model="threeValue" :count="3" />
<p>3 段階評価：{{ threeValue }}/3</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const tenValue = ref(7);
const threeValue = ref(2);
return { tenValue, threeValue };
},
};🧹 評価のクリア
clearable を有効にすると、同じ星を再度クリックして評価をクリアできます。
html
<template>
<div class="demo-rate">
<van-rate v-model="clearableValue" clearable />
<p>{{ clearableValue ? `現在の評価：${clearableValue}` : '評価なし' }}</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const clearableValue = ref(3);
return { clearableValue };
},
};🚫 無効状態
disabled 属性で評価を無効化。過去の評価表示や権限制限の場面に適します。
html
<template>
<div class="demo-rate">
<van-rate v-model="disabledValue" disabled />
<p>無効状態の評価：{{ disabledValue }}</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const disabledValue = ref(3);
return { disabledValue };
},
};👁️ 読み取り専用
readonly で評価を読み取り専用に。結果表示のみで変更できません。
html
<template>
<div class="demo-rate">
<van-rate v-model="readonlyValue" readonly />
<p>読み取り専用評価：{{ readonlyValue }}</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const readonlyValue = ref(4);
return { readonlyValue };
},
};🎯 小数表示の精密化
readonly と allow-half の組み合わせで、任意精度の評価結果を表示できます。
html
<template>
<div class="demo-rate">
<van-rate v-model="preciseValue" readonly allow-half />
<p>精密評価：{{ preciseValue }}</p>
</div>
</template>js
import { ref } from 'vue';
export default {
setup() {
const preciseValue = ref(3.7);
return { preciseValue };
},
};📡 変更イベントの監視
change イベントを監視して、ユーザーの評価操作に即時応答します。
html
<template>
<div class="demo-rate">
<van-rate v-model="eventValue" @change="onChange" />
<p>实时评分：{{ eventValue }}</p>
</div>
</template>javascript
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const eventValue = ref(3);
const onChange = (value) => {
showToast(`あなたは ${value} 星の評価を付けました！`);
};
return {
eventValue,
onChange
};
},
};📋 API
🔧 Props
| 属性名 | 説明 | 型 | デフォルト |
|---|---|---|---|
| v-model | 🎯 現在の評価値（双方向バインド） | number | - |
| count | 🔢 アイコン総数（最大評価） | number | string | 5 |
| size | 📏 アイコンサイズ（デフォルト単位は px） | number | string | 20px |
| gutter | 📐 アイコン間隔（デフォルト単位は px） | number | string | 4px |
| color | 🎨 選択時の色 | string | #ee0a24 |
| void-color | 🌫️ 未選択時の色 | string | #c8c9cc |
| disabled-color | 🚫 無効時の色 | string | #c8c9cc |
| icon | ⭐ 選択時のアイコン名または画像リンク（Icon の name と同等） | string | star |
| void-icon | ☆ 未選択時のアイコン名または画像リンク（Icon の name と同等） | string | star-o |
| icon-prefix | 🏷️ アイコンクラスの接頭辞（Icon の class-prefix と同等） | string | van-icon |
| allow-half | ✨ ハーフスターを許可 | boolean | false |
clearable v4.6.0 | 🧹 再クリックでクリアを許可 | boolean | false |
| readonly | 👁️ 読み取り専用 | boolean | false |
| disabled | 🔒 無効化 | boolean | false |
| touchable | 👆 スワイプで選択可能 | boolean | true |
📡 Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| change | 🔄 現在値が変化したときに発火 | currentValue: number |
📝 型定義
コンポーネントは以下の型定義をエクスポートし、TypeScript の型サポートを提供します：
ts
import type { RateProps } from 'vant';🎨 テーマカスタマイズ
🎭 スタイル変数
コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。
| 名称 | デフォルト値 | 説明 |
|---|---|---|
| --van-rate-icon-size | 20px | 📏 評価アイコンのサイズ |
| --van-rate-icon-gutter | var(--van-padding-base) | 📐 評価アイコンの間隔 |
| --van-rate-icon-void-color | var(--van-gray-5) | 🌫️ 未選択アイコンの色 |
| --van-rate-icon-full-color | var(--van-danger-color) | ⭐ 選択アイコンの色 |
| --van-rate-icon-disabled-color | var(--van-gray-5) | 🚫 無効状態アイコンの色 |
📚 関連ドキュメント
🎨 基本コンポーネント
- Icon アイコン - 🎯 Rate の視覚基盤。カスタムアイコン対応
- Button ボタン - 🔘 評価送信などに利用
- Cell セル - 📱 リストで評価情報を表示
🔗 フォームコンポーネント
- Form フォーム - 📋 評価をフォーム項目として統合
- Field 入力欄 - ✏️ 評価と併用してフィードバック収集
- Checkbox チェックボックス - ☑️ 複数選択評価の補助
- Radio ラジオ - ⚪ 固定選択評価の定番
💬 フィードバックコンポーネント
- Toast トースト - 💬 評価操作の即時フィードバック
- Dialog ダイアログ - 📋 詳細評価フォームのコンテナ
- Notify 通知 - 📢 重要な評価結果の通知
- ActionSheet アクションパネル - 📋 評価関連操作の集約表示
🎯 セレクターコンポーネント
- Picker ピッカー - 🎡 複雑な評価軸の選択に
- Slider スライダー - 🎚️ 連続値の直観的操作
- Stepper ステッパー - ➕ 精密な数値評価の入力
🛠️ ツールコンポーネント
- ConfigProvider グローバル設定 - ⚙️ 評価コンポーネントのテーマを統一
- Popup ポップアップ - 🎭 評価詳細の優雅な表示