1. vue-github-corners
Tholmans github-corners for VueJS
vue-github-corners
Package: vue-github-corners
Created by: Roeefl
Last modified: Tue, 28 Jun 2022 19:33:43 GMT
Version: 1.2.3
Downloads: 19
Repository: https://github.com/Roeefl/vue-github-corners

Install

npm install vue-github-corners
yarn add vue-github-corners

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

GithubCorner

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

Dependencies

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin