We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在开发过程中,我们经常会遇到使用背景的地方,比如登录页面,用户信息页面,封面图……
寻找契合业务主题的背景十分耗费精力,总觉得做的背景不合适,
如果直接用图片呢,逻辑是比较简单,但寻找到一张契合业务主题的图片也不是那么容易,
所以想到用符号生成幕布一样的背景,从这个出发点做了这个组件,
滚动的图片墙可能这个需求比较常见,用SmartBackground可以很快速的实现.
一个快速生成元素背景的react组件
https://github.com/yuanguandong/smart-background
https://yuanguandong.github.io/smart-background/
npm i smart-background -S
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' }, };
求推荐😁
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Smart Background
在开发过程中,我们经常会遇到使用背景的地方,比如登录页面,用户信息页面,封面图……
寻找契合业务主题的背景十分耗费精力,总觉得做的背景不合适,
如果直接用图片呢,逻辑是比较简单,但寻找到一张契合业务主题的图片也不是那么容易,
所以想到用符号生成幕布一样的背景,从这个出发点做了这个组件,
滚动的图片墙可能这个需求比较常见,用SmartBackground可以很快速的实现.
An React Component Can Automatically Generate The Background
一个快速生成元素背景的react组件
repository
https://github.com/yuanguandong/smart-background
Home Page | Live demo
https://yuanguandong.github.io/smart-background/
Install
How to use
Props
求推荐😁
The text was updated successfully, but these errors were encountered: