Fully responsive react banner for websites

栏目: IT技术 · 发布时间: 4年前

内容简介:Fully responsive react banner for websites. It is useful when you want to show important message to your website visitors such as product updates announcement, upcoming event announcement etc.

Fully responsive react banner for websites

Fully responsive react banner for websites. It is useful when you want to show important message to your website visitors such as product updates announcement, upcoming event announcement etc.

A small react component `FlexBanner` to help you . Built with ❤︎ by Amrish Kushwaha

Fully responsive react banner for websites

Install

npm install --save flex-banner

or

yarn add flex-banner

Usage

import * as React from "react";

import FlexBanner from "flex-banner";

class Example extends React.Component {
  render() {
    return (
      <FlexBanner
        title="Fully responsive react banner for websites"
        ctaLink="https://github.com/IsAmrish/flex-banner"
        ctaTitle="Learn More"
        isCenter={true}
      />
    );
  }
}

Usage with Optional Properties

This example includes optional property in the component:

ctaTitle- Title of Call To Action (CTA).

isCenter- To make banner title and link center aligned.

crossIconSize- To define, font size of cross Icons.

animationTime- To define, sliding { SlideDown and SlideUp } time of banner.

delayToShowBanner- Delay in showing up banner.

daysToLive- No of days cookie will live before banner is shown up.

wrapperStyle- style object for styling of the wrapper

mainStyleTitle- style object for styling of the title of banner. If ctaTitle property is not defined, then this will defined the styling of link.

mainStyleLink- style object for styling of the CTA of banner.

crossStyle- style object for styling of the crossIcon. The font size of cross icon can only be defined by crossIconSize property.

Properties

Property Type Required Default value Description
title string yes the title of the banner
ctaLink string yes url for the call to action
ctaTitle string no The title for call to action. It is not required if you want to use title as title of call to action
isCenter boolean no true Make center aligned the banner with value true otherwise left aligned using value false
crossIconSize number no 22 size of crossIcon in px. Set its value to 0 if you don't want to add crossIcon.
animationTime number no 1 animationTime is in seconds . It's sliding time for banner. For no animation, set value to 0 .
delayToShowBanner number no 2 delayToShowBanner is in seconds . It's the time a user has to keep the page open before the banner is shown. For no delay, set value to 0
daysToLive number no 0 A property specifying the number of days the cookie will live before the banner is shown again to a user. The default is 0 , it means that banner will show up every time user refresh the page or hit the page url.
wrapperStyle object no style object for styling of the wrapper
mainStyleTitle object no style object for styling of title
mainStyleLink object no style object for styling of Call To Action link
crossStyle object no style object for styling cross Icon - such as color etc. Note - font size property will be set only by crossIconSize property.

Example with CTA title

import * as React from "react";

import FlexBanner from "flex-banner";

class Example extends React.Component {
  render() {
    return (
      <FlexBanner
        title="Fully responsive react banner for websites"
        ctaLink="https://github.com/IsAmrish/flex-banner"
        ctaTitle="Learn More"
        isCenter={false}
        crossIconSize={24}
        animationTime={1.5}
        delayToShowBanner={0}
        daysToLive={5}
        wrapperStyle={{ backgroundColor: "lightblue" }}
        mainStyleTitle={{ color: "black" }}
        mainStyleLink={{ color: "red" }}
        crossStyle={{ color: "red" }}
      />
    );
  }
}

Results

Fully responsive react banner for websites

Example without CTA title

import * as React from "react";

import FlexBanner from "flex-banner";

class Example extends React.Component {
  render() {
    return (
      <FlexBanner
        title="Fully responsive react banner for websites"
        ctaLink="https://github.com/IsAmrish/flex-banner"
        isCenter={false}
        crossIconSize={24}
        animationTime={1.5}
        delayToShowBanner={0}
        daysToLive={5}
        wrapperStyle={{ backgroundColor: "lightblue" }}
        mainStyleTitle={{ color: "green" }}
        mainStyleLink={{ color: "blue" }} // this will not work
        crossStyle={{ color: "red" }}
      />
    );
  }
}

Results

Fully responsive react banner for websites

Responsive View of FlexBanner

The banner will be shown top regardless of screen.

Fully responsive react banner for websites

License

MIT © isamrish


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

重新定义团队:谷歌如何工作

重新定义团队:谷歌如何工作

拉兹洛·博克 / 宋伟 / 中信出版集团 / 2015-12-1 / CNY 56.00

谷歌首席人才官拉斯洛•博克权威力作,谷歌公开认可的谷歌高层作品,首度揭秘谷歌颠覆工业时代模式的人才和团队管理的核心法则,《纽约时报》畅销榜第一名,Business Insider 2015最佳商业书籍,谷歌的创造力就在于此! 编辑推荐! 1、 谷歌人才官首次公开谷歌人才和团队管理的核心秘籍 在谷歌执掌人事多年的拉斯洛•博克是人才和团队管理的顶级专家。他加入谷歌后,谷歌的员工数从六......一起来看看 《重新定义团队:谷歌如何工作》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具