Awesome

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. 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!

Installation

You can install vue-ribbon using npm:

npm install --save vue-ribbon

Alternatively, you can import vue-ribbon via <script> tag in the browser directly, avoiding the NPM installation:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-ribbon"></script>

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:

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:

<Ribbon/>

Credits

The inspiration for this component comes from github-fork-ribbon-css.

Contributing

This component can be improved both in features and performances. Please, help in doing it better!