https://github.com/ubaldop/vue-ribbon
Vue component for GitHub ribbons
https://github.com/ubaldop/vue-ribbon
github ribbon vue vue-components vuejs vuejs-components
Last synced: about 2 months ago
JSON representation
Vue component for GitHub ribbons
- Host: GitHub
- URL: https://github.com/ubaldop/vue-ribbon
- Owner: ubaldop
- License: mit
- Created: 2019-02-06T16:23:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-12T14:10:38.000Z (over 6 years ago)
- Last Synced: 2024-05-29T11:19:50.128Z (12 months ago)
- Topics: github, ribbon, vue, vue-components, vuejs, vuejs-components
- Language: Vue
- Homepage: http://flatmap.it/vue-ribbon
- Size: 37.1 KB
- Stars: 16
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
_Did you develop a Vue application hosted on GitHub? Add this Vue component for embedding a GitHub fork ribbon on it!_
---
vue-ribbon is a Vue Single File Component implementing [GitHub ribbons](https://github.blog/2008-12-19-github-ribbons/). It comes with a set of properties making the component customizable for your needs.
### Properties
If you need to customize the ribbon look and feel, you can use the following optional properties.
| Name | Description | Type | Default |
| -------- | ----------------------------------------------------------------------------------------------- | --------- | ------------------------------- |
| text | The text to display on the ribbon | `String` | _vue-ribbon: check it out!_ |
| url | The URL linked | `String` | _https://flatmap.it/vue-ribbon_ |
| position | The position of the ribbon. It can be `right-top`, `right-bottom`, `left-top`, `left-bottom` | `String` | _right-top_ |
| fixed | If defined, it makes the ribbon fixed | `Boolean` | _false_ |
| color | Defines the background color of the ribbon | `String` | _#364a5e_ |
The color of the text is automatically detected by the component: for background color with a luma greater than 128 the text is white, otherwise black.
See how it looks on this [demo](https://flatmap.it/vue-ribbon)!
### Installation
You can install vue-ribbon using npm:
```bash
npm install --save vue-ribbon
```
Alternatively, you can import `vue-ribbon` via `` tag in the browser directly, avoiding the NPM installation:
```html
<script src="https://unpkg.com/vue">
```
### Usage
Once installed, it is easy to use it.
#### Importing the component
First, you need to import `vue-ribbon` in your files. You can do that in different ways. For example, it can be imported into a build process for use in full-fledged Vue applications:
```js
import Ribbon from 'vue-ribbon';
export default {
components: {
Ribbon,
},
// rest of the component
}
```
#### Using the component
Once imported, you can use your component as follows:
```js
```
### Credits
The inspiration for this component comes from [github-fork-ribbon-css](https://github.com/simonwhitaker/github-fork-ribbon-css).
### Contributing
This component can be improved both in features and performances. Please, help in doing it better!