如何为材料UI卡创建角带?

问题描述 投票:-1回答:1

如何在Material-UI卡上添加边角色带?对于样式,我使用makeStyles

中的Material UI
javascript css reactjs material-ui
1个回答
0
投票

您可以在Material Ui卡上添加四个功能区,这些功能区是(左上角,右上角,左下角和右下角)。

  1. 只需使用Material ui设计制作卡片。

  2. 并设置位置 相对于父容器的卡片,并在div内进行设置 绝对位置。

  3. 下面参见代码,您也可以为功能区边界调整添加css伪元素。

    在此处输入代码:

    从'react'导入React;从'@ material-ui / core / styles'导入{makeStyles};从'@ material-ui / core / Card'导入卡;从'@ material-ui / core / CardActionArea'导入CardActionArea;从'@ material-ui / core / CardActions'导入CardActions;从'@ material-ui / core / CardContent'导入CardContent;从'@ material-ui / core / CardMedia'导入CardMedia;从'@ material-ui / core / Button'导入Button;从“ @ material-ui / core / Typography”导入字体;

    root:{ 边距:“ 0自动”, 宽度:500,},卡:{ maxWidth:360, marginTop:40, 位置:“相对”,},功能区:{ backgroundColor:“天蓝色”, 位置:“绝对”, 白颜色', 宽度:150, zIndex:3, textAlign:'居中', textTransform:'大写', 填充:5 字体:“拉托”, '&::之前':{ 位置:“绝对”, zIndex:-1, 内容:“, 显示:“块”, 边框:“ 5px实线#2980b9”, }, '&::之后':{ 位置:“绝对”, zIndex:-1, 内容:“, 显示:“块”, 边框:“ 5px实线#2980b9”, }, 转换:“ rotate(-45deg)”, 最高:60 marginLeft:-40,},跨度:{

    }

    导出默认功能RibbonMaterialCard(){ const classes = useStyles();

    返回( 带 蜥蜴 蜥蜴是鳞状爬行动物的广泛群体,有6,000多种 种类,范围 除南极洲以外的所有大洲 分享 学到更多 );}

© www.soinside.com 2019 - 2024. All rights reserved.