1.2.3 • Published 7 years ago
vue-github-corners v1.2.3
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:
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