react-banners

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