Vue Github Corners Component
Tholmans github-corners for VueJS
Current Version: 1.2.3
Description
Tholman's great github-corners in a convenient VueJS component
All credits go to Tholman's Original Repo
Screenshot
Installation
For installing this module, run:
npm install --save vue-github-cornersUsage
Importing into your project:
If importing into a .Vue file, don't forget to register the component in your export components
Demonstration:
<template> <div id="app"> <GithubCorner url='https://github.com/Roeefl/vue-github-corners'></GithubCorner> </div></template> <script> name: 'app' components: Index GithubCorner ...Basic Example:
<GithubCorner url="https://github.com/Roeefl/vue-github-corners" :size='120' colorScheme='grEEn' ></GithubCorner>Demonstrating usage of all available attributes:
<GithubCorner url="https://github.com/Roeefl/vue-github-corners" :size='140' cornerColor='#625D5D' gitColor='PeachPuff' leftCorner flipOnHover ></GithubCorner>Available Properties
| Property Name | Type | Default Value | Description |
|---|---|---|---|
| url | String | '/' | Link to github repo |
| size | Number (v-bind:) | 80 | Determines width & height of corner |
| colorScheme | String | 'auto' | Color scheme for the component, can be used for more convenience instead of providing custom colors. Valid values are 'black', 'blue', 'green', 'red', 'white' (case-insensitive) |
| cornerColor | String | '#625D5D' | Background color for the corner |
| gitColor | String | 'PeachPuff' | Fill color for the octocat |
| leftCorner | Boolean | false | Use leftCorner to have the corner on the left, otherwise it'll be on the right by default |
| flipOnHover | Boolean | false | Use flipOnHover to get a hover color flip affect to add some further life to the component |
Please note that using the colorScheme property will override cornerColor/gitColor properties, and is expected to use instead of those, not together