box-shadow阴影选择器-react

1.0代码同步代码仓库： https://gitee.com/honbingitee/ruyi-lowcode. src/component/BoxShadow/index.tsx

/** @Author: hongbin* @Date: 2022-05-02 21:20:18* @LastEditors: hongbin* @LastEditTime: 2022-05-04 08:28:09* @Description:box-shadow pick*/
import { FC, ReactElement, useEffect, useRef } from "react";
import styled, { css } from "styled-components";
import { IShadow } from "../ElementProvider/ElementList";
import ProgressBar from "../ProgressBar";interface IProps {style?: React.CSSProperties;shadow: IShadow;setShadowItem: (key: keyof IShadow, val: number | boolean) => void;onCancel: () => void;onCompute: () => void;
}const BoxShadowPick: FC<IProps> = ({ style = {}, shadow, setShadowItem, onCancel, onCompute }): ReactElement => {const wrapRef = useRef<HTMLDivElement>(null);const panelRef = useRef<HTMLDivElement>(null);useEffect(() => {if (wrapRef.current && panelRef.current) {const { offsetWidth } = wrapRef.current;panelRef.current.style["width"] = offsetWidth / 2 + "px";panelRef.current.style["height"] = offsetWidth / 2 + "px";}}, []);return (<Container style={{ ...style }} ref={wrapRef}><RowFlex><Button onClick={() => setShadowItem("inset", false)} selected={!shadow.inset}>外阴影</Button><Button onClick={() => setShadowItem("inset", true)} selected={shadow.inset}>内阴影</Button></RowFlex><Panel ref={panelRef}><Spotstyle={{transform: `translate(${shadow.x}px,${shadow.y}px)`,}}onMouseDown={(e) => {const { pageX: startX, pageY: startY } = e;const maxDistance = panelRef.current!.offsetWidth / 2;const { x, y } = shadow;const move = (e: MouseEvent) => {const disX = x + (e.pageX - startX);const disY = y + (e.pageY - startY);if (maxDistance >= Math.abs(disX)) setShadowItem("x", disX);if (maxDistance >= Math.abs(disY)) setShadowItem("y", disY);};const clear = () => {document.removeEventListener("mousemove", move);document.removeEventListener("mouseup", clear);document.removeEventListener("mouseleave", clear);};document.addEventListener("mousemove", move);document.addEventListener("mouseleave", clear);document.addEventListener("mouseup", clear);}}/></Panel><RowFlex><span>模糊</span><ProgressBarvalue={shadow.blur / 10}onChange={(percent) => {setShadowItem("blur", percent * 10);}}style={{ width: "9vw" }}/><span>{shadow.blur.toFixed(1)}</span></RowFlex><RowFlex><span>范围</span><ProgressBarvalue={shadow.spread / 10}onChange={(percent) => {setShadowItem("spread", percent * 10);}}style={{ width: "9vw" }}/><span>{shadow.spread.toFixed(1)}</span></RowFlex><RowFlex><Button onClick={onCancel} selected={false}>取消</Button><Button onClick={onCompute} selected={true}>确定</Button></RowFlex></Container>);
};export default BoxShadowPick;const Spot = styled.div`position: absolute;width: 0.75vw;height: 0.75vw;border-radius: 1vw;background-color: var(--deep-color, #1340f4);cursor: pointer;z-index: 2;
`;const Panel = styled.div`background-color: var(--tint-color, #f7f7f7);position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center;margin-top: 0.5vh;::before,::after {content: "";border: 1px dotted var(--deep-color, #1340f4);border-left: none;border-top: none;position: absolute;}::before {height: inherit;}::after {width: inherit;}
`;const Button = styled.button<{ selected: boolean }>`cursor: pointer;border: none;outline: none;border-radius: 0.3vh;width: 40%;height: 2.3vh;background-color: var(--tint-color, #eee);color: var(--deep-color, #999);letter-spacing: 1px;font-size: 0.8vw;transform: 0.3s linear;transition-property: background-color, color, font-weight;${(props) =>props.selected &&css`background-color: var(--deep-color, #1340f4);color: var(--tint-color, #fffae5);font-weight: bold;`};
`;const RowFlex = styled.div`display: flex;align-items: center;width: inherit;justify-content: space-evenly;
`;const Container = styled.div`width: 15vw;height: 30vh;border-radius: 1vh;background: #fff;box-shadow: 1px 2px 3px 1px #ccc;z-index: 1;display: flex;justify-content: space-evenly;align-items: center;flex-direction: column;padding: 1vh 0;
`;

box-shadow阴影选择器-react相关推荐

Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how. 我们可以使用CS ...
css3 shadow阴影
阴影部分 Shadow(阴影) text-shadow是给文本添加阴影效果,使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2 ...
shadow阴影属性
前缀实例说明 -ms- -ma-box-shadow Ie浏览器专属CSS属性添加-ms- -moz- -moz-box-shadow 所有基于Gecko引擎(Firfox)专属css属性添加-m ...

box-shadow阴影选择器-react

box-shadow阴影选择器-react相关推荐

最新文章

热门文章