評分

評分提供關於他人意見和經驗的見解，並允許使用者提交自己的評分。

基本評分

評分精確度

評分可以使用 value 屬性顯示任何浮點數。使用 precision 屬性來定義允許的最小增量值變更。

<Rating name="half-rating" defaultValue={2.5} precision={0.5} />
<Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />

<Rating name="half-rating" defaultValue={2.5} precision={0.5} />
<Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />

按下 Enter 鍵開始編輯

滑鼠懸停回饋

您可以顯示滑鼠懸停標籤，以協助使用者選擇正確的評分值。此範例使用 onChangeActive 屬性。

<Rating
  name="hover-feedback"
  value={value}
  precision={0.5}
  getLabelText={getLabelText}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  onChangeActive={(event, newHover) => {
    setHover(newHover);
  }}
  emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
{value !== null && (
  <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
)}

<Rating
  name="hover-feedback"
  value={value}
  precision={0.5}
  getLabelText={getLabelText}
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  onChangeActive={(event, newHover) => {
    setHover(newHover);
  }}
  emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
{value !== null && (
  <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
)}

按下 Enter 鍵開始編輯

尺寸

對於較大或較小的評分，請使用 size 屬性。

<Rating name="size-small" defaultValue={2} size="small" />
<Rating name="size-medium" defaultValue={2} />
<Rating name="size-large" defaultValue={2} size="large" />

<Rating name="size-small" defaultValue={2} size="small" />
<Rating name="size-medium" defaultValue={2} />
<Rating name="size-large" defaultValue={2} size="large" />

按下 Enter 鍵開始編輯

自訂

以下是一些自訂元件的範例。您可以在覆寫文件頁面中了解更多相關資訊。

<Typography component="legend">Custom icon and color</Typography>
<StyledRating
  name="customized-color"
  defaultValue={2}
  getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
  precision={0.5}
  icon={<FavoriteIcon fontSize="inherit" />}
  emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
/>
<Typography component="legend">10 stars</Typography>
<Rating name="customized-10" defaultValue={2} max={10} />

<Typography component="legend">Custom icon and color</Typography>
<StyledRating
  name="customized-color"
  defaultValue={2}
  getLabelText={(value: number) => `${value} Heart${value !== 1 ? 's' : ''}`}
  precision={0.5}
  icon={<FavoriteIcon fontSize="inherit" />}
  emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
/>
<Typography component="legend">10 stars</Typography>
<Rating name="customized-10" defaultValue={2} max={10} />

按下 Enter 鍵開始編輯

單選群組

評分功能是以單選群組實作的，設定 highlightSelectedOnly 以還原自然行為。

<StyledRating
  name="highlight-selected-only"
  defaultValue={2}
  IconContainerComponent={IconContainer}
  getLabelText={(value: number) => customIcons[value].label}
  highlightSelectedOnly
/>

<StyledRating
  name="highlight-selected-only"
  defaultValue={2}
  IconContainerComponent={IconContainer}
  getLabelText={(value: number) => customIcons[value].label}
  highlightSelectedOnly
/>

按下 Enter 鍵開始編輯

無障礙功能

(WAI 教學)

此元件的無障礙功能仰賴於

一個欄位視覺上隱藏的單選群組。它包含六個單選按鈕，每個星星各一個，另一個用於 0 顆星，預設為選取狀態。請務必為 name 屬性提供一個對父表單而言是唯一的值。
包含實際文字（"1 顆星"、"2 顆星"、…）的單選按鈕標籤。當頁面使用非英語語言時，請務必為 getLabelText 屬性提供適當的函式。您可以使用包含的語系，或提供您自己的。
評分圖示在視覺上需有明顯區別的外觀。預設情況下，評分元件同時使用顏色和形狀（填滿和空的圖示）的差異來表示值。如果您僅使用顏色作為表示值的唯一方式，則資訊也應以文字形式顯示，如此示範所示。這對於符合 WCAG2.1 的成功準則 1.4.1 非常重要。

良好

<Rating
  name="text-feedback"
  value={value}
  readOnly
  precision={0.5}
  emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
<Box sx={{ ml: 2 }}>{labels[value]}</Box>

<Rating
  name="text-feedback"
  value={value}
  readOnly
  precision={0.5}
  emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
/>
<Box sx={{ ml: 2 }}>{labels[value]}</Box>

按下 Enter 鍵開始編輯

ARIA

唯讀評分具有 "img" 的 role，以及描述顯示評分的 aria-label。

鍵盤

由於評分元件使用單選按鈕，因此鍵盤互動遵循原生瀏覽器行為。Tab 鍵將聚焦於目前的評分，而方向鍵控制選取的評分。

唯讀評分不可聚焦。

API

請參閱下方文件，以取得此處提及之元件所有可用屬性和類別的完整參考。

<Rating />