# react-banners > react universal banner for any website Latest version **1.0.7** (published 2018-12-22) · MIT license · 0 weekly downloads ## Install ```sh npm install react-banners pnpm add react-banners yarn add react-banners bun add react-banners ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.7 | | Published | 2018-12-22 | | First published | 2018-10-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=8 | | Dependencies | 4 | | Unpacked size | 196.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 8 | | Author | Janry | | Maintainers | janrywang | ## Links - npm: https://www.npmjs.com/package/react-banners - Repository: https://github.com/janrywang/react-banners - Homepage: https://github.com/janrywang/react-banners#readme - Issues: https://github.com/janrywang/react-banners/issues - npm.io page: https://npm.io/package/react-banners ## Dependencies (4) - [rebass](https://npm.io/package/rebass.md) ^3.0.0-9 - [spectra](https://npm.io/package/spectra.md) ^0.2.3 - [react-slot-props](https://npm.io/package/react-slot-props.md) ^0.1.16 - [styled-components](https://npm.io/package/styled-components.md) ^4.0.0-beta.10 ## Recent versions - 1.0.7 (latest) — 2018-12-22 - 1.0.6 — 2018-12-22 - 1.0.5 — 2018-12-20 - 1.0.4 — 2018-11-05 - 1.0.3 — 2018-10-30 - 1.0.2 — 2018-10-15 - 1.0.1 — 2018-10-11 - 1.0.0 — 2018-10-10 ## README # react-banners [![NPM](https://img.shields.io/npm/v/react-banners.svg)](https://www.npmjs.com/package/react-banners) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) > React 通用横幅组件，核心特性 > > - 🌺 场景化解决方案，最大化屏蔽样式问题 > - 🌺 基于 rebass 框架，快速配置布局样式 > - 🌺 响应式布局，多终端适配 > - 🌺 图文布局多样化 ![](https://img.alicdn.com/tfs/TB13Ruig7PoK1RjSZKbXXX1IXXa-2880-5896.png) ## Background 过去，我们开发一系列的偏静态展示型页面，特别是像 landing page 这些页面，页面中的 样式每次都得手撸一遍，非常浪费时间，但是，本人经过大量的调研 dribbble 上 landing page 的设计模式，摸索出了现阶段比较常用的设计形态，比如： - 单横幅区块 - 多横幅区块 - 单横幅卡片 - 多横幅卡片 区块与卡片的差别就是一个没有阴影，一个有阴影。 同时，对于图文布局，往往都是图片围绕着文本上下左右切换，还有就是，对于小屏终端而 言，一般都是图片在上或者在下。 还有，每张横幅，都可以加一个纹理，它是基于横幅做绝对定位的。 所以，总结出来这些规律，就可以很快的做出一个场景化的组件，可以快速解决横幅的各种 设计需求。 ## Install ```bash npm install --save react-banners ``` ## Usage ```jsx import React, { Component } from 'react' import MyComponent from 'react-banners' class Example extends Component { render() { return (
这是主标题这是主标题 这是副标题这是副标题 快速开始 查看文档
) } } ``` ## API `` > 横幅组件 | 属性 | 类型 | 示例 | | --------------- | --------------------------------- | -------------------------- | | rebass 基础属性 | any | https://rebassjs.org/props | | style 属性 | object | `{color:"#eee"}` | | children | `//` | | `` > 区块容器 | 属性 | 类型 | 示例 | | --------------- | ------ | -------------------------- | | rebass 基础属性 | any | https://rebassjs.org/props | | style 属性 | object | `style={{color:"#eee"}}` | | children | any | | `` > 区块容器 | 属性 | 类型 | 示例 | | ------------------- | --------------------- | -------------------------- | | 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 | `` | | `` > 区块 | 属性 | 类型 | 示例 | | --------------- | ---------------------------------- | -------------------------- | | rebass 基础属性 | any | https://rebassjs.org/props | | style 属性 | object | `{color:"#eee"}` | | href 属性 | string | `href="//taobao.com"` | | children | `/<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](https://github.com/Janry) --- _Source: https://npm.io/package/react-banners · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._