内容简介: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. 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
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
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
Responsive View of FlexBanner
The banner will be shown top regardless of screen.
License
MIT © isamrish
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
UNIX 时间戳转换
UNIX 时间戳转换
正则表达式在线测试
正则表达式在线测试