vue-ribbon

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: ```bash npm install --save vue-ribbon ``` Alternatively, you can import vue-ribbon via <script> tag in the browser directly, avoiding the NPM installation: ```html ```

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: ```js 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: ```js ```

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!