V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
favori
V2EX  ›  React

smart-background 自动生成符号背景的 react 组件,让你不再为背景头疼

  •  2
     
  •   favori · 90 天前 · 707 次点击
    这是一个创建于 90 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Smart Background

    在开发过程中,我们经常会遇到使用背景的地方,比如登录页面,用户信息页面,封面图……

    寻找契合业务主题的背景十分耗费精力,总觉得做的背景不合适,

    如果直接用图片呢,逻辑是比较简单,但寻找到一张契合业务主题的图片也不是那么容易,

    所以想到用符号生成幕布一样的背景,从这个出发点做了这个组件,

    滚动的图片墙可能这个需求比较常见,用 SmartBackground 可以很快速的实现,

    希望可以帮到您,别忘了 star 哟

    npm version npm version npm version npm version npm version npm version

    An React Component Can Automatically Generate The Background

    一个快速生成元素背景的 react 组件

    snapshot.png

    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
    9 条回复    2021-08-30 07:23:59 +08:00
    xiaoming1992
        1
    xiaoming1992   90 天前 via Android
    挺有意思的,demo 页可以留个 github 地址
    xarthur
        2
    xarthur   89 天前 via iPhone
    这个看上去不错。
    seakingii
        3
    seakingii   89 天前
    有意思.可惜 不是 vue 用的
    favori
        4
    favori   89 天前
    @xiaoming1992 感谢关注! demo 页右上角有个 github 的标,可以跳转到 github 仓库
    favori
        5
    favori   89 天前
    @xarthur 谢谢!
    favori
        6
    favori   89 天前
    @seakingii 感谢关注,后面如果有机会再来个 vue 版本的
    919615766
        8
    919615766   89 天前 via iPhone
    好玩
    favori
        9
    favori   89 天前
    @919615766 感谢!点个 star 吧☺️
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2272 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 02:54 · PVG 10:54 · LAX 18:54 · JFK 21:54
    ♥ Do have faith in what you're doing.