数据结构
网络
关系数据库管理系统 (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 次浏览
