Skip to content

ubaldop/vue-ribbon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!


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!