/react-banners

React通用横幅组件

Primary LanguageJavaScript

react-banners

NPM JavaScript Style Guide

React 通用横幅组件，核心特性

  • 🌺 场景化解决方案，最大化屏蔽样式问题
  • 🌺 基于 rebass 框架，快速配置布局样式
  • 🌺 响应式布局，多终端适配
  • 🌺 图文布局多样化

Background

过去，我们开发一系列的偏静态展示型页面，特别是像 landing page 这些页面，页面中的 样式每次都得手撸一遍，非常浪费时间，但是，本人经过大量的调研 dribbble 上 landing page 的设计模式，摸索出了现阶段比较常用的设计形态，比如：

  • 单横幅区块
  • 多横幅区块
  • 单横幅卡片
  • 多横幅卡片

区块与卡片的差别就是一个没有阴影，一个有阴影。

同时，对于图文布局，往往都是图片围绕着文本上下左右切换，还有就是，对于小屏终端而 言，一般都是图片在上或者在下。

还有，每张横幅，都可以加一个纹理，它是基于横幅做绝对定位的。

所以，总结出来这些规律，就可以很快的做出一个场景化的组件，可以快速解决横幅的各种 设计需求。

Install

npm install --save react-banners

Usage

import React, { Component } from 'react'

import MyComponent from 'react-banners'

class Example extends Component {
  render() {
    return (
      <div style={{ overflow: 'hidden' }}>
        <Banners py={80} style={{ overflow: 'hidden' }}>
          <Banners.Blocks textWidth={'40%'}>
            <Banners.Block imageAlign="right">
              <Banners.Title>这是主标题这是主标题</Banners.Title>
              <Banners.SubTitle>这是副标题这是副标题</Banners.SubTitle>
              <Banners.Description my={30}>
                <Banners.Button color="rgb(128, 111, 193)">
                  快速开始
                </Banners.Button>
                <Banners.Button color="rgb(128, 111, 193)" ghost>
                  查看文档
                </Banners.Button>
              </Banners.Description>
              <Banners.Image
                width={'33.5%'}
                src="//img.alicdn.com/tfs/TB1nchIg4jaK1RjSZKzXXXVwXXa-390-419.svg"
              />
            </Banners.Block>
          </Banners.Blocks>
          <Banners.Texture
            style={{
              width: '100%',
              height: '100%',
              backgroundRepeat: 'no-repeat',
              transform: 'scale(2.5)',
              backgroundSize: 'cover',
              backgroundPosition: '50%',
              backgroundImage:
                'url(//img.alicdn.com/tfs/TB1gqwCgSzqK1RjSZFjXXblCFXa-1141-1259.svg)'
            }}
          />
        </Banners>
      </div>
    )
  }
}

API

<Banners>

横幅组件

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object {color:"#eee"}
children <Blocks>/<Cards>/<Texture><Box>

<Banners.Box>

区块容器

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object style={{color:"#eee"}}
children any

<Banners.Blocks>

区块容器

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object style={{color:"#eee"}}
imageWidth 图片宽度 Number/String imageWidth="40%"
imageAlign 图片布局 left/top/right/bottom imageAlign="top"
textWidth 文本宽度 Number/String textWidth="40%"
textColor 文本颜色 String textColor="#eee"
children <Block>

<Banners.Block>

区块

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object {color:"#eee"}
href 属性 string href="//taobao.com"
children <Title>/<SubTitle>/<Description>

<Banners.Cards>

卡片容器

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object style={{color:"#eee"}}
imageWidth 图片宽度 Number/String imageWidth="40%"
imageAlign 图片布局 left/top/right/bottom imageAlign="top"
textWidth 文本宽度 Number/String textWidth="40%"
textColor 文本颜色 String textColor="#eee"
children <Card>

<Banners.Card>

卡片

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object {color:"#eee"}
href 属性 string href="//taobao.com"
children <Title>/<SubTitle>/<Description>

<Banners.Title>

主标题文本

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object {color:"#eee"}
children any

<Banners.SubTitle>

副标题文本

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object {color:"#eee"}
children any

<Banners.Description>

描述文本

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object {color:"#eee"}
children anry

<Banners.Texture>

纹理

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object {color:"#eee"}
children any
x 位置属性 number
y 位置属性 number

<Banners.Button>

按钮

属性 类型 示例
rebass 基础属性 any https://rebassjs.org/props
style 属性 object {color:"#eee"}
children any
ghost 是否是幽灵按钮 boolean

License

MIT © Janry