Vue component for GitHub ribbons

vue-ribbon

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/>

GitHub