css - React Material UI - 自定义 CardMedia 的渲染
问题描述
我想知道如何调整React Material UI 的CardMedia来生成类似的东西:
如您所见,我期望的结果中有 3 项:
WebP 格式的图像本身(示例)
一个持续时间(例如 06:59:14),被一个框包围(以将其与图像区分开来)
一个 SVG 格式的平台标志,被一个方框包围(为了与图像区分开来)
目前,我将所有平台 SVG 都存储在一个文件中:
export default {
"PC": `
M4.539062 7.515625 L 4.539062 13.886719 L 7.6875 13.886719 L 7.695312 11.738281 L 7.707031 9.597656 L 8.625 9.585938 L 9.542969 9.578125 L 10.546875 8.589844 L 11.550781 7.605469 L 11.550781 3.148438 L 10.527344 2.144531 L 9.507812 1.140625 L 4.539062 1.140625 Z
M8.28125 5.410156 L 8.289062 7.113281 L 8 7.101562 L 7.707031 7.089844 L 7.695312 5.40625 L 7.6875 3.722656 L 7.9375 3.714844 C 8.082031 3.707031 8.210938 3.703125 8.230469 3.703125 C 8.253906 3.707031 8.273438 4.308594 8.28125 5.410156 Z
M8.28125 5.410156
M13.09375 2.148438 L 12.074219 3.148438 L 12.074219 11.917969 L 13.078125 12.902344 L 14.085938 13.886719 L 17.457031 13.886719 L 18.460938 12.898438 L 19.460938 11.917969 L 19.445312 8.417969 L 16.144531 8.417969 L 16.132812 9.878906 L 16.125 11.347656 L 15.601562 11.347656 L 15.601562 3.71875 L 16.125 3.71875 L 16.132812 4.925781 L 16.144531 6.132812 L 19.445312 6.132812 L 19.460938 3.148438 L 18.441406 2.148438 L 17.417969 1.140625 L 14.117188 1.140625 Z
M13.09375 2.148438
`
}
我们可以调用:
import iconsSVG from "./PlatformIcons";
import SvgIcon from '@material-ui/core/SvgIcon';
//...
let platform = "PC";
<SvgIcon titleAccess={platform}>
<path d={iconsSVG[platform]} />
</SvgIcon>
//...
提前致谢
编辑:如果需要,这是我的完整 Card 组件实现:
import React from "react";
import {useTranslation} from "react-i18next";
import { makeStyles } from '@material-ui/core/styles';
import {Link} from 'react-router-dom';
import Card from "@material-ui/core/Card";
import CardMedia from "@material-ui/core/CardMedia";
import CardActions from "@material-ui/core/CardActions";
import IconButton from "@material-ui/core/IconButton";
import YouTubeIcon from '@material-ui/icons/YouTube';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';
import Tooltip from '@material-ui/core/Tooltip';
const useStyles = makeStyles((theme) => ({
localVideoPlayerButton : {
[theme.breakpoints.down('sm')]: {
display: "none"
}
},
gameCover: {
[theme.breakpoints.between('xs', 'md')]: {
height: 200
},
[theme.breakpoints.up('md')]: {
height: 150
},
},
gameControls : {
display: 'flex',
justifyContent: 'center',
paddingLeft: theme.spacing(1),
paddingBottom: theme.spacing(1),
}
}));
function CardEntry(props) {
const {game} = props;
const { t } = useTranslation('common');
const classes = useStyles(props);
return (
<Card>
<CardMedia
component="img"
className={classes.gameCover}
image={game.imagePath}
title={game.title}
/>
<CardActions className={classes.gameControls}>
<Tooltip title={t("gamesLibrary.actionsButton.watchHere", { "gameName": game.title})} aria-label="Watch" className={classes.localVideoPlayerButton}>
<IconButton
aria-label="play"
component={Link}
to={
game.url_type === "PLAYLIST" ? "/playlist/" + game.playlistId : "/video/" + game.videoId
}
>
<PlayArrowIcon/>
</IconButton>
</Tooltip>
<Tooltip title={t("gamesLibrary.actionsButton.watchOnYt", { "gameName": game.title})} aria-label="WatchOnYoutube">
<IconButton
aria-label="share"
href={game.url}
>
<YouTubeIcon/>
</IconButton>
</Tooltip>
</CardActions>
</Card>
);
}
export default CardEntry;
通过我可以提供给该内容的数据示例:
{
"title": "Mafia: Definitive Edition",
"playlistId": "PLRfhDHeBTBJ6SEXdQnTM4OHRH9mDIRocv",
"releaseDate": "2020-09-24T22:00:00.000Z",
"duration": "06:59:14",
"genres": [
"Action",
"Adventure",
"Shooter"
],
"platform": "PC",
"imagePath": "https://jy95.github.io/yt_gaming_library/covers/PLRfhDHeBTBJ6SEXdQnTM4OHRH9mDIRocv/cover.webp",
"url": "https://www.youtube.com/playlist?list=PLRfhDHeBTBJ6SEXdQnTM4OHRH9mDIRocv",
"url_type": "PLAYLIST",
"durationAsInt": 65914
}
解决方案
使用这个布局:
<Card className={classes.root}>// with position releative
<IconButton
aria-label="console"
className={classes.rightChip}// with absolute position and z-index
onClick={handleConsole}// ur console button for showing all pc games
>
// ur pc icon
</IconButton>
<Typography variant="body2" color="textSecondary"
component="p"className={classes.timer}>//also with absolute position and z-index
{//ur timer}
</Typography>
<CardActionArea onClick={clickHandler}>
<CardMedia
component="img"
className={classes.gameCover}
image={game.imagePath}
title={game.title}
/>
</CardActionArea>
</Card>
推荐阅读
- git - Github 在自述文件中保留链接到最新版本的资产文件
- text - Julia 从文本文件中读取并在评论后跳过
- c# - 如何定义一个自定义 getter,它使用从同一类的另一个接口显式定义的字段?
- html - 如何让这些 id 标签正确设置样式?
- python - 如何修改我的垃圾箱包装算法,以使一件物品不会被分配到多个垃圾箱?
- c++ - 将最高有效设置位以下的所有位归零的最有效方法是什么?
- graph-algorithm - 当 RRT 用于没有解决方案的配置空间时会发生什么?
- c# - 如何在 SQLite 查询中使用变量?
- text - 没有使用 cypress 获取文本内容
- python - 获得浮点数的最快方法是什么