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.

View demo Download Source

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