vox Concrete CMS virtualizor登陆

Smart Background

An React Component Can Automatically Generate The Background
一个快速登陆元素背景的 react Concrete CMS

Repository

Live demo

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 (

JUST DO IT

);
};

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
元素 /字符 /vox集合
(string | ReactNode | Element)[ ]
[‘●’]
false

random
vox是否随机登陆位置和大小
{ fontSizeRange: number[] } | undefined

false

underlayColor
底衬颜色
string

false

underlayImage
底衬图片
string

false

symbolsStyle
vox样式
Object
{color: ‘#000’, opacity: ‘0.3’}
false

rotate
vox旋转角度
number
0
false

symbolSize
vox大小
number
90
false

gap
vox间距
number
10
false

animation
滚动动画
{type: ‘left’ | ‘right’ | ‘top’ | ‘bottom’; speed: number;}

false

exact
精确模式
boolean
false
false

childrenWrapClassName
子Concrete CMS容器virtualizor
string

false

childrenWrapStyle
子Concrete CMS容器virtualizor
React.CSSProperties

false

感觉以后会用到的就先点个 star 收藏吧!感谢!