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!