資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究如何在 Material UI 的評分元件中滑鼠懸停時顯示標籤？
Material UI 是一個 React UI 框架，它提供了一系列元件，用於建立現代且使用者友好的介面。其中一個元件是評分元件，通常用於收集使用者反饋並顯示產品或服務的評分。
雖然評分元件顯示星標（或任何其他圖示）來表示評分值，但透過在使用者將滑鼠懸停在星標上時顯示標籤來提供資訊，可以增強使用者體驗。
在本文中，我們將學習如何在 Material UI 的評分元件中滑鼠懸停時顯示標籤。
在評分中顯示標籤的步驟
下面，我們概述了向評分元件新增標籤的完整步驟：
步驟 1：建立一個新的 React 應用並安裝 MUI
首先，讓我們從建立一個 React 應用和安裝 Material UI 開始。請按照以下步驟操作：
開啟您的終端並執行以下命令：
npx create react app projectname
專案建立後，透過執行以下命令導航到專案目錄：
cd projectname
透過執行以下命令安裝 Material UI 及其依賴項：
npm install @mui/material @emotion/react @emotion/styled
步驟 2：將所需的元件匯入 React
開啟 App 元件並將所需的元件匯入其中。
import { Rating } from '@mui/material
步驟 3：新增滑鼠懸停標籤
要新增滑鼠懸停標籤，請使用 `onChangeActive` 和 `getLabelText` 屬性。使用方法語法如下：
//define labels
const labels = {
1: Poor,
2: Good,
…
}
//get ratings to display along with the rating stars
function getRatings(val) {
return `${val} Star${val !== 1 ? "s" : ""}, ${labels[val]}`;
}
// define the states
const [val, setVal] = useState(2);
const [hover, setHover] = useState(-1);
//use in App() component
<div>
<Rating
precision={0.5}
value={val}
getLabelText={getRatings}
onChange={(event, newValue) => {
setVal(newValue);
}}
onChangeActive={(event, newHover) => {
setHover(newHover);
}}
emptyIcon={<StarIcon style={{ opacity: 0.40 }} fontSize="inherit" />}
/>
{val !== null && (
<Typography>{ratingLabels[hover !== -1 ? hover : val]}</Typography>
)}
</div>
評分 API
<Rating> − 此 API 用於允許使用者在 Material UI 中提交自己的評分。
屬性
classes − 此屬性用於覆蓋或向元素新增樣式。
disabled − 此屬性用於停用評分。
emptyIcon − 此屬性在為空時顯示圖示。
emptyLabelText − 此屬性用於在為空時讀取標籤。
getLabelText − 此屬性用於獲取當前評分值。
highlightSelectedOnly − 此屬性用於突出顯示選定的圖示。
icon − 此屬性用於顯示圖示。
IconContainerComponent − 此屬性包含圖示。
max − 此屬性用於給出最大評分。
name − 此屬性用於新增評分名稱。
onChange − 此屬性用於在輸入更改時觸發回撥函式。
onChangeActive − 此屬性定義滑鼠懸停時評分狀態的變化。
precision − 此屬性用於新增評分精度。
size − 此屬性用於更改大小。
sx − 此屬性用於向 Material UI 元件新增自定義樣式。
value − 此屬性用於為元件賦予值。
示例
在此示例中，我們建立了一個帶有標籤的基本評分元件。評分元件的精度為 1，滑鼠懸停時會根據所選評分級別顯示標籤。為了演示和顯示標籤，我們使用了評分 API 元件的 `onChangeActive` 屬性。
import { Box, Rating, Typography } from "@mui/material";
import React from "react";
import StarIcon from "@mui/icons-material/Star";
import { useState } from "react";
const ratingLabels = {
1: "Useless",
2: "Poor",
3: "Ok",
4: "Good",
5: "Excellent",
};
function getRatings(val) {
return `${val} Star${val !== 1 ? "s" : ""}, ${ratingLabels[val]}`;
}
const App = () => {
const [val, setVal] = useState(2);
const [hover, setHover] = useState(-1);
return (
<div>
<Box sx={{p: 10}}>
<Rating
precision={1}
value={val}
name="hover-ratings"
getLabelText={getRatings}
onChange={(event, newValue) => {
setVal(newValue);
}}
onChangeActive={(event, newHover) => {
setHover(newHover);
}}
sx={{fontSize: 40}}
emptyIcon={<StarIcon style={{ opacity: 0.40 }} fontSize="inherit" />}
/>
{val !== null && (
<Typography sx={{ fontSize: 20, color: 'green' }}>{ratingLabels[hover !== -1 ? hover : val]}</Typography>
)}
</Box>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們建立了另一個帶有標籤的評分元件。評分元件的精度為 0.5，滑鼠懸停時會根據所選評分級別顯示標籤。此示例與上一個示例的區別在於，它允許使用者選擇以半星為單位的評分，如下例所示。這裡，我們也使用了評分 API 元件的 `onChangeActive` 屬性來演示和顯示標籤。
import { Box, Rating, Typography } from "@mui/material";
import React from "react";
import StarIcon from "@mui/icons-material/Star";
import { useState } from "react";
const ratingLabels = {
0.5: 'Useless',
1: 'Very Useless',
1.5: 'Poor',
2: 'Very Poor',
2.5: 'Ok',
3: 'Very Ok',
3.5: 'Good',
4: 'Very Good',
4.5: 'Excellent',
5: 'Very Excellent',
};
function getRatings(val) {
return `${val} Star${val !== 1 ? "s" : ""}, ${ratingLabels[val]}`;
}
const App = () => {
const [val, setVal] = useState(2);
const [hover, setHover] = useState(-1);
return (
<div>
<Box sx={{p: 10}}>
<Rating
precision={0.5}
value={val}
name="hover-ratings"
getLabelText={getRatings}
onChange={(event, newValue) => {
setVal(newValue);
}}
onChangeActive={(event, newHover) => {
setHover(newHover);
}}
sx={{fontSize: 40}}
emptyIcon={<StarIcon style={{ opacity: 0.40 }} fontSize="inherit" />}
/>
{val !== null && (
<Typography sx={{ fontSize: 20, color: 'green' }}>{ratingLabels[hover !== -1 ? hover : val]}</Typography>
)}
</Box>
</div>
);
};
export default App;
輸出
示例
在此示例中，我們自定義了評分元件和標籤。評分元件的精度為 0.5，滑鼠懸停時會根據所選評分級別顯示標籤。在此程式碼中，我們更改了評分元件和標籤的顏色和字型大小，使它們更具吸引力或更具個性化。我們使用了評分 API 元件的 `onChangeActive` 屬性。
import { Box, Rating, Typography } from "@mui/material";
import React from "react";
import StarIcon from "@mui/icons-material/Star";
import { useState } from "react";
import {styled} from '@mui/material/styles'
const ratingLabels = {
0.5: "Useless",
1: "Very Useless",
1.5: "Poor",
2: "Very Poor",
2.5: "Ok",
3: "Very Ok",
3.5: "Good",
4: "Very Good",
4.5: "Excellent",
5: "Very Excellent",
};
function getRatings(val) {
return `${val} Star${val !== 1 ? "s" : ""}, ${ratingLabels[val]}`;
}
const CustomRating = styled(Rating)({
'& .MuiRating-iconFilled': {
color: 'green'
},
'& .MuiRating': {
fontSize: 40
},
});
const App = () => {
const [val, setVal] = useState(2);
const [hover, setHover] = useState(-1);
return (
<div>
<Box sx={{ p: 10 }}>
<CustomRating
precision={0.5}
value={val}
name="hover-ratings"
getLabelText={getRatings}
onChange={(event, newValue) => {
setVal(newValue);
}}
onChangeActive={(event, newHover) => {
setHover(newHover);
}}
/>
{val !== null && (
<Typography sx={{ fontSize: 20, color: "green" }}>
{ratingLabels[hover !== -1 ? hover : val]}
</Typography>
)}
</Box>
</div>
);
};
export default App;
輸出
結論
在此示例中，我們學習瞭如何在將滑鼠懸停在評分元件上時顯示標籤。文章中列出了步驟及其正確的語法和完整的示例，並採用了不同的方法。除此之外，為了自定義元件的外觀和行為，Material UI 允許根據應用程式的需要自定義評分元件。藉助 Material UI 和 React 的強大功能，您可以輕鬆建立引人入勝且使用者友好的介面。
284 次瀏覽
