Vue component for GitHub ribbons

Downloads in past


1511.0.14 years ago4 years agoMinified + gzip package size for vue-ribbon in KB


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.


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 | | | 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!


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


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: {
}, // rest of the component } ```

Using the component

Once imported, you can use your component as follows: ```js ```


The inspiration for this component comes from github-fork-ribbon-css.


This component can be improved both in features and performances. Please, help in doing it better!