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

Project Page

All credits go to Tholman's Original Repo

Screenshot

Installation

For installing this module, run:

npm install --save vue-github-corners

Usage

Importing into your project:

import GithubCorner from 'vue-github-corners'

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>
  import Index from './components/content/Index'
  import GithubCorner from 'vue-github-corners'

  export default {
    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