https://github.com/novicell/message-bar
https://github.com/novicell/message-bar
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/novicell/message-bar
- Owner: Novicell
- Created: 2020-03-13T09:50:47.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-23T12:55:09.000Z (about 6 years ago)
- Last Synced: 2025-03-01T23:31:47.374Z (over 1 year ago)
- Language: TypeScript
- Size: 79.1 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@novicell/message-bar)
# @Novicell/message-bar
Quickly drop in a status-bar in the top/bottom of a page if you have an important message to share.
## Demo
Link to codepen: https://codepen.io/Novicell/pen/ZEGoXqe
## Installation
There is multiple ways to install the component, you can either install it as a NPM package, or you can include it directly from a CDN.
### NPM
```sh
npm install @novicell/message-bar
```
Then you can include the package in your main.js or similar depending on your project accordingly
```javascript
import '@novicell/message-bar';
```
### CDN
```html
```
or for a specific version
```html
```
## Usage
To use the application simply drop in the html tag
```html
```
### Options
The component has multiple properties that you can use to adjust the look and feel as well as the message of the message bar.
* `position`: - Decides if the bar should sit at the top or the bottom of the page (Default: "top")
* `background-color` - Decides the background color of the bar, can be hex, rgba, etc (Default: "#FF8387")
* `color` - Decides the color of text the bar, can be hex, rgba, etc (Default: "#FFF")
* `message` - Sets the text within the bar (Default: "This is your message.")
* `href` - Sets the link of the button (Default: "") (Button wont be shown if no link is provided)
* `button-text` - Sets the text within the button (Default: "Read more")
* `target` - Decides if the link should open in the current page or a new window etc. (Default: "_self")
* `fixed` - Decides if the bar should be positioned fixed or relative (Default: "fixed")