gpt4 book ai didi

javascript - 如何设计 Rebass Switch 的样式

转载 作者:行者123 更新时间:2023-12-03 07:17:30 25 4
gpt4 key购买 nike

在 react 中使用 Rebass/Forms,我无法使用样式正确调整 Switch 组件的大小。 (我也在使用 @emotion/styled)

我尝试过使用 size 属性,但这并不能达到简单更改开关比例的预期效果。

我尝试使用 sx 属性并为其指定 widthheight,但这只会调整按钮元素的大小而不是内部 div 即“滑动点”

我知道我可以编写一些针对内部 div 本身的样式,但我想找到一种方法给它一次性指定高度和宽度,并且它适用于按钮和内部 div。

<Switch
sx={{ width: "30px", height: "15px" }}
/>

https://codesandbox.io/s/styling-rebass-switch-uu7wg

最佳答案

因为高度和宽度是 hard coded in the source,所以无法做到“开箱即用”。

幸运的是,rebass 的内部结构非常好,因此可以使用 rebass 源代码中的一些复制粘贴来创建自己的。

import React from "react";
import { Box } from "reflexbox";

export const ResizableSwitch = ({
checked,
height = 24,
width = 40,
...props
}) => (
<Box
as="button"
type="button"
role="switch"
tx="forms"
variant="switch"
aria-checked={checked}
{...props}
__css={{
appearance: "none",
m: 0,
p: 0,
width,
height,
color: "primary",
bg: "transparent",
border: "1px solid",
borderColor: "primary",
borderRadius: 9999,
"&[aria-checked=true]": {
bg: "primary"
},
":focus": {
outline: "none",
boxShadow: "0 0 0 2px"
}
}}
>
<Box
aria-hidden
style={{
transform: checked ? `translateX(${width - height}px)` : "translateX(0)"
}}
sx={{
mt: "-1px",
ml: "-1px",
width: height,
height,
borderRadius: 9999,
border: "1px solid",
borderColor: "primary",
bg: "background",
transitionProperty: "transform",
transitionTimingFunction: "ease-out",
transitionDuration: "0.1s",
variant: "forms.switch.thumb"
}}
/>
</Box>
);

https://codesandbox.io/s/styling-rebass-switch-r6tmx?file=/src/App.js

关于javascript - 如何设计 Rebass Switch 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61490576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com