[英]Material-UI Responsive Cards
我正在测试 Material-UI。 我已经使用 Bootstrap 很长时间了,但我对将一些 React 项目适应 Material-UI 感兴趣。 我一直试图弄清楚的是如何在 Material-UI 中创建响应式卡片。 过去我非常依赖 Bootstraps 响应式容器,所以我不明白为什么我的卡片会随着页面扩展,但不会随着窗口的压缩而缩小......如果我们打算为它编写自定义 css这我很酷,只需要指向正确的方向。
Material-UI 中的响应式卡片是一回事吗?
还是我们打算编写 css 以使卡片具有响应性?
如果是这样,我在哪里可以学习这样做? (过去经常使用 Bootstrap)
在此先感谢您的帮助!
...
useStyles = () => makeStyles(theme => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing.unit,
textAlign: "center",
color: theme.palette.text.secondary,
marginBottom: theme.spacing.unit
},
}));
render() {
const {baseData} = this.state;
const {hfcMetrics} = this.state;
const {stateMember} = this.state;
const {stateName} = this.state;
const {states} = this.state;
const {lineVizData} = this.state;
const classes = this.useStyles();
return (this.state.doneLoading === false ? (
<div className={classes.root}>
<Grid container>
<Grid item xs={12}>
<ReactLoading type={"spinningBubbles"} color={"black"} height={'10%'}
width={'10%'} id='spinner'/>
</Grid>
</Grid>
</div>
)
:
(stateMember === true ?
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Card>
<CardHeader
title="Options"
/>
<CardContent style={{ width: '100%', height: 300 }}>
<LineViz
data={lineVizData}
state={stateName}
source='compareTool'
states={states}
vizKey={this.state.vizKey}
/>
</CardContent>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</Grid>
<Grid item xs={6}>
<Card ref={this.elRef}>
<CardHeader
title="Comparison Analysis"
action={
<ButtonGroup variant="text" color="primary" aria-label="text primary button group">
<YearDropDown2
year={this.state.year}
handleChange={this.toggleYear}
/>
<IconButton color='default' component="span"
onClick={() => this.resetStateToggle()}><AutorenewRoundedIcon/></IconButton>
</ButtonGroup>
}
/>
<CardContent style={{padding: 0}}>
<DataCompareTable
data={this.state.compareData}
metric={this.state.metric}
stateName={this.state.stateName}
compareCount={this.state.compareCount}
handleChange={this.toggleStateName}
toggleOne={this.state.toggleOne}
toggleTwo={this.state.toggleTwo}
toggleThree={this.state.toggleThree}
/>
</CardContent>
</Card>
</Grid>
<Grid item xs={6}>
<Paper className={classes.paper}>xs=6</Paper>
</Grid>
</Grid>
</div>
: ''
)
)
}
}
export default CompareTool
谢谢你的问题
回答您的问题:1) 不是我所知道的 2) 不,您不必编写大量 css,但是可以在 usestyles 中编写一些 css 3) 下面我详细解释了您必须在代码中编写的 css。 您同时使用内联样式和 useStyles,请尝试将所有样式放入 usestyle hook API 并使其具有响应性。 希望这有助于让我知道是否需要更清楚地说明。 谢谢
据我所知,您可以使用“useMediaQuery”挂钩使您的设计具有响应性。
这里是 Material UI Card 组件页面中的组件,我只添加了 useTheme 和 useMediaQuery 导入,并在 classes.root 下的 useStyle 中添加了一个中断点这里是“useMediaQuery”上的有用链接https://material-ui.com /components/use-media-query/#usemediaquery
import { useTheme } from "@material-ui/styles";
import useMediaQuery from "@material-ui/core/useMediaQuery";
const useStyles = makeStyles(theme => ({
root: {
maxWidth: 345,
[theme.breakpoints.down("md")] : {
maxWidth: 200
}
},
media: {
height: 140
}
}));
const Card = () => {
const classes = useStyles();
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up("sm"));
return (
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
希望这可以帮助
您可以将卡片包装在带有响应选项的容器中或使用网格,这非常方便。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.