Smart Background
在开发过程中，我们经常会遇到使用背景的地方，比如登录页面，用户信息页面，封面图……
寻找契合业务主题的背景十分耗费精力，总觉得做的背景不合适，
如果直接用图片呢，逻辑是比较简单，但寻找到一张契合业务主题的图片也不是那么容易，
所以想到用符号生成幕布一样的背景，从这个出发点做了这个组件，
滚动的图片墙可能这个需求比较常见，用SmartBackground可以很快速的实现，
希望可以帮到您，别忘了star哟
An React Component Can Automatically Generate The Background
一个快速生成元素背景的react组件
Repository
https://github.com/yuanguandong/smart-background
Live demo / Home page
https://yuanguandong.github.io/smart-background/
Install
npm i smart-background -S
How to use
import React from 'react';
import Background from 'smart-background';
import { FaLaugh } from 'react-icons/fa';
export default () => {
return (
<div style={styles.container}>
<Background underlayColor="#f00" animation={{ type: 'bottom', speed: 5 }}>
<div style={styles.content}>
<FaLaugh style={styles.icon} />
<h1 style={styles.text}>JUST DO IT</h1>
</div>
</Background>
</div>
);
};
const styles = {
container: { width: '100%', position: 'relative', height: 350 },
content: {
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
},
icon: { color: '#fff', fontSize: 120 },
text: { color: '#fff', fontSize: 36, fontWeight: 'bold' },
};
Props
property |
description |
type |
defaultValue |
required |
symbols |
元素/字符/符号集合 |
(string | ReactNode | Element)[ ] |
['●'] |
false |
random |
符号是否随机生成位置和大小 |
{ fontSizeRange: number[] } | undefined |
false |
|
underlayColor |
底衬颜色 |
string |
false |
|
underlayImage |
底衬图片 |
string |
false |
|
symbolsStyle |
符号样式 |
Object |
{color: '#000', opacity: '0.3'} |
false |
rotate |
符号旋转角度 |
number |
0 |
false |
symbolSize |
符号大小 |
number |
90 |
false |
gap |
符号间距 |
number |
10 |
false |
animation |
滚动动画 |
{type: 'left' | 'right' | 'top' | 'bottom'; speed: number;} |
false |
|
exact |
精确模式 |
boolean |
false |
false |
感兴趣的先start一下留着以后备用
