[英]Material-UI Radio Button with svg circle
Hello guys i'm trying to customize the Material-UI radio button using CSS modules and I haven't been able to have much success, it seems like the easier way to do it would be to use the makeStyles function from Material-UI but I am supposed to be using CSS modules.大家好,我正在尝试使用 CSS 模块自定义 Material-UI单选按钮,但我没有取得太大的成功,似乎更简单的方法是使用 Material-UI 中的 makeStyles 函数,但是我应该使用 CSS 模块。
So this is this is the standard Material-UI radio button:这是标准的 Material-UI 单选按钮:
Basically I have to make this:基本上我必须这样做:
.
.
Material-UI doesn't have the check mark available but I am sure that I can do it somehow with SVG but I just cant seem to figure out how to do it. Material-UI 没有可用的复选标记,但我确信我可以用 SVG 以某种方式做到这一点,但我似乎无法弄清楚如何去做。 If someone can please help or point me in the right direction I would greatly appreciate it.
如果有人可以请帮助或指出我正确的方向,我将不胜感激。
UPDATE: It turns out I could just inject a SVG as a component using the Radio component's checkedIcon property which I found on Material-UI icons, here is the documentation .更新:事实证明,我可以使用我在 Material-UI 图标上找到的 Radio 组件的 checkedIcon 属性将 SVG 作为组件注入,这里是文档。
That only met my needs for the checked 'Active' part that I needed, then I was struggling with the 'Hover' part for while thinking I had to use a SVG for that when all I really needed to do was to draw a circle using ::before or ::after to create a pseudo element and styling it to be a circle withing the main circle, same thing witht the 'Focus' part.这只满足了我对我需要的选中的“活动”部分的需求,然后我在“悬停”部分苦苦挣扎,同时认为我必须为此使用 SVG,而我真正需要做的就是使用::before 或 ::after 创建一个伪元素并将它的样式设置为与主圆圈相连的圆圈,与“焦点”部分相同。
You can simply use the icon
and checkedIcon
properties of the Checkbox component ( https://material-ui.com/api/checkbox/#props ) and pass in any kind of component rendering your SVG.您可以简单地使用 Checkbox 组件 ( https://material-ui.com/api/checkbox/#props ) 的
icon
和checkedIcon
属性,并传入任何类型的渲染 SVG 的组件。
Edit: I stated a little demo (based on the Material-UI checkbox demo) with CSS Modules, since the initial answer did not meet all your requirements (eg missing an example for focus).编辑:我用 CSS 模块说明了一个小演示(基于 Material-UI 复选框演示),因为最初的答案没有满足您的所有要求(例如,缺少焦点示例)。 It is also not looking too nice, but I think it should help showing the idea behind it (focus should be similar to the hover example).
它看起来也不太好,但我认为它应该有助于展示其背后的想法(焦点应该类似于悬停示例)。
Component:成分:
import React from 'react';
// webpack, parcel or else will inject the CSS into the page
import styles from './CssModulesCheckboxes.css';
import Checkbox from '@material-ui/core/Checkbox';
function StyledCheckbox(props) {
return (
<Checkbox
checkedIcon={<span className={styles.checkedIcon} />}
icon={<span className={styles.icon} />}
inputProps={{ 'aria-label': 'decorative checkbox' }}
{...props}
/>
);
}
export default function CssModulesButton() {
return (
<div>
<StyledCheckbox />
<StyledCheckbox defaultChecked />
<StyledCheckbox defaultChecked disabled />
</div>
);
}
CSS module: CSS 模块:
.icon {
border-radius: 3px;
width: 16px;
height: 16px;
box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1);
background-color: #f5f8fa;
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0));
}
input:hover ~ .icon {
background-color: #137cbd;
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0));
}
input:hover ~ .icon::before {
display: block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23aaa'/%3E%3C/svg%3E");
content: '';
}
.checkedIcon {
background-color: #137cbd;
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0));
}
.checkedIcon::before {
display: block;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E");
content: '';
}
input:disabled ~ .checkedIcon {
box-shadow: none;
background: rgba(206, 217, 224, 0.5);
}
Sample running in codesandbox: https://codesandbox.io/s/css-modules-vdbi8在codesandbox中运行的示例: https ://codesandbox.io/s/css-modules-vdbi8
Try the following code:试试下面的代码:
HTML: HTML:
<div>
<input type="radio" name="my-radio" id="radio-option-1"/>
<label for="radio-option-1"> <span></span> Pick Me </label>
</div>
<div>
<input type="radio" name="my-radio" id="radio-option-2"/>
<label for="radio-option-2"> <span></span> Pick Me 2</label>
</div>
<div>
<input type="radio" name="my-radio" id="radio-option-3" active/>
<label for="radio-option-3"> <span></span> Pick Me 3 (Active)</label>
</div>
<div>
<input type="radio" name="my-radio" id="radio-option-4" disabled/>
<label for="radio-option-4"> <span></span> Pick Me 4 (Inactive)</label>
</div>
CSS: CSS:
input[type="radio"] {
display: none;
}
label {
cursor:pointer;
color: #555;
}
input[type="radio"] + label span {
display: inline-block;
vertical-align: middle;
width: 45px;
height: 45px;
border: 2px solid #ff0000;
border-radius: 10px;
background-color: #ffffff;
text-align: center;
}
input[type="radio"][disabled] + label span {
background-color: #ececec;
border: #ececec;
}
input[type="radio"][active] + label span {
background-color: #ff0000;
}
input[type="radio"][active] + label span:hover {
background-color: #ff0000;
border: 2px solid #ff0000;
}
/* input[type="radio"] + label span:hover {
text-align: center;
vertical-align: bottom;
} */
input[type="radio"] + label span:focus {
background-color: #ffffff;
}
input[type="radio"]:not([active]):not([disabled]):not(:checked) + label span:focus::before {
content: '';
display: inline-block;
width: 70%;
height: 70%;
border-radius: 50%;
background-color: #ff0000;
border: 2px solid #ff0000;
margin-top: calc(100% - 76%);
}
input[type="radio"]:not([active]):not([disabled]):not(:checked) + label span:hover::before {
content: '';
display: inline-block;
width: 70%;
height: 70%;
border-radius: 50%;
background-color: #ffffff;
border: 2px solid #ff0000;
margin-top: calc(100% - 85%);
}
input[type="radio"] + label span {
border-radius: 50%;
}
input[type="radio"][disabled] + label span::before,
input[type="radio"][active] + label span::before,
input[type="radio"]:checked + label span::before {
content: "✓";
color: #ffffff;
text-align: center;
font-size: 40px;
}
input[type="radio"]:checked + label span {
background-color: #ff0000;
text-align: center;
}
Demo: https://jsfiddle.net/40ktw6jv/58/演示: https : //jsfiddle.net/40ktw6jv/58/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.