color
配色
https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=4
https://chartio.com/learn/charts/how-to-choose-colors-data-visualization/#qualitative-palette
random dark background color
const randomColor = () => {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
or
const randomColor = () => {
return "#" + Math.floor(Math.random() * 16777215).toString(16);
};
or
const color = `#${Math.floor(Math.random() * 10)}${Math.floor(
Math.random() * 10
)}${Math.floor(Math.random() * 10)}`;
color transparent
rgba(0,0,0,0.5)
chart
如何让多个 children 的某一个自动占满剩余空间
https://dev.to/hmintoh/setting-child-container-fill-parent-container-s-width-and-height-1gdf
.parent {
display: flex;
flex-direction: column;
}
.children1 {
flex: 1;
}
.children2 {
height: 2rem;
}
css 里单位的区别
https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/
Icon
icon source can be found here: https://www.iconfont.cn/
首页左上角的 icon, 可以这样写:
import logo from "./logo.png";
<div
className="logo"
style=\{\{
backgroundImage: `url(${logo})`,
backgroundRepeat: "no-repeat",
backgroundSize: "contain",
\}\}
css 可以写固定 pixel 的宽高
.logo {
float: left;
width: 40px;
height: 40px;
margin: 16px 24px 16px 0;
}
CSS Animation
https://www.w3schools.com/css/css3_animations.asp
we can use transition style to make animation
div {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
it means the width will change from 100px to 200px in 2s.
in the React App, reference this article: https://medium.com/hackernoon/5-ways-to-animate-a-reactjs-app-in-2019-56eb9af6e3bf