Rate 評分

星級評分,用於收集或展示滿意度。使用 Element Plus 的 el-rate。

設計準則

• 收集評價(可點選)與展示分數(唯讀)是兩種用途,不要混在同一顆元件裡
• 收集評價時搭配 show-text 文字,讓每一顆星有明確語意(極差~非常滿意)
• 展示平均分數用 readonly + allow-half + show-score,顯示到小數一位
• 星星顏色用元件預設(語意就是評分),不要為了配色改成品牌色

基本用法

loading

允許半選

收集評價通常整星就夠;開放互動半選前先想清楚「3.5 分」在業務上是什麼意思。 半星最常見的用途其實是唯讀展示平均分:

loading

可清空

點同一顆星取消評分。評分為選填時開啟,讓使用者可以反悔回到「未評分」;必填評分不要開:

loading

附文字說明

收集評價的標準配置,每一顆星都有語意:

loading

更多種類的圖標

icons 可依分數段落換圖標(低/中/高各一組)。只在量表語意不是星級時使用(如回饋強度、心情), 且同一場景全產品用同一套;一般星級評分維持預設星星:

loading

唯讀(Readonly)展示分數

列表、詳情頁展示平均評分:readonly + allow-half + show-score:

loading

Do / Don't

✅ Do	❌ Don't
收集評價附 show-text	五顆裸星讓人猜 3 星算好還壞
展示分數用 readonly + 半星	展示用的星星還能被點
星星用預設色	星星改成品牌藍

給工程師

完整 API 見 Element Plus Rate 文件。 本站規範優先於 EP 文件中的視覺建議。