我尝试匹配的设计要求复选框为圆形。我正在使用 Material UI 和 React。
边框半径不起作用,因为实际图标的边框不是可见复选框的边框。
我不能只使用像 Font Awesome 这样的东西,因为它需要实际检查和取消检查。
// Current Styling
const styles = theme => ({
nested: {
paddingLeft: theme.spacing.unit * 4,
},
icon: {
margin: theme.spacing.unit,
fontSize: 25,
},
root: {
color: cyan['A400'],
'&$checked': {
color: cyan['A400'],
},
},
checked: {},
});
// Actual checkbox code
return (
// Holds the individual step with edit icon and delete icon
<>
<ListItemIcon>
{/* Checkbox */}
<Checkbox
type="checkbox"
defaultChecked={step.completed}
onChange={this.onChange}
value="true"
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
</ListItemIcon>
我想保留 Material UI 的工作代码Checkbox
但只需更改一些样式即可使边缘成为完美的圆形(类似于单选按钮,但中间有一个复选标记。
材质用户界面Checkbox
支持自定义图标 https://material-ui.com/api/checkbox/。有圆形的选中的圆圈材质图标 https://material.io/tools/icons/?search=check,对于空圆圈,您可以稍微作弊并使用该图标Radio
输入(它们大小相同,所以效果很好):
import Checkbox from '@material-ui/core/Checkbox';
import CircleChecked from '@material-ui/icons/CheckCircleOutline';
import CircleCheckedFilled from '@material-ui/icons/CheckCircle';
import CircleUnchecked from '@material-ui/icons/RadioButtonUnchecked';
…
<Checkbox
icon={<CircleUnchecked />}
checkedIcon={<CircleChecked />}
…
/>
// or with filled checked icon:
<Checkbox
icon={<CircleUnchecked />}
checkedIcon={<CircleCheckedFilled />}
…
/>
...它看起来像这样(foo is CheckCircleOutline
, bar is CheckCircle
):
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)