vue-ribbon
Version License

Did you develop a Vue application hosted on GitHub? Add this Vue component for embedding a GitHub fork ribbon on it!

It is Single File component implementing GitHub ribbons with Vue. It comes with a set of properties making the component customizable for your needs.

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.

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 }

Once imported, you can use your component as follows:

<!-- Right Top Demo --/> <Ribbon/> <!-- Left Top Demo --/> <Ribbon text='Vue rocks!' color='#51b982' position='left-top'/> <!-- Right Bottom Demo --/> <Ribbon text='Fork me on GitHub' url='https://github.com/P3trur0/vue-ribbon' position='right-bottom' color='#DA0011' fixed /> <!-- Left Bottom Demo --/> <Ribbon text='Ribbons are cool!' position='left-bottom' color='#FAF200' fixed />

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
color Defines the background color of the ribbon String #364a5e
fixed If defined, it makes the ribbon fixed Boolean false

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.